Una de las cosas que influyen en la tasa de conversión es el número de clics necesarios para realizar el proceso de compra. Esto no admite discusión: cuantos menos clics y acciones tenga que realizar el usuario para completar una compra, mejor será la tasa de conversión.
Vamos a ver cómo podemos ahorrar al usuario clics innecesarios (como entrar en la ficha de producto) cuando se trata de productos variables mostrando las variaciones de producto en la página de la tienda.
Tabla de contenidos
Variaciones de producto en la tienda
La clave es ahorrar trabajo al usuario. ¿Si ya sabe cuál es su talla, para qué ha de entrar a la ficha de producto a seleccionarla? Si ya ha decidido qué color quiere, ¿por qué obligarle a dar pasos adicionales para seleccionarlo?
Por supuesto, esto no vale para todas las tiendas, y depende mucho del tipo de producto. De hecho tú, como gestor de un ecommerce, sabrás mejor que nadie si implementar este tipo de cosas ayudará a mejorar la experiencia de tus clientes.
La clave en este caso es evitar que el usuario deba entrar en el producto (en cada uno de los productos que quiera comprar) a seleccionar la variación permitiéndole hacerlo desde la propia página de tienda.
Lo que está claro es que en WooCommerce no tienen pensado implementar algo así: ya se propuso como mejora para el core y la idea fue rechazada, así que toca tirar de otras soluciones.
Y, de hecho, podemos hacerlo de varias formas:
- Mostrar el selector de variaciones en el listado de productos de la tienda
- Mostrar una vista previa del producto que incluya el selector de variaciones
- Listar las variaciones en la tienda como si fueran diferentes productos, aún siendo un sólo producto variable
Mostrar el selector de variaciones en la página de la tienda
Dado que WooCommerce ya permite añadir un producto simple al carrito desde la página de la tienda de forma muy fácil, básicamente se trataría de extender esa funcionalidad a los productos variables (en los externos y agrupados esto no tiene sentido por la propia naturaleza de éstos).
Y aquí, de nuevo, hay opciones para todos los gustos: si eres de los que le gusta ensuciarse las manos y toquetear todo lo «toqueteable» puedes hacerlo mediante un código (que te voy a dar); si, por el contrario, eres de los que le gusta la vida fácil y le da miedo que la tienda explote si le tocan «las tripas», tienes disponible un plugin para ello.
Añadir el selector de variaciones por código
El código es bastante sencillo y se basa en:
- Comprobar si el producto que se muestra es variable
- Si no es así, muestra el botón estándar
- Si es variable, introduce un nuevo template para él, añadiendo el/los selector/es de variaciones al botón estándar del producto simple
El código (del cual no soy autor, aunque le he implementado algunas mejoras en la eficiencia) es éste:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', function () {
global $product;
if ( ! $product->is_type( 'variable' ) ) {
woocommerce_template_loop_add_to_cart();
return;
}
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
add_action( 'woocommerce_single_variation', 'ejr_loop_variation_add_to_cart_button', 20 );
woocommerce_template_single_add_to_cart();
}, 10);
function ejr_loop_variation_add_to_cart_button() {
global $product;
?>
El código funciona, aunque el acabado, como podrás comprobar, no es demasiado elegante. Esto se soluciona con un poco de CSS o usando el plugin que pongo a continuación, que ya incluye los estilos para "adecentarlo".
En cuanto al lugar en el que añadir este código, ya he hablado de ello varias veces aquí. Echa un vistazo a estos artículos:
Plugin para añadir un selector de variaciones en la tienda
Por otro lado, tienes también disponible un plugin para esto. La ventaja de hacerlo mediante este plugin es doble:
- No te tienes que calentar la cabeza con código, posibles errores, crear estilos, etcétera; el plugin te lo da todo hecho: lo activas y listo
- Viene ya con el CSS incluido, por lo que el resultado se ve más profesional
Puedes descargar el plugin para añadir el selector de variaciones a la tienda (y a las páginas de categorías y etiquetas) aquí:
En este vídeo puedes ver el plugin en acción:
Desventajas de añadir el selector de variaciones en la tienda
Esto también puede tener algunas consecuencias adversas, que debes valorar antes de implementarlo:
- Sea mediante código o mediante el plugin, la funcionalidad de AJAX al añadir el producto al carrito no funciona, es decir, al añadirlo al carrito el usuario se verá redirigido al producto, mientras que en los productos simples la adición al carrito se realiza de forma "silenciosa", sin recarga de página y sin redirección.
- El usuario puede no hacerse una idea precisa de las variaciones que hay disponibles (al contrario que en la página de producto, aquí la imagen no se actualiza con la de la variación seleccionada), stocks, etc. Depende mucho del tipo de producto si conviene o no hacer algo así.
- El diseño de la página de la tienda puede verse afectado, ya que los productos variables ocuparán una altura mayor que los simples debido a los selectores de variación. Incluso diferentes productos variables tendrán diferentes alturas dentro del diseño en función del número de selectores, es decir, de la cantidad de atributos que tengan.
Mostrar una vista rápida del producto
La segunda alternativa es permitir que el usuario tenga una vista rápida del producto en la propia página de la tienda donde, sin necesidad de ir a la página de producto, pueda:
- Ver la imagen del producto a un buen tamaño
- Ver la descripción corta del producto
- Ver las variaciones que hay disponibles
- Seleccionar la variación deseada y añadir al carrito
Y sí, todo ello sin salir de la página de la tienda. Es desde luego una opción muy interesante en la mayoría de casos.
Hay varios plugins gratuitos en el repositorio para conseguir esto. El que más instalaciones activas tiene es YITH WooCommerce Quick View, aunque a mí me gusta mucho más WooCommerce Quick View. En este vídeo puedes verlos ambos.
Por cierto, que en este caso sigue siendo válido lo dicho en el apartado anterior sobre la funcionalidad de AJAX al añadir al carrito: no funcionará para los productos variables y, de hecho, en este caso deja de funcionar también para productos simples al usar el botón desde dentro de la vista rápida.
Listar las variaciones en la tienda como productos
Hasta ahora hemos visto dos opciones basadas en lo mismo: presentar el selector de variaciones en la página de la tienda, bien dentro del layout habitual de WooCommerce o bien dentro de una vista rápida. Pero hay una opción basada en un concepto totalmente diferente: mostrar cada una de las variaciones en la tienda como si se tratara de productos simples independientes.
Eso es lo que promete hacer el plugin WooCommerce Show Single Variations que (¡ojo!) no puedo recomendar porque no he probado: me limito a informarte de su existencia.
La idea es justamente esa: coger las variaciones de un producto, que en el sistema (y en la página de producto) sigue siendo un producto variable, y mostrarlas como productos simples en la página de la tienda de WooCommerce, permitiendo que el cliente las añada al carrito como con cualquier otro producto simple.
Lo que sí debes tener en cuenta es que, si tienes productos con muchas variaciones, esto puede hacer que el listado de tienda se vea copado durante filas y filas (o incluso páginas) por variaciones de un mismo producto, lo cual puede ocasionar el efecto contrario al que buscamos, obligando al usuario a navegar y empeorando su experiencia.