• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Agregar el campo de cantidad en la lista de productos de WooCommerce

Agregar el campo de cantidad en la lista de productos de WooCommerce

Agregar el campo de cantidad en la lista de productos de WooCommerce

[ 2 julio 2020 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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.

campo cantidad producto

 

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:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar la descripción corta del producto en la página de tienda de WooCommerceMostrar la descripción corta del producto en la página de tienda de WooCommerce
  • Anterior y siguiente en la página de producto de WooCommerceAnterior y siguiente en la página de producto de WooCommerce
  • Modificar desplegable de orden de productos en WooCommerceModificar desplegable de orden de productos en WooCommerce
  • Agregar Microdatos en campos de productos en WooCommerceAgregar Microdatos en campos de productos en WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Damian

    29 julio, 2020

    echo "Funciona perfecto!!! :)";

    • Jhon Marreros Guzmán

      30 julio, 2020

      Que bueno 🙂

  2. Mike Bots

    1 agosto, 2020

    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”

    • Jhon Marreros Guzmán

      3 agosto, 2020

      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.

  3. Marcelo

    13 agosto, 2020

    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.

    • Jhon Marreros Guzmán

      15 agosto, 2020

      Hola, si, claro, ambas cosas las puedes corregir por CSS, si aún tienes problemas envía la url de tu sitio para verificar.

  4. Marcelo

    18 agosto, 2020

    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/

    • Jhon Marreros Guzmán

      19 agosto, 2020

      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

      
      body.woocommerce .products div.product form.cart div.quantity{
      	float:none;
      }
      body.woocommerce .products .quantity span, 
      body.woocommerce-page .quantity span{
      	background:grey;
      	padding:2px;
      	border-radius:4px;
      }
      

      Saludos.

  5. Marcelo

    20 agosto, 2020

    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

    • Jhon Marreros Guzmán

      21 agosto, 2020

      Jeje, que bueno que finalmente lo solucionaste :). Saludos.

  6. Carlos

    4 septiembre, 2020

    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.

    • Jhon Marreros Guzmán

      4 septiembre, 2020

      Hola, de acuerdo a la estructura de tu sitio, prueba con el siguiente código CSS:

      li form.cart .quantity{
        float: none;
        width: 100px;
        margin: auto;
      }
      

      Saludos.

  7. Carlos

    5 septiembre, 2020

    Gracias Jhon, funciona de maravilla

  8. Luis Mendoza

    8 septiembre, 2020

    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/

    • Jhon Marreros Guzmán

      8 septiembre, 2020

      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:

      $('.product-detail-wrapper').find("[data-quantity]").attr("data-quantity", this.value);
      

      Saludos.

      • Luis Mendoza

        9 septiembre, 2020

        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!

        • Jhon Marreros Guzmán

          9 septiembre, 2020

          Hola, tienes errores de sintaxis, debes usar comilla simple o comilla doble, prueba con:

          $(".product-detail-wrapper")
          
  9. Luis Mendoza

    10 septiembre, 2020

    Hola Jhon! ese era el problema, muchas gracias! muy buen aporte!

    Saludos!

  10. Alejandro

    20 septiembre, 2020

    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?

    • Alejandro

      22 septiembre, 2020

      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

      • Jhon Marreros Guzmán

        22 septiembre, 2020

        Hola, que bien que lo solucionaste. Saludos.

  11. Sergio

    1 octubre, 2020

    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.

    • Jhon Marreros Guzmán

      2 octubre, 2020

      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.

  12. Xavier

    14 octubre, 2020

    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

    • Jhon Marreros Guzmán

      14 octubre, 2020

      Hola, revisa el siguiente artículo de referencia en donde uso ACF: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/

  13. Luis Mendoza

    11 noviembre, 2020

    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!

  14. SebastianRuda

    11 diciembre, 2020

    A mi no me quiere funcionar, no modifica la pagina

  15. Lucas

    21 diciembre, 2020

    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

    • Jhon Marreros Guzmán

      22 diciembre, 2020

      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.

      .products form.cart {
        display: flex;
      }
      .products form.cart button{
        padding: 1px 5px!important;
        font-size: 12px!important;
        margin:0!important;
      }
      

      Saludos.

      • Lucas

        11 enero, 2021

        MUCHAS GRACIAS!!! Funcionó!

  16. juan

    5 enero, 2021

    Hola , sabes como inicializar el campo con otro numero por decir que ya no sea 1 si no qu salga 5 po defecto

    • Jhon Marreros Guzmán

      6 enero, 2021

      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/

  17. Martin

    10 enero, 2021

    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!!!

    • Jhon Marreros Guzmán

      13 enero, 2021

      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.

      • Martin

        30 enero, 2021

        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!

  18. martin grafia

    12 enero, 2021

    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?

    • Jhon Marreros Guzmán

      13 enero, 2021

      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

  19. Monika Rzaca

    12 enero, 2021

    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

    • Jhon Marreros Guzmán

      13 enero, 2021

      Hola, en tu plugin revisa el hook que se usa para agregar la marca y prueba cambiarle la prioridad o usar otro hook

  20. julian

    22 enero, 2021

    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

    • Jhon Marreros Guzmán

      25 enero, 2021

      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.

  21. Iraitz

    24 enero, 2021

    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?

    • Jhon Marreros Guzmán

      25 enero, 2021

      Hola, evaluaré hacer un artículo sobre esto, así como mostrar la categorias y etiquetas.

  22. giovanny

    25 enero, 2021

    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.

    • Jhon Marreros Guzmán

      26 enero, 2021

      Hola, se ve interesante, evaluaré esa funcionalidad para hacer un artículo. Saludos.

  23. LUKA

    21 marzo, 2021

    ¿CÓMO SE PUEDE AGREGAR A UN SITE DE GOOGLE?

  24. Alejandro

    30 marzo, 2021

    Muchas gracias por tu ayuda! Me funcionó perfecto.

  25. Alejandro Perretta

    20 mayo, 2021

    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

    • Jhon Marreros Guzmán

      22 mayo, 2021

      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.

  26. Jeremias Zampagnoli

    5 julio, 2021

    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.

    • Jhon Marreros Guzmán

      6 julio, 2021

      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.

  27. gustavo satanovsky

    11 julio, 2021

    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

  28. Jesús Lorenzo

    12 julio, 2021

    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.

    • Jhon Marreros Guzmán

      16 julio, 2021

      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.

  29. JUAN DIAZ

    13 julio, 2021

    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!

    • Jhon Marreros Guzmán

      16 julio, 2021

      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

  30. Marcos

    24 agosto, 2021

    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

    • Jhon Marreros Guzmán

      24 agosto, 2021

      Hola Marcos
      Puedes probar agregando el siguiente código CSS, ya que los botones tienen un margen-top pero la cantidad no

      .product-small .quantity input[type="number"]{
        margin-top: 1em;
      }
      

      Saludos.

      • Marcos

        24 agosto, 2021

        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.

  31. Lluís

    7 octubre, 2021

    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

    • Jhon Marreros Guzmán

      11 octubre, 2021

      Hola, posiblemente tengas que corregirlo con código adicional CSS.

  32. Sergio

    3 diciembre, 2021

    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.

    • Jhon Marreros Guzmán

      6 diciembre, 2021

      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.

      • Sergio

        7 diciembre, 2021

        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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Aprende a usar Taxonomías en WordPress

Fijar Widget lateral en WordPress sin plugins

Cómo usar Roles y Capacidades en WordPress

Empaquetar WordPress con install.php

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2022 Todos los derechos reservados