¿Te gustaría seleccionar la cantidad de productos a añadir en el carrito directamente sin ingresar al detalle de producto?, vamos a ver cómo realizar esto de forma simple a través de código.
Resultado Final
Al final obtendremos un campo de cantidad como parte del ítem de producto, tal como se muestra en la siguiente imagen.
Código para agregar el campo de cantidad
El siguiente código puedes agregarlo como parte del archivo functions.php de tu tema hijo, o usando un plugin de Snippets.
//Agregamos código HTML
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 );
');
}
En el código anterior:
- Usamos el hook woocommerce_loop_add_to_cart_link el cual hace referencia a la función dcms_add_quantity_field
- Esta función hace una comprobación para saber si el producto puede mostrar el campo de cantidad.
- Si se cumple la condición se sobreescribirá el parámetro $html.
- En el parámetro $html formaremos el formulario que incluye el campo adicional de cantidad
- Por otro lado, para agregar código javascript lo hacemos usando el hook init que hace referencia a la función dcms_quantity_change
- Agregaremos código javascript para que cada vez que cambie el campo de cantidad cambie el atributo data-quantity
- Para agregar el código javascript usamos la función wc_enqueue_js de WooCommerce
Conclusión
Si tu tema no tiene la opción de mostrar un campo de cantidad en la lista de productos, puedes agregarla de manera simple a través de código y evitar el uso de un plugin adicional.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Suscríbete a DecodeCMS:
Artículos Relacionados
Valora este artículo : 
(3 votos, promedio: 5,00 de 5)
(3 votos, promedio: 5,00 de 5)
Cargando...
echo "Funciona perfecto!!! :)";Que bueno 🙂
Me funciono de 10, con estas modificaciones llevare mi woocommerce a otro nivel, muchas gracias amigo , tengo una consulta estoy usando esta opcion activada «Added to Cart Notification» y en el popup recibo este mensaje «Undefined has been added to your cart» hay alguna forma de cambiar el undefined ? por el nombre de producto o simplemente por la palabra «product»
Hola, eso que comentas es un error de programación, cuando una variable no tiene un valor reporta como undefined, mejor consulta con los desarrolladores del theme o del plugin, en caso que estes usando alguno que te cambia esa funcionalidad. Saludos.
Hola, me funciono. MIL GRACIAS. Horas navengando buscando como agregarlo a mi tienda. Me surge una duda si, al agregarglo a mi theme actual, los números de agregar las cantidades, aparece en el mismo color que la caja, por ende no se ven en la pantalla, es posible editar el color de la caja de las cantidades? ademas el boton se agrega hacia un lado del producto y se ve desordenado… Gracias.
Hola, si, claro, ambas cosas las puedes corregir por CSS, si aún tienes problemas envía la url de tu sitio para verificar.
Hola Jhon
Trate de resolverlo, pero no pude. En los productos, me muestra una caja mal centrada y los botones para cambiar las cantidades (+) y (-) no me aparecen, te envio en enlace. Gracias http://34.68.184.2/shop/
Hola, es porque hay conflictos de estilos, por ejemplo los botones de + y – tiene un fondo blanco con tu theme, prueba agregando el siguiente código CSS
Saludos.
Jhon, creo que podría besarte. Nos sabes todo lo que me costo llegar a esto, FUNCIONO, mil gracias por tu ayuda.
Muy buena pagina y punto de información.
Gracias
Jeje, que bueno que finalmente lo solucionaste :). Saludos.
De verdad te agradezco por compartir tus conocimientos en estos tiempos es digno de admirar, gracias a ti he logrado montar un pagina desde cero, sin conocimientos previos, este tutorial esta genial, lo he logrado implementar en mi tienda, solo tengo un pequeño problema, sale alineado a la izquierda, como hago para que en el catálogo salga centrado.
Desde ya te quedo muy agradecido.
Hola, de acuerdo a la estructura de tu sitio, prueba con el siguiente código CSS:
Saludos.
Gracias Jhon, funciona de maravilla
Hola Jhon, gracias por tu aporte! pude agregar los botones pero al momento de modificar la cantidad no cambia en el código y solo se agrega un producto. Por favor requiero de tu sabiduría, gracias por tu tiempo. Saludos!
LINK: https://bluestore.pe/
Hola, veo que por alguna extraña razón, tu theme no sigue el estandard de la estructura para el producto, el botón debería ser parte del form, en tu caso no lo es y esta fuera.
Podrías probar cambiando el codigo javascript, en el código que envié, cambiarías $(this.form) por $(‘.product-detail-wrapper’), es decir el código quedaría:
Saludos.
Hola Jhon! una vez mas gracias por tu tiempo, intente lo que me comentas pero el problema persiste. 🙁
http://bluestore.pe/
este es mi archivo functions.php
http://bluestore.pe/wp-content/themes/veggies/functions.php.zip
Saludos!
Hola, tienes errores de sintaxis, debes usar comilla simple o comilla doble, prueba con:
Hola Jhon! ese era el problema, muchas gracias! muy buen aporte!
Saludos!
Hola Jhon, excelente aporte, me ha servido mucho en el proyecto que estoy armando, pero me ha generado un problema, que me agrega el campo en el buscador ajax que tengo por un lado, y después tengo un modulo en el index de productos destacados al que me hizo desaparecer el botón de «Agregar», ese botón aparece solo si le pongo al producto que venda máximo una unidad. Como podría solucionarlo?
Jhon, ya lo pude resolver, termine sacando el codigo y poniendo un plugin…en el carrito fly me aparece doble el qty pero saco uno con display:none y ya me queda personalizarlo con css. Gracias iagual
Hola, que bien que lo solucionaste. Saludos.
Hola, me funciono de 10 el codigo, mil gracias! Pero no me aparece el campo cantidad en los productos variables, me gustaria que también aparecieran ahi ya que le agregué el campo de variación de producto también.
Gracias de antemano, saludos.
Hola, en el código uso la función woocommerce_quantity_input() de WooCommerce, en el caso que planteas tienes que agregar más código, revisa por ejemplo: https://gist.github.com/lukecav/2470d9fe6337e13da4faae2f6d5fe15f , evaluaré hacer un artículo sobre esto. Saludos.
Hola Jhon,
Te felicito por las fantásticas aportaciones que nos facilitas mediante tu blog.
Podrías explicar cómo añadir un ACF en lugar de el campo cantidad?
Gracias anticipadas!
Xavier
Hola, revisa el siguiente artículo de referencia en donde uso ACF: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/