Hay productos que necesitan bastante más información que una descripción básica. Medidas, materiales, cuidados, instrucciones, envíos, garantías o preguntas frecuentes pueden acabar mezclados en un solo bloque y hacer que la ficha resulte pesada de leer.
En esos casos, las pestañas personalizadas en WooCommerce nos permiten repartir el contenido de una forma más cómoda. En lugar de obligar al cliente a recorrer toda la página, podemos separar cada tema y dejar que consulte solo lo que le interesa.
WooCommerce ya muestra algunas pestañas por defecto, como la descripción, la información adicional y las valoraciones. Pero no todos los productos necesitan los mismos apartados. Una tienda de ropa puede requerir una guía de tallas, mientras que un producto técnico quizá necesite instrucciones, documentación descargable o información sobre la garantía.
Tampoco hace falta convertir la ficha en una colección interminable de pestañas. Lo mejor es añadir las que aporten algo. Si están bien elegidas, ayudan a ordenar el contenido, resolver dudas y evitar que datos importantes queden escondidos dentro de una descripción demasiado larga.
Para crearlas podemos usar un plugin o añadirlas mediante código en el archivo de funciones del tema. La elección dependerá de cómo trabajemos, de la cantidad de productos y de si cada ficha tendrá información distinta o compartirá contenido con otras.
También podemos preparar pestañas para un solo producto o reutilizarlas en varios. Esto último resulta práctico para mostrar datos que se repiten, como políticas de devolución, plazos de entrega, cuidados o instrucciones generales. Así no tenemos que copiar el mismo texto en cada ficha y, cuando algo cambie, podemos actualizarlo desde un único lugar
Tabla de contenidos
- 1 Función de las pestañas en WooCommerce
- 2 Plugin Custom products tabs para WooCommerce
- 3 Añadir pestañas personalizadas en productos de WooCommerce con códigos en functions.php
- 4 Agregar contenido a la pestaña personalizada de producto
- 5 Reordenar pestañas personalizadas de producto por código
- 6 Conclusión
Función de las pestañas en WooCommerce
Teniendo esto en cuenta podemos conocer que por defecto, cada producto de WooCommerce tiene 3 pestañas posibles:
Descripción: Esta sección es donde se muestra la descripción larga del producto.
Información Adicional: Por el contrario, esta pestaña muestra los atributos del producto, si los tiene, en caso de no haberlos configurado, no se ve entre las opciones de visualización.
Calificaciones: Esta sección muestra dos factores, los comentarios y calificaciones del producto, si están activas en nuestra configuración.
Estas pestañas por defecto en WooCommerce pueden ser más que suficientes para la mayoría de las tiendas en línea, pero existe la posibilidad de que nuestro sitio o tienda necesite añadir una pestaña adicional de producto en WooCommerce, una personalizada donde podamos agregar una información importante o explicación del proceso de entrega por ejemplo.
Pues como todo en WordPress, tenemos varias soluciones para conseguir una pestaña extra de producto, ya sea de forma directa con un complemento o plugin, o también un código para poder tener esta mejora a nuestros productos.
Plugin Custom products tabs para WooCommerce
Custom Product Tabs for WooCommerce nos permite añadir apartados nuevos a las fichas de producto desde el propio panel de WordPress, sin tener que tocar el código del tema.
Podemos usar estas pestañas para separar información que no queremos dejar mezclada dentro de la descripción principal. Por ejemplo, instrucciones de uso, materiales, guías de tallas, vídeos, preguntas frecuentes, condiciones de envío o documentos relacionados con el producto.
El plugin permite trabajar de dos formas. Podemos crear una pestaña solo para un producto concreto o preparar una pestaña que se muestre en varios artículos.
Esta última opción viene muy bien cuando ciertos datos se repiten en buena parte del catálogo. En lugar de copiar las condiciones de devolución, los cuidados o los tiempos de entrega en cada ficha, podemos preparar ese contenido una sola vez y reutilizarlo donde haga falta.
Para instalar el plugin desde el panel de WordPress, seguimos estos pasos:
- Accedemos al dashboard de WordPress.
- Vamos a Plugins > Añadir plugin.
- En el buscador escribimos Custom Product Tabs for WooCommerce.
- Localizamos el plugin desarrollado por Web Builder 143.
- Hacemos clic en Instalar ahora.
- Cuando finalice la instalación, seleccionamos Activar.
Una vez activo, veremos nuevas opciones para crear pestañas globales y añadir pestañas específicas dentro de cada producto.
Si la información solo corresponde a un producto, podemos crear la pestaña de forma directa desde su ficha.
Para hacer esto podemos seguir los siguientes puntos:
- Vamos a Productos > Todos los productos.
- Editamos el producto donde queremos añadir la pestaña.
- Bajamos hasta el apartado Datos del producto.
- Seleccionamos la nueva opción Custom Tabs o Pestañas personalizadas.
- Hacemos clic en Add New Tab.
- Escribimos el título que aparecerá en la pestaña.
- Añadimos el contenido mediante el editor disponible.
- Guardamos los cambios y actualizamos el producto.
Dentro del contenido podemos incluir textos, imágenes, enlaces, vídeos, códigos cortos y otros elementos compatibles con el editor de WordPress.
En cada pestaña podemos añadir el mismo tipo de contenido que usamos en una entrada o página: texto, imágenes, enlaces, vídeos o códigos cortos, entre otras opciones del editor.
Imaginemos que tenemos una tienda de ropa. Podríamos crear una pestaña de Guía de tallas y colocar allí una tabla con las medidas. En el caso de un producto electrónico, ese espacio nos serviría para incluir instrucciones, recomendaciones o datos técnicos que no queremos mezclar con la descripción.
Estas pestañas se mostrarán solo en el producto donde las hayamos creado.
Cuando varios productos comparten la misma información, no resulta práctico crear la pestaña de forma manual en cada uno. Para estos casos podemos utilizar las pestañas globales. Esto es sencillo de generar, solo tenemos que hacer lo siguiente:
- Entramos en Productos > Tabs.
- Hacemos clic en Add New Tab.
- Añadimos un nombre interno para identificarla.
- Escribimos el título que verá el cliente.
- Agregamos el contenido de la pestaña.
- Indicamos en qué productos queremos mostrarla.
- Publicamos la nueva pestaña.
El plugin permite asignarla según diferentes condiciones, como:
- Productos concretos.
- Categorías de productos.
- Etiquetas.
- Marcas de WooCommerce.
Por ejemplo, podemos preparar una pestaña con los cuidados del producto y mostrarla en todos los artículos de una categoría. Si algún día cambian las indicaciones, editamos esa pestaña una sola vez y la nueva información aparecerá en todos los productos donde esté asignada.
Si necesitamos agregar más ajustes personalizados a nuestro WordPress, puedes ver más guías de forma directa en nuestra categoría de WooCommerce disponible en nuestro blog:
Añadir pestañas personalizadas en productos de WooCommerce con códigos en functions.php
El filtro de woocommerce_product_tabs proporcionado por WooCommerce debe usarse como se muestra a continuación para agregar una pestaña personalizada a una página de producto en WooCommerce. El código debe agregarse al archivo functions.php de su tema.
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Agregar nuevo tab
$tabs['desc_tab'] = array(
'title' => __( 'Información adicional', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
}
Para agregar este código al archivo fuctions.php debemos ingresar en nuestro Cpanel > administrador de archivos > Public_html > Dominio > wp-content > themes > tema utilizado > archivo functions.php.
Agregar contenido a la pestaña personalizada de producto
Una vez que hemos agregado una pestaña personalizada dentro de un producto de WooCommerce, el contenido de la pestaña se puede agregar de dos maneras. El contenido se puede agregar como datos estáticos o se puede obtener de los campos personalizados agregados al panel de administración. El siguiente código debe agregarse al archivo functions.php de la misma forma en la que hemos agregado el código previo, es decir, debemos ingresar en nuestro Cpanel > administrador de archivos > Public_html > Dominio > wp-content > themes > tema utilizado > archivo functions.php.
function woo_new_product_tab_content () {
// El contenido de la nueva pestaña
echo 'Lorem Ipsum
' ;
}
Reordenar pestañas personalizadas de producto por código
Las pestañas personalizadas de producto que se han agregado con nuestro código personalizado también se pueden reorganizar según lo que necesitemos. Para lograr esto, el filtro ‘woocommerce_product_tabs’ debe usarse una vez más. El código para el mismo será el siguiente.
add_filter( 'woocommerce_product_tabs', 'sb_woo_move_description_tab', 98);
function sb_woo_move_description_tab($tabs) {
$tabs['desc_tab']['priority'] = 5;
$tabs['reviews']['priority'] = 20;
return $tabs;
}
Usando el método anterior, podemos recibir una gran cantidad de contenido sin saturar la página del producto. La organización lógica de los datos no solo facilita que el visitante del sitio web comprenda las características del producto, sino que también facilita al administrador web mantener la uniformidad de los datos en todo el producto.
Conclusión
Las pestañas personalizadas en WooCommerce pueden venirnos muy bien cuando una ficha empieza a acumular demasiada información. Medidas, materiales, cuidados, garantías, preguntas frecuentes o condiciones de envío pueden terminar formando un texto largo que cuesta revisar.
Separar esos datos por apartados hace que todo quede más fácil de consultar. El cliente puede ir de forma directa a la información que busca sin tener que recorrer toda la descripción.
WooCommerce ya incluye algunas pestañas, como la descripción, la información adicional o las valoraciones. Aun así, dependiendo del producto, puede que necesitemos otras secciones más concretas. Una tienda de ropa, por ejemplo, podría añadir una guía de tallas. En una tienda de electrónica quizá tenga más sentido mostrar instrucciones, especificaciones o documentación.
También podemos decidir si la pestaña se utilizará en un solo producto o en varios. Cuando la información se repite en buena parte del catálogo, las pestañas globales nos ahorran tener que copiar el mismo contenido una y otra vez. Además, si algo cambia, basta con editarlo desde un único lugar.
Con plugins como Custom Product Tabs for WooCommerce, todo esto se puede gestionar desde el panel de WordPress. Podemos añadir textos, imágenes, enlaces o vídeos, indicar en qué productos aparecerá cada pestaña y cambiar el orden en el que se muestran. Incluso es posible ocultar alguna de las pestañas que WooCommerce trae por defecto si no tiene utilidad para nuestra tienda.
Eso sí, tampoco conviene llenar la ficha de apartados. Si añadimos demasiados, el usuario puede terminar saltando de una pestaña a otra sin encontrar con claridad lo que necesita. Lo mejor es usar títulos sencillos y mantener solo aquellas secciones que de verdad ayuden a explicar el producto.
Una vez configuradas, merece la pena revisar cómo se ven en ordenador y móvil. También conviene comprobar que las imágenes encajan bien, que no estamos repitiendo información y que las pestañas funcionan con la plantilla de producto del tema o del constructor que utilicemos.
Bien utilizadas, estas pestañas pueden hacer que una ficha se entienda mucho mejor. La información sigue estando completa, pero se presenta de una forma más cómoda para quien está valorando la compra.
También te puede interesar:
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
