A frequent question we receive from WooCommerce store owners is “how do I add a quantity field on the shop page for WooCommerce”?
In this article, we are going to show you the step-by-step process (and give you the code snippet) on how to easily accomplish this task.
Now you’ll be able to give your shoppers an easy way to add multiple items of the same product right on the shop page of your eCommerce store.
Table of Contents
Install & activate the Code Snippets WordPress Plugin

The Code Snippets WordPress plugin is a super simple way to run code on your WordPress website.
With this plugin, you will no longer need to add custom code to your theme’s functions.php file, which makes it way easier to add functionality to your website.
What is a code snippet?
A code snippet is a small chunk of code that you can use to add functionality to your WordPress website. The Code Snippets plugin gives you an easy-to-use interface to add different snippets, run them on your website, and manage them easily.
Create a new code snippet called “Add Quantity Field On Shop Page for WooCommerce”
Once you have the Code Snippets WordPress plugin installed and activated, open the plugin from the left-side menu, and add a new snippet.

Once you have the new code snippet created, we are going to add our desired PHP function (PHP is the coding language used to build WordPress).
Copy & paste this PHP code into the snippet
Copy this code to your computer’s clipboard and paste it into your snippet.
/**
* Add Quantity Field On Shop Page for WooCommerce.
*/
function custom_quantity_field_archive() {
$product = wc_get_product( get_the_ID() );
if ( ! $product->is_sold_individually() && 'variable' != $product->product_type && $product->is_purchasable() ) {
woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
}
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 15, 9 );
function custom_add_to_cart_quantity_handler() {
wc_enqueue_js( '
jQuery( "body" ).on( "click", ".quantity input", function() {
return false;
});
jQuery( "body" ).on( "change input", ".quantity .qty", function() {
var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
// For AJAX add-to-cart actions
add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
// For non-AJAX add-to-cart actions
add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
});
' );
}
add_action( 'init', 'custom_add_to_cart_quantity_handler' );

Save & activate the snippet, then test
You should be all set now!
Now that you have the code function running on your website, your store page should have the quantity picker next to the add to cart buttons!

If you have any questions and/or comments, please leave a comment below.
Additionally, if you don’t have the time or resources to build, manage, and grow your website, learn about Chairlift’s outsourced web design & development services. We help businesses grow better and faster online with a simple membership.
Hi!
I used the snippet code and succeeded in add the quantity button, but now the “add to cart” button has disappeared. Would you know why that is? Thanks in advance.
Best,
Kulwinder
Hey Kulwinder,
Can you please send me a link to your website’s shop page? I can try to take a look into what’s happening for you!
Best,
Greg
The code works perfectly!
Thank you very much for sharing!
Hey Rosa,
I’m glad it worked! Let us know if there are any other topics that you would like a write up on 🙂
Best,
Greg
Is there a way to make it so that they quantity button stays to the left of the cart button. Mine shows below, or is hidden on some of the items.
Hey Matt,
It’s possible with some CSS yes. I can’t see the buttons on your website since I have to log in. Is there another way I can test to see if I can share some CSS for you to add to your website?
I’ve deactivated it for now. I’m running flatsome and when I add the snippet, it shows below the add to cart button and to the left. I would like it to be just above the add to cart button and aligned as center. What css code can I add to do this?
Hi Riaan,
Can you please email me at [email protected]?
You’ll have to activate the snippet so I can try some CSS for you.
Do you have a staging website that you can activate it on?
Hello @Gregory, I have the same problem (I’m using Flatsome theme). How to solve this problem?
Thanks for your help!
Hey Luke – What’s your website? I can try to send you a CSS snippet to use!
This one works really nice thanks!
Is there anyway to add and remove products to cart automatically to cart when qty changes?
I want to remode add to cart button and just use +/-
You should be able to do that with JQuery functionality, yes!
I don’t have the script for that, but I would imagine you can do it with an “onclick” function for the + or – buttons that looks up the product ID and runs an AJAX call to add or decrement product quantities in cart!
IT’s work but position in bottom i want to count button with in add button , and when click add card then it’s go checkout page i don’t want this ,how to solve
You may have to change your WooCommerce settings…
1. Go to: WooCommerce > Settings > Products > General
2. Uncheck “Redirect to the cart page after successful addition”
Let me know if that works!
Hello, thanks for sharing this code it does work perfect but I have the same case than the user before.
I’m running flatsome and when I add the snippet, it shows below the add to cart button and to the left. I would like it to be just above the add to cart button and aligned as center. What css code can I add to do this?
thanks you
Hi Juan Pablo,
Can you please share your URL with me so I can take a look and see what modifications I can help you with?
Thanks,
Greg
Thanks Gregroy works great!
Any idea how this could be done with ‘variable’ products?
I think it’s a lot more tricky with variable products as the shopper would need to first select their variable, and then select quantity + add to cart.
I haven’t built anything for variable products, and I’m not sure what’s out there on the internet…
After first clicking ‘add to cart’, button ‘add to card’ becomes simple link to card page, without att ‘?add-to-cart’. Whats wrong?
Hey Andrey,
can you please send us a link to your website so we can take a look and try to help?
https://XN–64-JLCQN8I.XN–P1AI/
Can you try using the TwentyTwenty theme to see if the functionality works?
It might be a conflict with your current theme!
thx! your’re right! My theme hide button (css) “add to cart” after adding and show button “go to cart” instead
hi!. work only once. after click add to card, link becomes to cart page. what wrong?
Is there a way to have quantity show next to add to cart right now it is underneath the add to cart button.
Hey George,
I would imagine it’s because your CSS is making it go beneath the cart button. Can you please link your website in a comment here?
Is there a way to make this show above the add to cart and add quantity text to it
I would like to know the same. How can you put the quantity above the add to cart button?
Hey B. Wolters,
Can you please link your website here? I can take a look and maybe suggest CSS that you can to your website!
Hi Mr.Karelitz,
I have added the php code as mentioned above, however, the quantity button is still not up on my website, please help me.
Hey Narayan,
Can you please tell me which theme you’re using?
Best,
Greg
Hello!
I used this code, but it appears it is only adding 1 product all the time, not looking at how many i have added to my field. For an example I add 4 but only 1 gets added.
Whats the reason behind this?
Hi Daniel – please email us! Hope we can help.
Hello! Seems like it doesnt work when I try to add something more than 1, it’s stuck on it. Can you help me?
Hi Daniel!
Yes, do you mind emailing us — my email is [email protected].
Best,
Greg
@Gregory, I sent you an email. Thanks for the help!
Thanks for the code. This actually worked great, until one day I needed to enter troubleshooting mode and WordPress threw an error related to this snippet: Call to undefined function wc_enqueue_js()
For what it’s worth, I added this directly to functions.php and not within the code snippet plugin.
Hi, works great!
I’m using flatsome theme and changed ‘woocommerce_after_shop_loop_item ‘ to ‘woocommerce_after_shop_loop_item_title’ to add it above the add to cart button.