WooCommerce, por defecto, muestra los detalles de cantidad y opciones de agregar al carrito únicamente en la ficha de producto. Sin embargo, en algunos casos, es útil permitir a los clientes ajustar la cantidad y agregar productos al carrito directamente desde la vista de tienda o lista de productos. Este artículo muestra cómo lograrlo mediante un ajuste en el código que permite añadir un campo de cantidad y un botón de compra fuera de la ficha de producto en WooCommerce.
Objetivo del Código
El siguiente fragmento de código agrega un formulario de cantidad y un botón de «Añadir al carrito» directamente en el catálogo de productos, permitiendo a los clientes seleccionar cantidades sin entrar a la página de detalles del producto.
Código para Mostrar Inventario Fuera de la Ficha de Producto
- Agregar el Formulario de Cantidad y Botón de Compra
El siguiente código filtra el botón de agregar al carrito y lo reemplaza por un formulario que incluye el campo de cantidad para productos simples y comprables:
/*inicio: mostrar el inventario fuera de la ficha de producto*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'dcms_add_quantity_field', 10, 2 );
function dcms_add_quantity_field($html, $product) {
if($product&&
$product->is_type('simple')&&
$product->is_purchasable()&&
$product->is_in_stock()&&
!$product->is_sold_individually()){
$html='<form action="'. esc_url($product->add_to_cart_url()).'" class="cart" method="post" enctype="multipart/form-data">';
$html.= woocommerce_quantity_input(array(),$product,false);
$html.='<button type="submit" data-quantity="1" data-product_id="'.$product->get_id().'" class="button alt ajax_add_to_cart add_to_cart_button product_type_simple">'. esc_html($product->add_to_cart_text()).'</button>';
$html.='</form>';
}
return$html;
}
//Agreamos código javascript
add_action( 'init', 'dcms_quantity_change' );
function dcms_quantity_change() {
wc_enqueue_js('
(function( $ ) {
$("form.cart").on("change", "input.qty", function() {
$(this.form).find("[data-quantity]").attr("data-quantity", this.value);
});
})( jQuery );
');
}
/* fin: mostrar inventario fuera de la ficha de producto*/
/*inventario botones tienda*/
.quantity .button.plus{
background-color: orange;
color: white;
}
.quantity .button.minus {
background-color: orange;
color: white;
}
button.button.alt.ajax_add_to_cart.add_to_cart_button.product_type_simple{
background-color: orange;
font-size:.57em;
}
/* formulario en linea con el inventario*/
.woocommerce-variation-add-to-cart, form.cart{
display:inline;
}
¿Cuándo es Útil esta Personalización?
Este tipo de ajuste es útil para tiendas que buscan mejorar la experiencia del usuario al reducir la necesidad de entrar en la ficha de producto para realizar una compra. Además, es una solución eficaz para tiendas que venden productos al por mayor o que requieren selección rápida de cantidades.
Conclusión
Aunque no es la configuración predeterminada, WooCommerce permite personalizar el proceso de compra adaptándose a distintas necesidades. Mostrar el inventario fuera de la ficha de producto es una mejora que puede hacer el flujo de compra más ágil, favoreciendo las conversiones y mejorando la experiencia del cliente.