Ya hemos visto en varias ocasiones cómo ir mejorando poco a poco la ficha de producto en WooCommerce, como por ejemplo añadiendo un selector de variaciones en los productos variables o mejorando la forma en que se muestran las imágenes. Hoy vamos a seguir mejorándola aprendiendo a añadir pestañas personalizadas en la ficha de producto de WooCommerce.
Además, vamos a realizar paso a paso un ejemplo práctico añadiendo una pestaña que contenga un formulario de contacto para que, desde la propia ficha, el cliente pueda directamente consultarnos cualquier duda que tenga respecto al producto.
Tabla de contenidos
Añadir pestañas personalizadas en la ficha de producto
Como ya sabes, por defecto WooCommerce incluye dos pestañas en la ficha de producto: la de descripción y la de valoraciones. Sin embargo muchas veces necesitaríamos añadir otras, como una que especifique, por ejemplo, los materiales o las características técnicas del producto (en lugar de mezclarlo con la descripción), los accesorios disponibles, documentación del producto, etc.
En este artículo te voy a enseñar cómo hacerlo con el plugin gratuito WooCommerce Product Tabs, pero lleva bastante tiempo sin actualizarse y no soporta pestañas condicionales (es decir, mostrarlas u ocultarlas en función de ciertas condiciones como el tipo o categoría del producto, el perfil de usuario, etc). Si necesitas algo así, te recomiendo este otro plugin:
Su uso es realmente sencillo pero a la vez muy potente. Una vez instalado y activado te aparecerá en el menú la opción WooCommerce > Product Tabs. En él verás una pantalla similar a la de las entradas o los productos, titulada Tabs, pero con algunas diferencias.
Cada “entrada” (en realidad su nombre correcto es custom post types o CPT (tipos de entrada personalizadas) que añadas aquí será una nueva pestaña en la ficha de producto, y la interfaz es muy similar a la que ya conoces de, como digo, entradas o productos.
Interfaz para añadir pestañas personalizadas a la ficha de producto
Configuración de la pestaña
Los campos principales ya los conoces de sobra: título y contenido. El título que le pongas será el que se muestre como nombre de la pestaña. En cuanto al contenido, si lo dejas vacío la pestaña no se mostrará en la ficha de producto, algo sin duda muy inteligente.
Lo que sí encontramos son algunas opciones nuevas en esta interfaz, específicas de este CPT. Vamos a repasarlas porque nos permitirán configurar todos los aspectos de nuestra pestaña.
Categorías
Bajo la ventana de descripción encontrarás otra titulada Conditions. Lo que puedes elegir en ella son las categorías de productos que mostrarán esta pestaña.
Es decir, puedes crear distintas pestañas para categorías distintas de productos, lo cual es todo un acierto, ya que no todos los tipos de producto necesitan el mismo contenido en la ficha. Estoy seguro de que ya tienes en la cabeza una forma útil de aplicar esta característica en tu propio comercio electrónico en función de las categorías que tienes.
Visibilidad
A la derecha encontramos un widget titulado Tab: Settings, con dos opciones. La primera (Check to display default content in all products) es un cuadro que deberemos marcar si lo que queremos es que, por defecto, la pestaña aparezca en todos los productos de la tienda. Así nos ahorramos de ir seleccionando todas las categorías.
Y, bajo esta opción, encontrarás un selector numérico para elegir la prioridad de la pestaña, que es lo que nos permitirá elegir el orden en que aparecerá la pestaña en la ficha de producto:
- Las pestañas con prioridad 1 a 10 aparecerán antes (es decir, por delante) de la pestaña Descripción
- Si estableces la prioridad entre 11 y 30 la pestaña aparecerá entre las de Descripción y Comentarios
- Las pestañas con prioridad menor (es decir, 31 o más) aparecerán después de esas dos
Por supuesto, esto también te permite disponer las pestañas que tú crees en el orden que quieras, jugando con prioridades. Una pista: no las numeres de forma consecutiva, sino a saltos. Así si alguna vez decides incluir una pestaña entre medias de dos ya existentes podrás utilizar el hueco, en lugar de tener que rehacer todas las numeraciones.
Pestaña personalizada con formulario de contacto
Ya hemos visto de qué pueden añadirse pestañas (todas las que quieras), y como has podido observar es muy sencillo.
Vamos a realizar ahora un caso práctico, muy útil, viendo paso a paso cómo crear una nueva pestaña en la ficha de producto que llamaremos ¿Alguna duda? ¡Consúltanos! y que contenga un formulario de contacto mediante el que el cliente pueda, sin necesidad de salir de la ficha de producto, enviarnos consultas con cualquier duda que pueda tener acerca del producto que está viendo.
Creando el formulario para consulta de dudas
Lo primero es, por supuesto, crear el formulario de contacto. Para ello vamos a usar el plugin gratuito Contact Form 7.
Puede que ya lo tengas incluso instalado y funcionando para tu formulario de contacto, porque es el plugin más extendido para esta funcionalidad.
El siguiente paso es crear el formulario propiamente, así que sólo tenemos que ir a Contacto > Añadir nuevo. Le ponemos al formulario el título que creas más conveniente. En el ejemplo le he puesto Formulario de consultas.
Como puedes ver, al crear un formulario nuevo viene ya con unos campos predefinidos. Podemos eliminar el de “asunto”, puesto que el asunto es una consulta sobre el producto. Enseguida veremos cómo vamos a saber cuál es el producto que el cliente estaba visitando. Por lo tanto dejaremos el formulario más o menos así (he cambiado un poco los textos, los que viene por defecto son muy fríos):
¿Cuál es tu nombre? (requerido)
[text* your-name]
¿A qué email te contestamos? (requerido)
[email* your-email]
¿Cuál es tu duda sobre este producto?
[textarea your-message]
[submit "Enviar"]
Recuerda que, si estás en España, debes hacer algún cambio adicional para adaptar el formulario a la LOPD (la Ley de Protección de Datos) y cumplir la ley. Cómo hacerlo lo explico en este vídeo (básicamente se trata de añadir una casilla de verificación con un enlace a la política de privacidad de tu sitio web).
Aún tenemos que hacer algunos cambios más ya que, cómo digo más arriba, cuando un cliente nos mande una consulta sobre un producto tendremos que saber de qué producto está hablando. Para ello pinchamos en la pestaña que dice “Correo electrónico”.
El campo “De” suelo cambiarlo para que ponga:
[your-name]
Así nuestro gestor de correo electrónico considera que el email ha llegado directamente de la dirección de email que el cliente ha indicado, y si intercambiamos varios emails quedan todos correctamente ordenados. Eso lo reporta Contact Form 7 como un error de validación (ya que el email no viene de ahí realmente, sino de la web), pero con ignorarlo es suficiente. También personalizo un poco el campo “Asunto”.
El cambio importante lo vamos a realizar en el cuerpo del mensaje. Ahí, en la posición que quieras, debes añadir una (o varias) de estas etiquetas:
- [_post_id] Para saber el ID del producto que visitaba el cliente
- [_post_title] Indica el título del producto donde estaba el formulario
- [_post_url] Para recibir la dirección URL donde estaba el formulario
- [_url] La anterior sólo vale si está en una entrada/página/producto (como en el caso de este ejemplo), pero si prefieres ponerlo en un widget de la sidebar tendrás que usar ésta
Como puedes ver así quedará plenamente identificado a qué producto se refiere la consulta. Incluso puedes poner varios (o todos) para después identificar el producto del modo que más te convenga. Por ejemplo, el contenido del “Cuerpo del mensaje” podía quedar más o menos así:
De: [your-name]
Asunto: [your-subject]
Producto: [_post_title]
ID del producto: [_post_id]
URL: [_post_url]
Cuerpo del mensaje:
[your-message]
Y ya está. Guardamos y copiamos el shortcode que nos genera Contact Form 7. Lo encontrarás remarcado en naranja, bajo el nombre del formulario.
Poniendo el formulario en una pestaña personalizada
Pues ya está lo más complicado (y ya has visto qué sencillo es). Ahora sólo falta crear nuestra pestaña y poner el formulario en ella. Para ello vamos a la opción para crear pestañas que hemos visto antes (recuerda, en WooCommerce > Product Tabs) y pulsamos el botón Add New.
Ponemos el título a la nueva pestaña que vamos a crear para nuestra ficha de producto (en mi ejemplo ¿Alguna duda? ¡Consúltanos!), y como contenido ponemos el shortcode que nos ha generado Contact Form 7 para el formulario de contacto.
Recuerda marcar la casilla que hemos visto antes a la derecha si quieres que la pestaña esté disponible para todos los productos de la tienda. Si no, tendrás que indicarle abajo para qué categorías la quieres utilizar.
También hay que establecer la prioridad. En mi caso he puesto 100, ya que quiero que aparezca la última de la derecha, después de Descripción y de Comentarios, y si después quiero añadir otras pestañas podré hacerlo tanto a un lado como a otro. Guardamos y… ¡voilà!
Formulario de consulta en una pestaña personalizada en la ficha de producto
Plugin para añadir una pestaña con formulario de contacto
Ya ves que todo el proceso es un poco engorroso, son necesarios dos plugins y queda todo un poco rígido. La alternativa es utilizar un plugin que te permita hacer eso directamente: crear una pestaña para la ficha de producto con un formulario de contacto, que además se puede personalizar por completo:
Este plugin te permite precisamente eso: con él puedes configurar una pestaña en la ficha de producto (puedes personalizar el título y el contenido que quieras antes del formulario) y te crea un formulario de contacto que cumple con la Ley de Protección de datos.
Además de eso, puedes añadirle los campos personalizados que necesites, crear plantillas para el correo electrónico que recibirá el administrador, crear también un correo electrónico automático para que lo reciba el cliente (para ambos puedes utilizar de forma dinámica cualquiera de los datos introducidos en el formulario)… En una palabra, altamente personalizable.
Conclusión
A partir de ahora los clientes de tu tienda pueden consultar cualquier duda que tengan directamente desde la misma ficha de producto. Lo que ocurra a continuación ya depende de ti. Ya sabrás que una respuesta rápida, eficaz y sincera a las dudas de los clientes aumenta de forma espectacular el ratio de ventas. Y poner el formulario de consulta tan a mano, junto a la ficha de producto, sin duda te ayudará a ello.
Como de costumbre recordarte que cualquier duda o consulta sobre este tema o cualquier otro relacionado con WordPress o WooCommerce me tienes a tu disposición. Y si implementar mejoras así en tu comercio electrónico te quita demasiado tiempo y quieres dedicarlo a aquellas cosas en que eres más productivo, te recuerdo que este tipo de cambios están incluidos en mi servicio de mantenimiento y soporte profesional para WordPress y WooCommerce.