Product quantity next to the "add to cart" list/grid view like in product page

Hi we want to make more faster buying option to our customers.
I attach 2 sample image, what we want. Please help me, where, and how can we make this option.

So, in product list or grid, (not only in simple product page) we want to make an quantity counter “how many items I want to put in the basket”. The customer set the number, and after click to “add basket. (The deafult number is 1)

If we can do it, the the customer does not need to click on each product separately, then enter the quantity, then add it to the basket.

Attachments:

You must be logged in to view attached files.

Hello,

The default Woocommerce does not provide such an option and our them does not either. A user can add to cart just from the product grid, add all the products he needs and then set the necessary quantity in the shopping cart https://gyazo.com/79ed0f40fa5ee1e5f1ba89749044c49c

If it is not enough you will have to find a plugins or customize Woocommerce

Best Regards

Thanks your fast answer!

We love your theme, and we never want to change your products for another.

But we want to build a new site for our new brand, and we have to this feature.
We found another theme (porto) it has this feature, but we hate this template! 🙁 We would like to buy your theme again, our new project. (Here is the porto solution: https://www.portotheme.com/wordpress/porto/shop14/shop/ )

Could you make this feature to the next update???? (Please! 😀 We love your products!)
Here is a printscreen from it. https://prnt.sc/mfq6xe

Thanks your answer and best regards!

I found a, php code snippet, that i paste to our (woodmart child theme) function.php file.
Now i can see the quantity box, i can change the number, but when i click to add basket, only go to one piece and not how many i set in quantity box.

Example i set 7 pieces, click the add to basket, but i can see only 1 piece in basket. 🙁

OK! 😀

Now i made with this code in function.php but the button css is “lost”.

<?php

add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘quantity_inputs_for_loop_ajax_add_to_cart’, 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( ‘simple’ ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = implode( ‘ ‘, array_filter( array(
‘button’,
‘product_type_’ . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? ‘add_to_cart_button’ : ”,
$product->supports( ‘ajax_add_to_cart’ ) ? ‘ajax_add_to_cart’ : ”,
) ) );

// Adding embeding <form> tag and the quantity field
$html = sprintf( ‘%s%s%s%s’,
‘<form class=”cart”>’,
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : ‘button’ ),
esc_html( $product->add_to_cart_text() ),
‘</form>’
);
}
return $html;
}

add_action( ‘wp_footer’ , ‘archives_quantity_fields_script’ );
function archives_quantity_fields_script(){
if( is_shop() || is_product_category() || is_product_tag() ): ?>
<script type=’text/javascript’>
jQuery(function($){
// Update quantity on ‘a.button’ in ‘data-quantity’ attribute (for ajax)
$(‘form.cart’).on(‘change’, ‘input.qty’, function() {
if ($(this).val() === ‘0’)
$(this).val(‘1’);
$(this).closest(‘form.cart’).find( ‘a.add_to_cart_button’).attr(‘data-quantity’, $(this).val());
});
});
</script>
<?php endif;
}

And this code not working in optional products and Ajax products tabs…. 😀 🙁

Sorry, but additional customization like this is out of our theme support scope. But we will consider implementing such function in our future updates.

Did you ever get this to work ?

If you did, could you please post the code changes.

Thanks

This work but only for simple products:
https://aceplugins.com/how-to-add-a-quantity-field-to-shop-pages-in-woocommerce/

[Author]

Posts