Cómo personalizar la página de Producto en WooCommerce
La página de producto es una de sus partes más importantes al crear un eCommerce y que más ayudan a las ventas, así que requiere una atención especial. Un hosting con WooCommerce permite personalizar la página de producto con o sin plugins. En esta ocasión, trataremos de explicar cómo hacerlo sin necesidad de plugins, aunque tardaremos mucho en recopilar diferentes plugins que existen para esta personalización en un próximo artículo.
Cambiar elementos de orden
Si modificamos el orden de nuestros elementos (precio, descripción, título, etc.) le daremos otro aspecto diferente a como viene por defecto. Esto lo podemos hacer desde el archivo que se encuentra en: /wp-content/plugins/woocommerce/templates/content-single-product.php.
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 ); add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 15 );
Lo que hemos hecho en este ejemplo, ha sido situar el elemento description debajo del elemento Call to Action que nos invita a añadir al carrito. O lo que es lo mismo, comprar el producto.
Quitar pestañas
Tal vez, te pueda interesar eliminar pestañas que no aporten nada. Para ello, vamos al archivo functions.php, que encontrarás en el directorio del tema que estés utilizando:
* Remove product tabs
function woo_remove_product_tab($tabs) {
unset( $tabs['reviews'] ); // Quitar la pestaña de reseñas
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tab', 98);
En el ejemplo, lo que hemos hecho ha sido eliminar la pestaña reviews.
Añadir una nueva pestaña
Al contrario que en el punto anterior, nos puede interesar crear una nueva pestaña. En esta ocasión, crearemos una pestaña que se llame A tener en cuenta y en la que añadiremos un texto en su interior:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Añade una nueva pestaña
$tabs['test_tab'] = array(
'title' => __( 'A tener en cuenta', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
// Aquí iría el contenido de la pestaña
echo '<h2>Devoluciones</h2>';
echo '<p>Los gastos de envío de las devoluciones serán por cuenta del comprador.</p>';
}
Cambiar la imagen por defecto del producto
Si por algún motivo no disponemos de una imagen del producto que queremos mostrar, tal vez nos interese que se muestre una foto por defecto:
add_filter( ‘woocommerce_placeholder_img_src’, ‘bp_woo_placeholder’, 10 );
function bp_woo_placeholder( $image_url ) {
$image_url = ”;
return $image_url;}
En la variable $image_url = ”; pondremos la URL correspondiente donde tenemos la imagen que queremos mostrar por defecto cuando hemos subido un producto que no dispone de una. Por ejemplo, una imagen genérica de nuestra tienda online.
Modificar el número de columnas
Otra opción que nos puede interesar es mostrar en más o menos columnas, los productos que salen en pantalla. Con el siguiente código podríamos mostrar los productos en 5 columnas:
add_filter ( 'woocommerce_product_thumbnails_columns', 'xx_thumb_cols' );
function xx_thumb_cols() {
return 5;
}
Modificar el título de las pestañas
Si no te interesa el nombre que traen las pestañas por defecto y quieres cambiarlo, tan solo tienes que aplicar el siguiente código, que, como ejemplo, hemos cambiado la pestaña llamada Description por su castellano Descripción:
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['description']['title'] = __( 'Descripción' ); // Renombra la pestaña description
return $tabs;
}
Las posibilidades con programación son infinitas. Pero has de tener en cuenta que necesitas tener conocimientos avanzados, por lo que es recomendable, si no tienes estos conocimientos, utilizar algún plugin específico, de los que hablaremos en próximos artículos.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.