¿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 : 
(6 votos, promedio: 5,00 de 5)
(6 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.
Hola jhon, un gran saludo. cree un Campo de texto para escribir en productos WooCommerce siguiendo tu tutorial (https://decodecms.com/campo-de-texto-para-escribir-en-productos-woocommerce/).Lo que quiero hacer es que al agregar un número en esa caja de texto; automáticamente ese numero sume al campo cantidad(pensaba en javascript).Como hago para cambiar el valor del campo cantidad(se llama quantity) ? Intente de esta forma pero no me cambia el valor. document.getElementsByName(‘quantity’)[0].value=nuevo-valor .Pero no cambia. Agradeceria tu ayuda. gracias.
Hola, prueba usando el evento “onkeydown” de javascript, o si quieres usar jquery puedes usar el evente “change”, es decir tu código tiene que estar asociado a un evento de la caja de texto.
Hola Jhon. Si, estoy usando esos eventos en javascript. El problema radica cuando asigno el valor al campo “quantity” por alguna razón cuando presiono “Agregar al carrito” el valor cantidad siempre es “1”. hay algún hook o código especial para poder agregar correctamente el valor a la la variable cantidad ?? sería así: $cart_item_data[‘quantity’]=nuevo-valor. ???.
Aguardo tu respuesta.
Desde ya, muchas gracias.
Hola, amigo excelente video la verdad, estoy buscando hacer algo parecido pero eh intentado de distintas formas y no me sale queria saber si me podrias decir mas o menos como podria lograr esto en los productos
https://drive.google.com/file/d/1ODDhh66J2A2kNQlOg39YBAnl7yT9bW3b/view?usp=sharing
Espero con ancias que me respondas muchas gracias 🙂
Hola Kevin, si te das cuenta estoy usando una función de WooCommerce woocommerce_quantity_input() que te crea la caja de números básica, para hacer lo que comentas posiblemente necesites más código HTML personalizado y CSS. Evaluaré hacer una artículo sobre cómo mejorar la caja de cantidad. Saludos.
Hola Kevin, Te comento que he realizado recientemente un artículo similar a la funcionalidad que buscas, lo puedes ver en: https://decodecms.com/agregar-el-campo-de-cantidad-en-la-lista-de-productos-de-woocommerce/
Saludos.
Buen día, muy bueno el código. El problema que tengo es que estoy usando el buscador FiboSearch en mi tienda y cuando busco un producto de manera ajax me aparecen 2 campos para agregar las cantidades alado del botón de añadir al carrito, ya que lo agrega también por defecto el mismo buscador. Si usted busca mi tienda (version de prueba) y busca un producto sin dar enter ( o sea ajax), va a ver que se pueden agregar desde ahi directamente al carrito pero sale repetido el campo de la cantidad.
Hola, debes tener usuario registrado supongo ya que no me permite ver precios, de todas formas podrías ocular algún control con código CSS.
Hola, funciona perfecto, pero como seria el código para que aplique también en productos de tipo “variable”, intente cambiar los tipos de productos en este código péro no funciono
Hola, para que funcione con productos variables hay que hacer variaciones al código, espero revisar esto próximamente en otro artículo.
Hola Jhon! Antes que nada mil gracias por todo el contenido que compartes, siempre muy útil. En nuestra página puse este código para añadir el botón de cantidades en la pantalla principal de tienda. Funcionó casi perfecto. El problema que tenemos es cuando los productos tienen una cantidad mínima. Por ejemplo se compra de 12 en 12. En la pantalla por defecto pone 12 pero si le das Añadir al carrito sólo agrega 1. Pero si lo forzamos con los botones +- y le doy a Añadir a carrito luego sí sale la cantidad correcta. Es decir que de buenas a primeras no hace caso del número que aparece. Ahora he quitado el código porque la gente tenía problemas al finalizar la compra por no tener correctamente la cantidad mínima. Me gustaría encontrar la solución y poder añadirlo otra vez porque realmente para comprar es mucho más agil. ¿Sabes cuál podría ser el problema? Muchisimas gracias!
Hola Marta, al parecer será necesario hacer modificaciones al código inicializando data-quantity=”1″ con otro valor, posiblemente a través de jquery. Si aún tienes problemas envíame tu consulta a través del formulario de contacto. https://decodecms.com/contacto/
Hola Jhon, buen dia. Te queria agradecer por tu contenido, excelente. y te quiero comentar mi caso. me gustaria saber como puedo añadir el campo de cantidad en productos variables en la pagina de productos, ya que solo me deja con productos simples. De antemano muchas gracias.
Hola Sebastian, el código de momento no lo contempla, evaluaré hacer un artículo sobre esto.
buen dia, seria de gran utilidad, ya que en estos momentos me encuentro en ese dilema.
muchas gracias.
Hola! muchas gracias por la informacion. Tengo un inconveniente a la hora de seleccionar las cantidades, en muchos articulos tengo stock 1 y el selector no tiene limite de stock por ende puedo seleccionar mucha cantidad de productos que luego cuando pasa a la pagina del producto me indica error. Se podra limitar la opcion de cantidad a las cantidades de stock real? ejemplo si hay 2 unidades en stock que solo se puede selecionar 2? aguardo tu respuesta muchisimas gracias!
Hola, esto que comentas es interesante ya que no hay una restricción por defecto para eso. Evaluaré hacer un artículo de cómo mejorarlo. Saludos.
Hola!
muchisimas gracias por esta solucion, me sirvio pero como hago para agregarlo a los botones de solicitud de presupuesto?
Espero tu respuesta, muchas gracias!
Hola, entiendo que usas algún plugin para solicitud de presupuesto, en este caso tendrías que ver como agregar el campo a través de ese plugin o consultar con los desarrolladores del plugin.