Cómo mostrar variaciones en la página de tienda WooCommerce

Por defecto WooCommerce no permite elegir variaciones en la página de la tienda, solamente en la página del producto, pero con este truco podemos conseguirlo.

Porque siempre hablamos de conseguir ventas en el mínimo posible de clics ¿verdad? Me refiero al supongo que ya famoso funnel (o embudo) de ventas, del que hemos hablado bastante.

Y ¿no sería más rápido que cuando tu cliente tenga delante un producto variable en la página de tienda pudiese seleccionar la variación que quiere y añadirla directamente al carrito?

De este modo el proceso sería:

  • 1er clic: Seleccionar variación
  • 2º clic: Añadir al carrito
  • 3er clic: Ir a la página de finalizar compra
  • 4º clic: Pagar

Total: 4 clics

La otra opción, por defecto, es:

  • 1er clic: Ir a la página del producto
  • 2º clic: Seleccionar la variación
  • 3er clic: Añadir al carrito.
  • 4º clic: Ir a la página de finalizar compra
  • 5º clic: Pagar

Total: 5 clics

Pensarás que no es mucho, pero un clic menos puede ser la diferencia entre perder una venta o cerrarla en muchas ocasiones.

Luego podemos aplicar otras estrategias para seguir reduciendo clics, como enviar directamente al pago tras añadir al carrito o, si algo falla, aplicar una estrategia de recuperación de carritos abandonados.

Pero vamos al lío ¿no?

Cómo permitir elegir variaciones en la página de tienda de WooCommerce

La solución es sencilla, solo pasa por un código que sustituirá el botón habitual de Ver opciones, por el selector completo de variaciones en la página de tienda de tu WooCommerce.

Para ello solo tienes que añadir el siguiente código al archivo functions.php de tu tema hijo, o a tu plugin de personalizaciones, lo que prefieras:

¿Qué hace este código?

En el primer bloque quitamos inicialmente del loop de la página de la tienda el botón de añadir al carrito.

A continuación, en el segundo bloque de código, comprobamos si el producto es variable o no. Si no es variable le “devolvemos” el botón normal de Añadir al carrito, en caso contrario le añadimos un botón simple.

Y  para terminar cargamos las variaciones de los productos variables a excepción de la cantidad, para que no se desmadre y descoloque toda la página de la tienda con tanto selector y desplegable.

El resultado

Lo que buscamos conseguir, para ahorrarnos algún clic de sobra, es pasar de esto:

A un selector de variaciones totalmente funcional en cada producto variable, facilitando la compra en menos clics, tal que así:

Antes de elegir una variación

Tras elegir variaciones

Espero que este truco te ayude a vender más en tu tienda online, que es mi objetivo. Para cualquier duda, besos o abrazos ahí abajo tienes la sección de comentarios.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This