X
Jhon Marreros Guzmán

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

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

 

Artículos Relacionados

Categorías: Plugins
Etiquetas: mejoraswoocommerce

Ver comentarios (84)

  • 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, 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.

  • 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

  • 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:

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

      Saludos.

  • 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:

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

      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

Deja un comentario