Woocommerce

Mostrar variaciones en la página de tienda WooCommerce

1 hay 1 solo Like :)

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.

/** Variaciones de producto en portada de la tienda **/
/**
 * Sustituimos el botón de añadir al carrito en el loop.
 */
function novaweb_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', 'novaweb_template_loop_add_to_cart', 10 );
}

add_action( 'init', 'novaweb_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 novaweb_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', 'novaweb_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
}