How to add quantity field for products on archive product page in Woocommerce?

In this tutorial we’ll learn how to add quantity field for products on archive product page i.e. shop and category pages.

Here is what our archive product page will look like:

woocommerceNow, we need to add quantity field for each product.

To do this add the following lines of code at the end of your theme’s functions.php file:

function custom_woo_before_shop_link() {

   add_filter('woocommerce_loop_add_to_cart_link', 'custom_woo_loop_add_to_cart_link', 10, 2);

   add_action('woocommerce_after_shop_loop', 'custom_woo_after_shop_loop');


add_action('woocommerce_before_shop_loop', 'custom_woo_before_shop_link');



* customise Add to Cart link/button for product loop

* @param string $button

* @param object $product

* @return string


function custom_woo_loop_add_to_cart_link($button, $product) {

   // not for variable, grouped or external products

   if (!in_array($product->product_type, array('variable', 'grouped', 'external'))) {

       // only if can be purchased

       if ($product->is_purchasable()) {

           // show qty +/- with button



           $button = ob_get_clean();


           // modify button so that AJAX add-to-cart script finds it

           $replacement = sprintf('data-product_id="%d" data-quantity="1" $1 add_to_cart_button product_type_simple ', $product->id);

           $button = preg_replace('/(class="single_add_to_cart_button)/', $replacement, $button);




   return $button;




* add the required JavaScript


function custom_woo_after_shop_loop() {




   jQuery(function($) {


<?php /* when product quantity changes, update quantity attribute on add-to-cart button */ ?>

   $("form.cart").on("change", "input.qty", function() {

       $(this.form).find("button[data-quantity]").attr("data-quantity", this.value);



<?php /* remove old "view cart" text, only need latest one thanks! */ ?>

   $(document.body).on("adding_to_cart", function() {









You can access functions.php file from here:

woocommerceAfter updating the file, go to product archive page and you’ll notice quantity field being added for each product.



I hope you enjoy reading this blog post. If you want my team to do WooCommerce Maintenance for you, click here.

2 thoughts on “How to add quantity field for products on archive product page in Woocommerce?”

Leave a Comment

Your email address will not be published. Required fields are marked *