Add A Quantity Field to the WooCommerce Archive Pages

If you’re familiar with WooCommerce, you will know that by default the archive (category) pages do not include a quantity input field by default. The theme you’re using could include it, but not many do. For some web shops it doesn’t make sense to add a quantity field to the overview pages, while for others it definitely does.

In the case of selling small items, let’s just say simple pens, it can make sense to include a quantity field to let the customer easily choose how many pens they want to order, without going to the details page.

Adding a quantity field

As there is no default way in WooCommerce to add the quantity field to the archive page, we’ve created a code snippet that you can use and it will work instantly.

In this code snippet we account for a couple of things:

  • It works with both the AJAX add to cart and the normal add to cart buttons
  • It only shows to simple products, variable products cannot be added to the cart directly
  • The quantity field has a maximum quantity that is relative to the maximum order amount
  • The quantity field will only show if a product can actually be purchased (for example, no price means not purchasable).
  • When a product is only sold individually, it will not show the quantity field

If you want to use or just test out the code snippet, you can copy the following to your (child) theme’s functions.php file.

When you’ve added the code snippet, you should see the change immediately (if you’re using some sort of caching plugin you may need to purge the cache).

The result should look something like this:


Add the quantity field on the right side

If you want to add the quantity field on the right side of the ‘Add to cart’ button, you can search and replace this line:

add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 0, 9 );


add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 15, 9 );

This will change the 0 to 15 which is a change in priority and makes sure the quantity field is added after the button itself. Now the page will look like this:


Quantity field not aligned

The quantity field may not be fully aligned with the Add to cart button. In that case, you can add the following CSS to your site (there are various ways for this; a lot of times there is an option in your theme for this, or it can be done via a plugin like JetPack or Simple Custom CSS).

That’s it for this post! It should now be easier for your customers to order more of the same products right from the overview page. Let us know in the comments below if you found this useful / are using this code or if you have any questions.

Get our best WooCommerce advice!

Delivered directly to your inbox

Your email is 100% private. We hate spam too. Powered by ConvertKit

Published by Shop Plugins