¿Me ayudas a llegar a más gente?

Hace unos días publiqué un artículo en el que te explicaba cómo personalizar etiquetas y títulos de WooCommerce con ayuda de un plugin muy sencillo. Con esto te demostré lo fácil que es a veces modificar algunos aspectos del diseño de tu tienda online, sin necesidad de tocar el código fuente de tu plantilla.

En esta ocasión y siguiendo en la misma línea, quiero presentarte una forma muy sencilla de añadir pestañas personalizadas en WooCommerce y así darte aún más libertad a la hora de personalizar el aspecto de tu tienda.

Las pestañas a las que me refiero son las que se muestran en la página de información del producto, justo debajo de las fotos del producto.

El poder definir tus propias pestañas te va a resultar muy útil para ordenar mejor toda la información del producto. A menudo me encuentro tiendas online con fichas de producto muy completas, pero en las que toda la información está junta en el texto de la descripción. Al final resulta que tienes una descripción de más de 500 palabras y que a ningún cliente le apetece leer. La idea es separar la información del producto en pestañas diferentes, de manera que el cliente encuentre de un sólo vistazo las características que más le interesen.

Personaliza tu página de productos en WooComerce añadiendo nuevas pestañas.

Normalmente todas las plantillas de WooCommerce ya incluyen por defecto dos pestañas; la de descripción del producto y la de comentarios o valoraciones. En ocasiones se muestra también una tercera pestaña con información adicional del producto, como puede ser: el peso y las dimensiones.

Para que tú también puedas incluir tus pestañas personalizadas y mostrar la información del producto más ordenada, te voy a presentar un plugin gratuito muy interesante que te permite hacer todo esto de forma muy sencilla. El plugin del que hablo se llama Woocommerce Custom Tabs y básicamente lo que hace es añadir a la página de edición del producto, un nuevo apartado con un editor de texto exactamente igual al de la descripción, pero en este caso es para dar un título a tu nueva pestaña e incluir la información que quieres que se muestre en ella. Sin más, paso a explicarte cómo configurarlo.

  1. Una vez tengas instalado y activo el plugin, entra en su panel de administración a través de “Ajustes > WooCommerce Custom Tabs“.
  2. El panel de ajustes es muy simple, sólo tiene seis opciones. Además de las seis opciones, nosotros sólo vamos a configurar tres. El resto sólo funcionan para la versión PRO del plugin. A continuación te muestro qué tienes que hacer con cada una de ellas:
    • En la opción “Hide empty tabs” marca la casilla. Con esto se ocultan las pestañas que estén en blanco y no se estén usando.
    • En el campo “Name of your tab” introduce el nombre que tendrá por defecto la pestaña. No te preocupes porque después puedes personalizar el nombre para cada página de producto. Yo por ejemplo, he introducido “Pestaña adicional” como nombre por defecto. Es MUY importante que no dejes este campo en blanco, de lo contrario después no se mostrará la pestaña.
    • En “Priority of your tab” introduce un valor numérico que indique en qué orden quieres mostrar tu pestaña. Por ejemplo, si pones un valor de “1”, tu pestaña aparecerá la primera, incluso antes que la pestaña de descripción del producto. Si quieres que aparezca al final, entonces usa el valor “40”. Yo en mi caso he usado el valor “20” para que se cargue mi pestaña en segundo lugar.

    Configurar plugin para añaadir pestañas en WooCommerce

  3. Después de guardar la configuración anterior, toca ir a la página de edición del producto donde quieras añadir la nueva pestaña. Verás que justo debajo del apartado “Información del producto” hay un nuevo editor de texto para editar el título y la información de la nueva pestaña de WooCommerce.
  4. En el primer campo introduce el título que quieres dar a tu pestaña. En mi caso, para una tienda de zapatillas, voy a usar el título “Materiales“, ya que en mi nueva pestaña quiero añadir información a cerca de los materiales con los que se ha fabricado la zapatilla. Si dejas este campo en blanco, entonces se mostrará el título por defecto que configuramos en el punto 2.
  5. En el área de texto introduce toda la información que desees mostrar en esa pestaña. Como ves, se trata del mismo editor de WordPress, por lo que puedes dar formato al texto, colores, insertar imágenes, enlaces, etc.
    Crear pestañas personalizadas en WooCommerce
  6. Por último, haz clic en el botón “Actualizar” para guardar la configuración de la nueva pestaña. Hecho eso, ve a la página del producto, vuelve a cargarla y justo al lado de la pestaña “Descripción” deberá mostrarse la nueva pestaña que has creado. En mi caso, se muestra la pestaña “Materiales” que he creado como ejemplo.Añadir pestañas personalizadas en página producto WooCommerce

Si has seguido todos los pasos que te he explicado, habrás observado que la versión gratuita del plugin Woocommerce Custom Tabs sólo permite añadir una nueva pestaña por producto. Si quieres añadir más pestañas personalizadas a la página de producto de WooCommerce, no te queda más remedio que pasar por caja y comprar la versión PRO del plugin. Todo depende de tus necesidades.

Yo creo que con la versión gratuita se pueden hacer muchas cosas, sobre todo porque te permite usar títulos de pestaña diferentes para cada producto, además de disponer de todas las funcionalidades del editor de WordPress para editar el texto informativo de la pestaña. Eso quiere decir que puedes incluso usar shortcodes en la pestaña para por ejemplo: incluir un formulario, un slider, vídeos o lo que se te pase por la cabeza.

Si te ha gustado, por favor ayúdame a difundirlo. ¡Gracias!

Uso de cookies

Este sitio web utiliza cookies para que disfrutes de una mejor experiencia de usuario. Si continúas navegando estarás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, clica en el enlace para mayor información.

ACEPTAR
Aviso de cookies