¿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 : 
(5 votos, promedio: 5,00 de 5)
(5 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/
Hola Jhon,
Me sirvió mucho tu aporte, de nuevo muchas gracias. Quisiera poder regresar a 1 el contador de productos al momento de agregar al carrito, es posible? Gracias por tu tiempo!
Saludos!
A mi no me quiere funcionar, no modifica la pagina
Muchas Gracias Jhon! realmente me sirvio para mi ecommerce.. necesitaría saber como editar la ubicación del selector.. para que quede a un lado del boton de añadir al carrito y no por arriba..
mi web es https://krearmarket.com/productos/
Muchas gracias! Lucas
Hola, prueba con el siguiente código CSS, puedes agregar este código al final del archivo style.css de tu tema hijo, refresca tu navegador para ver los cambios.
Saludos.
MUCHAS GRACIAS!!! Funcionó!
Hola , sabes como inicializar el campo con otro numero por decir que ya no sea 1 si no qu salga 5 po defecto
Hola, la función woocommerce_quantity_input(), tiene un parámetro $args que es un array , le puedes pasar ‘input_value’ => ‘5’, revisa: http://hookr.io/functions/woocommerce_quantity_input/
Hola Jhon me encanto el codigo, lo estoy usando y me funciona perfecto, solo tengo el inconveniente de que los botones de subir y bajar la cantidad aparecen muy pegados al numero, hay forma de espaciarlos? hay alguna forma que el boton sea algo asi? -> |-| |____| |+|?
Gracias!!!
Hola, si, sin embargo eso depende del theme que uses, si tu theme no lo soporta por defecto, tendrías que hacerlo por CSS y posiblemente javascript.
Hola Jhon, uso el tema de Elementor, entiendo que lo soporta. En caso de que lo sepas, me podras comentar como hacerlo? porque no entinedo como modificar el codigo.
gracias!
Hola Jhon, antes que nada gracias por la info funcionó perfecto, como puedo hacer para que en el botón quede el numero entre los signos de suma y resta?
Hola, supongo que te refieres a esto que contesté anteriormente: https://decodecms.com/agregar-el-campo-de-cantidad-en-la-lista-de-productos-de-woocommerce/#comment-7254
Hola Jhon!
Yo tendria otra pregunta para customizar el loop de modulo de tienda. Como añadir la marca antes de nombre del producto, es decir quiero que aparezca:
Marca
Nombre de producto
Descripción corta
Precio
Añadir al carrito
Los demas mas o menos lo tengo organizado, pero la marca es la que no me deja dormir! Solo comentarte que utilizo el Plugin Perfect Brands
Hola, en tu plugin revisa el hook que se usa para agregar la marca y prueba cambiarle la prioridad o usar otro hook
hola en mi caso aunque el codigo se carga perfectamente no funciona en mi pagina por alguna razon que no entiendo no me funciona sigue apareciendo igual me encantaria si me pudieras ayudar. (no se si tenga que ver el hecho de que este revisandolo en modo a pruebas debido a que mi dominio se encuentra en transferencia
Hola, no tiene nada que ver el hecho de que te encuentres en una url temporal.
Prueba aplicando el código en un theme diferente, usa alguno de los themes que vienen por defecto con WordPress.
Hola Jhon,
Lo primero, enhorabuena por tus artículos, son de gran ayuda!
Me sirvió el poner la cantidad en la lista de productos, pero me gustaría poner alguna atributo del producto también, que salieran debajo del precio. Como podría hacerlo?
Hola, evaluaré hacer un artículo sobre esto, así como mostrar la categorias y etiquetas.
Saludos, quería realizar una consulta acerca de modificar la función para añadir cantidades al carrito de compras. Para dar un ejemplo, me refiero a poder añadir productos con solo hacer clic en el símbolo ( + ) o ( – ), y que se vayan añadiendo de manera automática en el carrito.
Un ejemplo es esta web: https://www.farmatodo.com.ve/
Ellos tienen el botón de “añadir al carrito” al dar clic, cambia ese botón, por los botones de ( + ) y ( – ) el cual va modificando de manera automática, las cantidades en el carrito.
Espero que pueda ayudarme! Muchas gracias de antemano, saludos.
Hola, se ve interesante, evaluaré esa funcionalidad para hacer un artículo. Saludos.
¿CÓMO SE PUEDE AGREGAR A UN SITE DE GOOGLE?
Muchas gracias por tu ayuda! Me funcionó perfecto.
Hola, como puedo hacer para modificar la cantidd de articulo que se puede seleccionar de cada producto, solo me figuran 20 , pero si alguien quiere comprar 25 unidades de un mismo producto no lo deja , y no encuentro de donde modificar ese parametro
Hola, debes tener algún plugin adicional o algún código que hayas agregado que controla eso, ya que por defecto no he visto que tenga ese comportamiento en WooCommerce
Sauludos.
Buenas, estoy editando mi tienda con Elementor Pro, y tengo 5 columnas de productos. Cuando agrego el código para añadir el selector de cantidad de productos, se me rompe el diseño que tengo establecido y se me sale el catalogo de productos de la pantalla, es decir, ocupa mas lugar del que debería, no se mucho de css como para solucionarlo. Muchas gracias de antemano.
Hola, efectivamente, es posible que tengas que corregirlo con CSS ya que los constructores te crean contenedores y clases que posiblemente te estén causando conflicto. Lógicamente no puedo darte una respuesta genérica de que código CSS usar, se tendría que inspeccionar tu sitio.
Hola Jhon. Me funciona perfectamente…
Pero cómo puedo hacer cuando la cantidad elegida esta fuera de stock?..
Tendria que salir el aviso “no puedes añadir esa candidad al carrito porque solo quedan X unidades”.
Puede añadirse esa funcionalidad?
gracias
Hola Jhon:
Antes de nada, gracias por compartir tu sabiduría 🙂
Tengo un plugin para compras minimas de producto (por ejemplo 3). Al poner tu código por defecto me pone la cantidad mínima de manera correcta (3), pero al darle a comprar sólo añade una, con lo que sale el aviso de cantidad mínima.
Si cambio el número pulsando sonre las flechas, o escribiendo otro (por ejemplo 4) me añade 4 correctamente.
¿Cómo soluciono esto?
Gracias anticipadas por tu respuesta.
Hola, al ser un plugin adicional el que usas, posiblemente tenga su propia lógica que no se integra con el código, consulta con el soporte de tu plugin a ver si te dan alguna pista. Saludos.
Hola Jhon!
tengo un sitio con el theme de storfront, el cual al agregar tu código de la función de cantidad funciona perfecto, pero lo que me gustaría y lo que me piden es agregar otro estilo de botón al que aparece por defecto por tu código (En este aparecen ↑ y ↓ ) y necesito que estén con los signos más y menos a los costados de la cantidad, como esta en el ejemplo : (+) 5 (-) . Por favor ayúdame a solucionar este botón. Muchas gracias!
Hola, revisa dentro de la carpeta de templates de WooCommerce, busca un archivo global/quantity-input.php, allí esta la construcción de esos controles, posiblemente tengas que usar o reemplazar los hooks woocommerce_before_quantity_input_field y woocommerce_after_quantity_input_field
hola, he incluido este codigo en un theme de wordpress y bueno se descuadro el + y – de la cantidad. intente usar un css para cuadrar pero al parecer estoy obviando algo, cualquier ayuda sera bienvenida jaja. muchas gracias de antemano. el sitio es http://alissons1.sg-host.com/ es un sitio de teste por eso no tiene ssl
Hola Marcos
Puedes probar agregando el siguiente código CSS, ya que los botones tienen un margen-top pero la cantidad no
Saludos.
muchas gracias Jhon, muy bueno el detalle de .product-small,lo habia usado sin el small y modificaba el producto principal, muy agradecido, muchas gracias quedo perfecto.
Hola. En mi caso, funciona perfectamente pero me alinea el boton “Añadir el producto” a la izquierda, no en el centro. El resto de elementos sí está alineado al centro (Nombre del producto, precio y el botón + -. No sé como arreglarlo… Gracias por anticipado
Hola, posiblemente tengas que corregirlo con código adicional CSS.