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:

/** Variaciones de producto en portada de la tienda **/
/**
 * Sustituimos el botón de añadir al carrito en el loop.
 */
function ayudawp_change_loop_add_to_cart() {
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
	add_action( 'woocommerce_after_shop_loop_item', 'ayudawp_template_loop_add_to_cart', 10 );
}

add_action( 'init', 'ayudawp_change_loop_add_to_cart', 10 );

/**
 * Usamos el botón sencillo de añadir al carrito solo en los productos variables, sino dejamos el botón por defecto.
 */
function ayudawp_template_loop_add_to_cart() {
	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', 'ayudawp_loop_variation_add_to_cart_button', 20 );

	woocommerce_template_single_add_to_cart();
}

/**
 * Personalizamos la variable del botón de añadir al carrito en el loop.
 *
 * Quitamos el selector de cantidad qty para simplificar, sino se nos desmadra la página de tienda con múltiples desplegables. Nos vale con que compre uno.
 */
function ayudawp_loop_variation_add_to_cart_button() {
	global $product;

	?>
	<div class="woocommerce-variation-add-to-cart variations_button">
		<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
		<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="variation_id" class="variation_id" value="0" />
	</div>
	<?php
}

¿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 Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(11 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

11 comentarios en “Cómo mostrar variaciones en la página de tienda WooCommerce”

  1. Jesús Agustín

    Hola Fernando:

    He aplicado el código y funciona. Gracias por la aportación. Pero tiene un efecto secundario: afecta negativamente al plugin YITH Woocommerce Request A Quote que da un mensaje de error al intentar añadir un producto variable a la lista de solicitud de presupuesto. El plugin funciona correctamente en productos simples.

    Saludos

  2. Jesús Agustín

    Fernando, he olvidado preguntarte si existe alguna modificación del código que permita que el plugin YITH Woocommerce Request A Quote funcione con los productos variables.
    Saludos

      1. Jesús Agustín

        El plugin funciona con productos variables en las dos versiones (gratis y premium), efectivamente, pero sin el código que indicas en tu artículo para mostrar las variaciones en la propia tienda y facilitar la compra con menos clic. Cuando se añade el código al tema hijo el plugin da un mensaje de error.

  3. Buenas noches, funciona perfecto excepto que no me quita el botón de seleccionar opciones.
    Sabes como solucionarlo?

    Gracias!

  4. Pues a mi me sale todo descentrado, en una pantalla grande me salia bien pero en el portátil mal. me añade correctamente los productos a la cesta pero me añade productos cuando no hay existencias, es decir, tengo de existencia 1 y puedo añadir 10 al carrito y no me dice nada…. Era una buena propuesta

  5. rectifico con lo del inventario, he vuelto hacer una prueba y si no quedan casi y das mas de lo que hay te avisa.
    estaria genial saber como poder adaptar los atributos en la tienda ya que me ocupa parte del otro producto

  6. Buenas Tardes Fernando, gracias por el post me ha servido de mucho pero tengo una pregunta. Cuando añado el código me deja seleccionar las variaciones en la página de tienda pero al darle al boton me salta al producto y yo quiero quedarme en la página de tienda. ¿es possible?. gracias

  7. Hola Fernando, comentas que «Y para terminar cargamos las variaciones de los productos variables a excepción de la cantidad» pero a mi me interesa mostrar la cantidad. He sustituido hidden por display en esta línea de código y no se muestra. « Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido