Seguro que alguna vez te has planteado la posibilidad de añadir una nueva pestaña a la página de producto de Woocommerce con un título y descripción personalizada para un determinado producto de la tienda online.
Pues bien, vamos a utilizar un plugin gratuito para añadir una nueva pestaña personalizada a la ficha de producto en Woocommerce
También veremos como podemos eliminar la pestaña de valoraciones de producto en Woocommerce.
ÍNDICE DEL POST
1.- Instalar el plugin Custom Product Tabs for Woocommerce
Lo primero que debemos hacer es instalar el plugin gratuito “Custom Product Tabs for Woocommerce”.
Para ello iremos a: “Plugins > Añadir nuevo” y en la barra de búsqueda escribiremos el nombre del plugin: “Custom Product Tabs for Woocommerce”.
A continuación haremos clic en el botón “Instalar Ahora”.
Instalar plugin para añadir pestañas personalizadas a Woocommerce
Una vez instalado haremos clic en el botón “Activar”. También podemos activar el plugin “Custom Product Tabs for Woocommerce” yendo a: “Plugins > Plugins Instalados” y haciendo clic en el texto “Activar” situado en dicho plugin.
2.- Añadir una nueva pestaña a un producto con Woocommerce
Para añadir una nueva pestaña a la ficha de un determinado producto lo que primero tenemos que hacer es acceder a dicho producto.
Para ello iremos a: “Productos > todos los productos” y haremos clic en “Editar” sobre el producto al que queramos añadir una nueva pestaña de descripción del producto.
En el bloque denominado “Datos del producto” que es el bloque en el cual se introducen los precios, stock y resto de características del producto en Woocommerce, veremos que aparece una nueva pestaña denominada: “Pestañas personalizadas”.
Al hacer clic en dicha pestaña te aparecerán 2 opciones:
i.- Añadir una pestaña: este botón sirve para añadir una nueva pestaña en la descripción del producto y es la opción que vamos a ver ahora.
ii.- Añadir una pestaña guardada: este botón sirve para añadir una pestaña al producto que hayamos generado y guardado anteriormente. Esto lo veremos en el siguiente apartado.
Pestañas personalizadas en datos de producto woocommerce
Una vez hayamos hecho clic en el botón “Añadir una pestaña” nos aparecerán las siguientes opciones:
i.- Título de la pestaña: el título que pongamos aquí será el título que aparecerá en la nueva pestaña.
ii.- Área de texto con editor: en el área de texto escribiremos el contenido de texto e imágenes que queremos que se muestre en el interior de la nueva pestaña que estamos creando.
iii.- Move tab order: en caso de añadir más de una pestaña en la ficha de producto con las puntas de flecha podremos cambiar el orden de las mismas.
iv.- Quitar pestaña: haciendo clic en este botón eliminaremos la pestaña creada.
Personalizar la nueva pestaña en producto de Woocommerce
Una vez puesto el título a la pestaña y su contenido haremos clic en el botón “Save tabs” para guardar los cambios. Después haremos clic en el botón “Actualizar” del producto y realizaremos una vista previa.
Nueva pestaña de producto
Como puedes ver la nueva pestaña añadida al producto aparecerá a la derecha de la pestaña de información adicional.
3.- Añadir varias pestañas a un producto Woocommerce
Para añadir una nueva pestaña tras haber añadido ya una previamente continuaremos en el bloque “Datos del producto” y en la pestaña “Pestañas personalizadas”.
Haremos clic en el botón “Añadir una pestaña”
Añadir varias pestañas personalizadas de producto
Se añadirá un nuevo bloque donde volveremos a introducir un título para la pestaña (tab) y una descripción de texto para el interior de la misma.
A continuación haremos clic en “Save tabs” y guardaremos el producto.
Añadir varias pestañas personalizadas en woocommerce
Podemos cambiar el orden de estas dos pestañas que hemos creado en la ficha de producto haciendo clic en las puntas de flecha que aparecen en el lateral derecho de cada pestaña con la etiqueta: “Move tab order” (cambiar orden de pestaña)
Probablemente las pestañas te aparecerán en dos líneas.
4.- Crear una pestaña clonada en muchos productos de Woocommerce
Si queremos utilizar una determinada pestaña con el mismo contenido en muchos productos, no será necesario crear la pestaña para cada uno de los productos.
Con este plugin tenemos la opción de crear un pestaña con un determinado título y contenido e insertarla en muchos productos.
4.1.- Creación de la pestaña
Para crear la pestaña en cuestión iremos en el menú lateral a: “Pestaña de productos personalizadas > Pestaña de productos personalizadas”.
En la parte superior haremos clic en el botón: “Añadir pestaña” donde nos aparecerán los siguientes campos:
i.- Título de pestaña: aquí pondremos el título que queremos que se visualice en la nueva pestaña de producto.
ii.- Nombre de pestaña: este será el nombre identificador de la pestaña creada (no aparecerá en la web, solo en el panel de administración)
iii.- Contenido de la pestaña: aquí escribiremos el contenido de la nueva pestaña de producto.
Creación de pestaña personalizada para añadir a productos
Una vez generado el contenido haremos clic en el botón “Guardar pestaña”.
4.2.- Inserción de la pestaña en un producto
Para insertar la pestaña en un producto concreto editaremos el producto en cuestión y en el bloque “Datos de producto” haremos clic en la pestaña “Pestañas personalizadas”.
A continuación haremos clic en el botón “Añadir una pestaña guardada” y nos aparecerá una ventana emergente con las diferentes pestañas que hayamos creado.
Para elegir la que queremos insertar en el producto haremos clic en el botón “+” que aparece a la derecha de la pestaña que queramos añadir.
Elegir la pestaña que queremos insertar en la descripción del producto
Una vez insertada guardaremos la pestaña haciendo clic en “Save tabs” y guardaremos el producto.
5.- Quitar la pestaña de Valoraciones de Woocommerce
Ya que estamos con el tema de las pestañas de productos en Woocommerce vamos a ver cómo podemos eliminar la pestaña de Valoraciones de los productos con Woocommerce.
La pestaña de valoraciones se utiliza para que los clientes o visitantes puedan hacer comentarios y valoraciones (estrellas) de los productos de la tienda.
En Woocommerce no hay una opción en el panel de administración para poder eliminar la pestaña de valoraciones de una manera directa.
Por este motivo lo que tendremos que hacer será añadir el siguiente código al final del archivo functions.php de la plantilla de vuestro wordpress:
add_filter( 'woocommerce_product_tabs', 'sb_woo_remove_reviews_tab', 98);
function sb_woo_remove_reviews_tab($tabs)
{
unset($tabs['reviews']);
return $tabs;
}
El archivo functions.php estará en la ruta: wp-content/themes/nombre_plantilla
El problema de modificar el archivo functions.php de la plantilla es que cuando se actualice la plantilla se perderá este código y tendréis que volver a añadirlo.
Lo ideal sería utilizar un tema hijo y ahí incluir un archivo functions.php vacío (solo con la etiqueta de apertura <?php) en el cual se añadiría el código antes expuesto. De esta manera, al actualizar la plantilla no se perdería este código y el cambio consistente en hacer desaparecer la pestaña de valoraciones de productos en Woocomemrce se mantendría.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola Joaquín. Gracias por tus post sobre Woocommerce que me ayudan mucho.
Necesito saber cómo pone el cuadro de las pestañas sin borde y con las pestañas centradas. Te adjunto un link de ejemplo de una web que lo hace para ver si puedes ayudarme.
Un saludo
https://www.fitvia.es/producto/almond-caramel-slim-tea/
Hola Ana.
Gracias por tus palabras. Que se pueda hacer eso o no, depende únicamente de las opciones de personalización de que disponga la plantilla que estés utilizando. Debes ir a las opciones del tema específicas para Woocommerce o para la ficha de producto y ver si tienes las opción para eso.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, plantillas wordpress como flatsome, Divi, Astra pro, , etc. etc.
Hola Joaquín.
He instalado y desinflado varias veces el pluging y aparentemente el el administrador funciona bien con todas las particularidades pero a la hora de publicarlo, nunca consigo que se muestre, publicandolo en mi wep.
¿Donnde puede estar el error?
Muchas gracias por tu ayuda
Saludos Luismi
Buenas.
Podría ser un tema de compatibilidad entre tu versión de Woocommerce, versión de plantilla y versión del plugin en cuestión.
Aquí tienes el foro de soporte del plugin: foro Custom Product Tabs for WooCommerce
Hola Joaquín,
He estado echando un ojo a tu artículo. Estoy usando ese plugin pero me gustaría saber si es posible insertar las tablas de manera masiva en todos los productos sin tener que ir uno a uno. Si esta opción estuviese posible, ¿cómo podría integrarlo?
Gracias!
Buenas.
puedes crear una pestaña reutilizable en muchos productos, pero lo has de insertar específicamente en cada producto según se indica en el apartado 4
Buen día Joaquín, no sé si tu me puedas ayudar, alguna vez cuando comencé a hacer mi web, mi cliente me pedía no tuviera la parte de las pestañas (tabs), y recuerdo las oculte con un «display:none;» , pero ahora se ve en la necesidad de mostrarlas, por lo cual no encuentro dónde quitar el display none ya que eso tiene bastante tiempo. Tu sabras cómo puedo hacerlo? ya active el plug que recomiendas, se activa perfectamente, lo puedo configurar y todo, pero no se muestra en el producto. ¿Podrías ayudarme?
Buenas,
has de buscar donde pusiste el display:none.
Es posible que tengas un tema hijo y lo pusieras ahí. O que lo pusieras directamente en la plantilla (algunas tienen opciones para añadir css)
Hola Joaquín
¿Dónde podría cambiar el color del botón de valoraciones o con que código css podría hacerlo? porque no me deja desde : personalizador de temas/ botones/estilo botones
Prueba con la clase CSS
et_submit_button
o
submit
Hola Joaquín,
he conseguido cambiar el nombre de la pestaña «descripción» poniendo este código en functions del tema Divi hijo:
add_filter( ‘woocommerce_product_tabs’, ‘oaf_wc_change_product_tabs_titles’, 20);
function oaf_wc_change_product_tabs_titles($tabs) {
$tabs[‘description’][‘title’] = ‘SINOPSIS’;
return $tabs;
}
pero ahora necesito quitar el título de la descripción larga o poder modificarlo, que te lo pone por defecto woocommerce también como «Descripción».
Buenas,
Para modificar el texto de la pestaña seguramente tendrás que hacerlo con un plugin de traducciones como Loco Translate. Aquí tienes un post sobre el tema: Traducciones Woocommerce Loco Translate
El texto de la pestaña ya lo puede modificar mediante el código que te puse, lo que necesito es poder quitar el h1 de la descripción larga del woocommerce
He estado buscando pero no he encontrado ningún código para poder modificar el tipo título (H) de la descripción larga.
Gracias Joaquín, si finalmente supieras la manera, te agradecería me lo comunicaras… gracias por ayudarnos
Hola Joaquín,
estaba justo con el problema de las pestañas y zás!, me lo has resuelto, muchas GRACIAS…ahora necesito saber como le puedo cambiar el nombre a la primera pestaña «descripción» que hace el woocommerce por defecto y el título «descripción» en la descripción larga.
Hola,
Para cambiar el nombre de la pestaña descripción existen dos posibilidades:
1.- Utilizar un plugin de traducciones como loco Translate: como cambiar textos woocommerce con Loco Translate
2.- Añadir un código a function.php (mejor en el tema hijo): tengo que hacer unas pruebas y lo publicaré en el post