En una tienda online es muy importante tener las fichas de producto muy optimizadas, ya que es lo que el visitante está viendo mientras decide si realiza o no la compra.
Ya vimos en un vídeo cómo mejorar las imágenes de producto en WooCommerce, y hoy vamos a realizar otra mejora en la ficha de producto: el selector de variaciones.
Editado: Como he recibido algunas consultas con incidencias a la hora de configurar correctamente el plugin, he realizado un vídeo paso a paso con todo el proceso. Lo tienes al final de la entrada.
Tabla de contenidos
El selector de variaciones en los productos variables
En los productos variables el usuario puede seleccionar una variación u otra mediante un menú desplegable… bastante feo y poco usable:
Selector de variaciones en un producto variable
Como ves, este menú permite elegir una u otra variación y la imagen del producto se actualiza. También cambia el producto activo, y en cada momento el botón Añadir al carrito permitirá comprar la variedad seleccionada.
Sin embargo, en primer lugar, no permite al usuario ver las variaciones disponibles hasta que no ha desplegado el menú. Además, para cambiar de una a otra, tendrá que volver a desplegarlo cada vez. Demasiado trabajo para alguien que está pensando si comprar o no…
Dos formas de crear variaciones
Ya explicaba en este artículo cómo crear un producto variable paso a paso. En él puedes ver cómo las variaciones se pueden añadir en la misma pantalla de edición del producto.
Pero si las variaciones son comunes en muchos productos de la tienda es una forma poco eficiente. Por ejemplo, si la tienda es una zapatería la mayoría de los artículos tendrán como variaciones las tallas de los zapatos, o si es una tienda de ropa muchas prendas variarán en talla (S, M , L) y/o en color.
Cuando sucede esto es más eficiente añadir las variaciones en el menú Productos > Atributos. Ahí podemos añadir atributos que estarán disponibles a partir de ese momento para cualquier producto que creemos o editemos en la tienda.
Una vez creado el atributo, la rueda dentada que aparece a la derecha (como puedes ver en la imagen superior) permite acceder a la pantalla que te permitirá añadir las variaciones:
A partir de ahora estas variaciones estarán disponibles para cualquier producto variable que crees en la tienda. De esta forma a cada uno de los productos puedes añadirle algunas (o todas, o ninguna) de las variaciones creadas con un sólo click, sin tener que ir creándolas en cada uno de ellos.
Cambiar el selector de variaciones
Como decía más arriba, el selector que pone WooCommerce para eso es un menú desplegable bastante feo y poco usable: para cambiar la selección el usuario tiene que desplegar el menú y buscar la variación deseada. Dos pasos son demasiados, ya sabes que siempre hay que minimizar las acciones que tiene que hacer un usuario para realizar una compra.
Aquí es donde entra en juego el plugin WooCommerce Variation Swatches and Photos. Este plugin permite cambiar ese selector de variaciones por otro como éste:
Vaya diferencia, ¿verdad? De esta forma el usuario puede ver de un sólo vistazo todas las variedades disponibles (sin necesidad de desplegar el menú) y puede seleccionar una u otra simplemente pinchando en el cuadro correspondiente. De un sólo click.
Vamos a ver cómo podemos conseguir esto.
Selector de color
Es bastante sencillo conseguirlo. Al activar el plugin se añade una nueva opción en la pantalla en la que se añaden las variaciones a los atributos generales, en Productos > Atributos > Configurar términos (la rueda dentada al lado de cada atributo).
Se trata de un desplegable que te permitirá elegir el tipo de selector (Swatch Type). Aunque en realidad sólo tiene dos opciones: Ninguno (None) o Color.
Al elegir color se abre un selector de colores. Si pinchas en él podrás elegir el color en el cuadro de degradado, poniendo directamente el código hexadecimal (HTML) del color o bien eligiendo uno de los ocho colores básicos. Muy sencillo.
El color que elijas se mostrará entonces como miniatura (Thumbnail) del atributo, y es la que se mostrará en el selector en la pantalla de producto en la tienda. Como ves, más sencillo no puede ser.
Selector de talla
Como hemos visto más arriba, este plugin admite dos tipos de selector: color y «ninguno». Y es que efectivamente en el resto de atributos que no sean color lo que mostrará será una pequeña caja de texto:
Como ves sigue manteniendo el buen aspecto y las ventajas del selector de color, con la ventaja adicional de que este modo de selector vale para cualquier atributo que quieras poner.
Productos variables con más de un atributo
Ya rizando el rizo, tenemos los productos variables con más de un atributo. En este caso seleccionar las variaciones según viene por defecto en WooCommerce puede ser un auténtico martirio para los clientes, puesto que ahora cuentan con múltiples menús desplegables. Una auténtica aberración:
Sin embargo con este plugin la ficha de producto se transforma, como por arte de magia, en esto otro:
Como ves, mucho más intuitivo y visual. Justo lo que hace falta para mejorar el proceso de venta y, por tanto, aumentar conversiones.
Vídeo
Como decía al principio, he recibido diversas consultas acerca de este tema, así que he preparado un vídeo en el que puedes ver el proceso completo, para que puedas seguirlo a la hora de implementar esta mejora en tu tienda WooCommerce:
Conclusiones
Parece que está bastante claro, ¿verdad? El sistema que trae WooCommerce por defecto para seleccionar variaciones deja bastante que desear principalmente por dos motivos:
- El cliente no puede ver al entrar en el producto las variaciones disponibles
- Cambiar de una a otra es engorroso, ya que supone elegir en un menú desplegable
Sin embargo con este plugin, WooCommerce Variation Swatches and Photos, estos dos inconvenientes se esfuman, y el proceso de compra se vuelve mucho más fluido. Que es, precisamente, lo que buscas cuando tienes un comercio electrónico.