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.

 


 

 

 

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 y activar plugin para crear nuevas pestañas personalizadas en productos woocommerce

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.

 

Aprende a crear una tienda online con Woocommerce y la plantilla Divi: Tienda Woocommerce + Divi

 

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.

 

nueva opción de pestañas personalizadas

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.

 

titulo y descripción de la nueva pestaña producto woocommerce

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 personalizada

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”

 

poner más de una nueva pestaña productos woocommerce

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.

 

2 pestañas personalizadas en woocommerce

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.

 

Aprende a crear una tienda online con Woocommerce y la plantilla Avada: Woocommerce + Avada

 

 

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.

 

Cómo añadir iconos de compartir productos en redes sociales: compartir 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.

 

pestaña personalizada a incluir en productos woocommerce

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.

 

insertar tab o pestaña en woocommerce

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í.

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)

2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.