Mostrar las variaciones en la lista de productos de WooCommerce

En artículos anteriores habíamos visto como mostrar la caja de cantidad en la lista de productos de WooCommerce, sin embargo en este artículo veremos como mostrar los selectores de variaciones en la lista de productos de WooCommerce.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

 

Código para mostrar las variaciones de productos

El siguiente código mostrará las variaciones de producto en las páginas de tienda, categorías o cualquier otra en donde se listen varios productos.

<?php // No agregar este línea

// Cambiamos la asignación del Hook woocommerce_after_shop_loop_item a otra función personalizada
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
add_action('woocommerce_after_shop_loop_item', 'dcms_change_template_loop_add_to_cart', 10);
function dcms_change_template_loop_add_to_cart() {
    global $product;

    // Si no es un producto variable ejecutamos nuevamente la función del hook original
    if ( ! $product->is_type('variable')) {
        woocommerce_template_loop_add_to_cart();
        return;
    }

    // Quitamos la caja de cantidad
    remove_action('woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20);
    // Agregamos el botón de añadir al carrito usando el hook que hace referencia a una función personalizada
    add_action('woocommerce_single_variation', 'dcms_add_loop_variation_add_to_cart_button', 20);
    // Mostramos el formulario de variaciones y el encolado de los scripts necesarios
    woocommerce_template_single_add_to_cart();
}


function dcms_add_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
}

Puedes agregar el código anterior en el archivo functions.php de tu tema hijo

En el código anterior:

• Removemos del Hook woocommerce_after_shop_loop_item la función por defecto woocommerce_template_loop_add_to_cart.
• Agregamos al hook woocommerce_after_shop_loop_item una función personalizada dcms_change_template_loop_add_to_cart.
• Dentro de esa función personalizada llamamos nuevamente a la función por defecto woocommerce_template_loop_add_to_cart si es que el producto no es un producto variable.
• Si es un producto variable la idea es entonces mostrar los elementos que se muestran en la pantalla de detalle de producto, esto a través de la funcíon woocommerce_template_single_add_to_cart().
• Sin embargo esta función woocommerce_template_single_add_to_cart() nos mostrará la caja de cantidad, y además no nos muestra el botón de añadir al carrito.
• Es por eso que usamos el Hook woocommerce_single_variation, el primero remueve la función que muestra la caja de cantidad, el segundo hace referencia a una función personalizada que construye el botón de añadir al carrito.

 

Conclusión

Como has podido comprobar puedes añadir las variaciones a la lista de productos, que usualmente se muestran en la página de tienda o categorías, y que le sea más fácil a tus usuarios realizar la compra sin necesidad de ingresar a la página de detalle de producto.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:

Suscríbete a DecodeCMS:  

 

La entrada Mostrar las variaciones en la lista de productos de WooCommerce es un artículo reciente del sitio DecodeCMS.