En este tutorial vamos a ver cómo añadir pestañas personalizadas a los productos de WooCommerce en un producto o en varios de ellos.
Pestañas personalizadas en WooCommerce
Si tenéis una tienda online y usáis WooCommerce, es posible que alguna vez hayáis echado en falta el poder agregar algunas pestañas personalizadas a los productos, para añadir información adicional a los mismos.
En el repositorio oficial de WordPress existen varios plugins que nos van a permitir agregar estas nuevas pestañas, y en este caso vamos a usar uno de ellos con el que podremos hacerlo de forma muy sencilla. Por cierto, si os interesa todo este tema de los plugins para sacarle mayor partido a WooCommerce, podéis echar un vistazo al curso de WooCommerce intermedio donde veremos varios que os van a resultar muy útiles.
Pues bien, volviendo al plugin, el que vamos a usar en esta ocasión se llama Custom Product Tabs para WooCommerce, ha sido desarrollado por YIJES, Inc y está disponible desde el repositorio. Esta extensión nos ofrece la posibilidad de crear pestañas en las páginas de productos individuales de WooCommerce, permitiéndonos así agregar nuevas funcionalidades y personalizar el contenido de dichas páginas. Dicho todo esto, ¡vamos a empezar!.
Instalando el plugin Custom Product Tabs para WooCommerce
Como siempre, lo primero que haremos será ir al escritorio de WordPress, "Plugins/Añadir nuevo", e introducir el nombre del plugin en el buscador, con "Custom Product Tabs" será suficiente para encontrarlo. Una vez aparezca en pantalla y lo tengamos localizado, haremos clic en el botón "Instalar ahora", y al terminar lo activaremos.
Instalar plugin Custom Product Tabs for WooCommerce
Si lo preferimos, podemos descargar el plugin del repositorio y subirlo a WordPress desde la opción "Plugins/Añadir nuevo/Subir plugins" seleccionando el archivo comprimido correspondiente. Después lo instalamos y activamos y lo tendríamos listo.
Cuando lo hayamos hecho, aparecerá una nueva opción dentro de las fichas de producto desde la cual podremos crear nuevas pestañas personalizadas. Para acceder solamente tenemos que abrir en modo edición el producto que queramos y pulsar sobre "Pestañas personalizadas". Vamos a verlo en el siguiente apartado.
Crear una nueva pestaña personalizada
Una vez entremos en el producto que nos interese, debemos bajar hasta la sección "Datos del producto". Aquí encontraremos la opción de menú "Pestañas personalizadas". Si la pulsamos veremos que tenemos dos posibilidades: "Añadir una pestaña" y "Añadir una pestaña guardada".
Opción "Pestañas personalizadas"
Como supondréis, para crear la nueva pestaña debemos pulsar sobre el primero de estos botones. Al hacerlo, nos aparecerán varios campos y opciones.
- Título de la pestaña: En este campo podemos introducir el título de esta pestaña en concreto.
- Editor: Aquí irá la descripción, información o datos específicos que queramos que aparezcan al seleccionar esta pestaña.
- Move tab order: Si tenemos más de una pestaña y queremos cambiar el orden de las mismas, podremos hacerlo con este selector.
- Quitar pestaña: Desde esta opción podremos eliminar la pestaña que tengamos abierta.
Pues bien, ahora que hemos visto las opciones, vamos a añadir la primera. En este caso simplemente rellenaremos el título y escribiríamos el contenido en el editor, después sólo quedaría guardar los cambios haciendo clic en "Save Tabs".
Añadir pestaña personalizada a un producto concreto
Con esto ya quedarán registrados los cambios. Ahora vamos a abrir la página del producto para ver cómo la visualizaría un cliente que entrara en nuestra tienda. Tened en cuenta que el estilo y el diseño dependerá del tema que tengamos activado en WordPress, por lo que puede variar.
Vista de la página del producto con la nueva pestaña
¿Veis qué fácil? Bueno, pues si quisiéramos añadir varias pestañas a este mismo producto, el proceso sería el similar. Simplemente tendríamos que pulsar sobre "Añadir una pestaña", rellenar los campos, y guardar los cambios para que el producto se actualice.
Usar la misma pestaña en varios productos
Hasta aquí la opción que hemos visto es totalmente funcional y práctica. Pero este plugin también nos ofrece otra opción interesante, sobre todo si queremos usar una misma pestaña en varios productos sin tener que crearla una y otra vez.
En tal caso lo que tendremos que hacer será crear la pestaña desde otro apartado. En concreto debemos dirigirnos al escritorio de WordPress, "Pestañas de productos personalizadas/Pestañas de productos personalizadas". Aquí encontraremos una página desde la cual podremos guardar las pestañas que queramos para usarlas una y otra vez en nuestros productos.
Para crear una, simplemente tendremos que hacer clic en "Añadir pestaña" y rellenar los campos que aparecen en ella:
Guardar nuevas pestanas con custom product tabs for WooCommerce
- Título de la pestaña: Como su nombre indica, se trata del título de la pestaña.
- Nombre de pestaña: El identificador que nos servirá para localizarla cuando vayamos a agregar esta pestaña a un producto concreto.
- Contenido de la pestaña: Aquí introduciremos la información que queramos que aparezca.
Una vez introduzcamos todos los datos, guardamos los cambios. Para este ejemplo hemos añadido dos pestañas para que veáis cómo podríamos elegirlas en las opciones del producto.
Listado de pestañas guardadas para usar en cualquier producto
Ahora toca añadir la pestaña que queramos a un producto concreto. Así que tendremos que acceder a él en modo edición, ir a la opción "Pestañas personalizadas" y pulsar sobre "Añadir nueva pestaña guardada". Esto nos permitirá elegir entre las pestañas que acabamos de crear. Simplemente tendremos que pulsar sobre el signo "+" y se añadirá al producto en cuestión.
Elegir entre las pestañas guardadas disponibles
Después guardaremos los cambios, y listo. Esto nos permitirá usar una misma pestaña a modo de plantilla ya que una vez la agregamos, podemos modificar su contenido desde el editor.
Resumen y conclusión
Si lo necesitamos, podemos añadir pestañas personalizadas a los productos de WooCommerce usando plugins. En este caso hemos visto uno concreto que se llama "Custom Product Tabs para WooCommerce".
Para agregar una nueva pestaña, tenemos que abrir el producto en modo edición, entrar en la opción "Pestañas personalizadas" y añadir una nueva pestaña. Este plugin también nos permite reusar pestañas que hayamos creado previamente, para ello debemos añadirlas desde el apartado "Pestañas de productos personalizadas/Pestañas de productos personalizadas".
Y como siempre, ya lo sabéis: si queréis aprender más sobre WooCommerce os recomendamos el curso de WooCommerce básico, el curso de WooCommerce intermedio y el curso de WooCommerce avanzado. Si os suscribís a boluda.com tendréis acceso inmediato a estos cursos y a muchos otros. Hay más de 6749 vídeos disponibles, ¡no os los perdáis! :)