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.

https://gist.github.com/a3325bdbca57f59690c1

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:

woocommerce-archive-quantity-page-left

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 );

with

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:

woocommerce-archive-quantity-field

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

https://gist.github.com/0745db5137ff5c91706f

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

35 Comments

  1. Hi there – I’ve implemented this, but the cart doesn’t update the quantity entered – it stays as 1. Any ideas?

    Thanks!

    • Hi Taryn,

      Hard to say,, I’ve just re-tested this and it does seem to work for me.
      Maybe you can try playing around wth the AJAX add-to-cart setting?

      Cheers,
      Jeroen

      • Hey,

        I seem to have the same problem as Taryn here. It adds the quantity field on the page but it doesn’t update the cart with the right quantity, it just adds one product.

        Do more people have this problem and might you be able to fix it?

        Thank you!

        • Hi,

          Could you try this when switched to one of the default themes?
          Also, please re-copy the code snippet above, I’ve remember making a change in it some time ago (don’t remember if it was related to this).

          I just re-tested this and it should work on a standard setup.

          Cheers,
          Jeroen

  2. Hi,
    I tried to implement, but it does not work, maybe a conflict with German Market?

    Regards,
    Regina

  3. Taryn is testing on chrome and Jeroen testing it on firefox … both are right

  4. Where is the code to place in functions.php? i couldnt find the code

  5. When increasing the number on the + sign, the page starts to load the “Detail page”. Why and how do I change that? I want the items to be put straight into the cart and stay on the page where more products can be added.

    • Hi LB,

      You found a little bug there! You’re right, this happened because the input is placed within the link of the product..

      I’ve just updated the code to it doesn’t do that anymore..

      Cheers,
      Jeroen

      • Hello!
        I’m having the same problem LB had… when I increase the amount of one article, the article page is loaded…
        This hack is very useful! ;)

  6. Thanks loads!! This worked beautifully and so much simpler than replacing a WC file (like I found on the WC site).

    It didn’t work at first (like the others described above), but I cleared my cart and refreshed the page a few times, and it began working.

  7. Hi,
    It works great!
    Thanks a lot.

  8. If the code doesn’t work for you, check that the jQuery selectors match the corresponding elements in your HTML. If not, change the jQuery selectors accordingly.

    A bug I found involved an AJAX-enabled “Add to cart”: add a product to the cart. Once it has been added, change the quantity of the same product and add it again. I found that the old quantity is used instead. (I had the WooCommerce Cart in a widget so I could see the quantities updating in real-time)

    As near as I can tell, jQuery’s .data() function only checks the HTML5 data- attributes the first time. After that, changing the HTML5 data- attributes have no effect on the internal data stored by jQuery. As a quick fix, I modified the 2nd event handler:

    jQuery( “.post-type-archive-product” ).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() );

    // THIS IS THE LINE I ADDED
    add_to_cart_button.data( “quantity”, jQuery( this ).val() );
    });

    Jeroen, please confirm the bug and work-around. Or has fatigue clouded my brain? :)

    • Hi Joshua,

      Looks like you’ve indeed found a flaw in there, and you fix seems to be the one!
      I’ve modified the code snippet to replace my line of code with yours, which seems to work perfectly.

      Thanks!
      Jeroen

  9. Works great!!!

    Thank you so much!

  10. Hi Jeroen,
    How could I modify your code so that the quantity field would display on BOTH the archive pages AND the actual SHOP page? Thanks for any help you can offer me!

  11. Hey Joshua, this is excellent, great work! I had a question for you. In my woocommerce site I am using a mix of simple subscription products and simple products within the archive page. The above code works 99% perfect, my question is how can I have this not apply to the simple products? As it stands it duplicates the Quantity fields for simple products to where there are two of the fields for that product type. It works perfect for everything else!

    I appreciate any advice you might have, thank you so much!

    • I meant Jeroen! Not Joshua, I’m sorry! Oh my gosh how embarrassing!

    • Hi Matt,

      You should be able to add some conditional check for the product type, though I’m not sure why it would be showing twice..? Is your theme adding quantity fields / are you using another plugin for that?

      Cheers,
      Jeroen

  12. Hey i added this to my function.php and it works when i am logged in, but causes a white screen of death on my /shop page any idea why that might be?

  13. Thanks for the code, it doesnt work for me, im using zerif theme and it just adds 1 product despite the amount chosen.

    • Hey Mariano,

      Try switching to a default theme like TwentySixteen, copy the code to that theme’s functions.php file, and see if the code works. If it works there is an issue with the zerif theme.

  14. Hey,
    the code doesn’t work for me. I copied the one at the top but the problem is that if i choose more than 1 in quantity it adds only 1 and not the requested quantity.
    what shell i do??

  15. Hi, this is excellent, solves a big problem for me, but when I input a qty or use the increase arrow the product loads. Is there away round this. Thanks

  16. Hi Jeroen,

    Thank you for the code. Do you know how can I put dropdown for variable products. So that customers can buy the products easily.

    Ranjith

    • Hi Ranjith,

      The code in the post shows an example of how you can add additional HTML at the given location. You’d want to create a list with the variations there and there would some custom code further to ensure it all works as wanted.

      I don’t have code available off the bat, but might create a future post about that ;-)

      Have a great day!
      Jeroen Sormani

  17. ok so the code works fine but the only issue i am facing is when i increment the qty on the product page to any number and press add to cart button it only adds 1 QTY of that in the cart? why is that? please help. I am half way through

  18. I also have the same..code shows the input field and it doesnt matter to what number I change the quantity, it still only add 1 x of the item.

    Please help guys! Thank you in advance, you are awesome!

    • Hi Jaco,

      If it isn’t adding the set quantity it could be you have a Javascript error on your site. As this code snippet uses some JS it might be halted when a error somewhere occurs.

      You can verify that by checking your browser’s console.

      Cheers,
      Jeroen

  19. I found this and it worked for me!!

    https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/

    The only downside I have now is that the “Add to cart” button is in my link to go to the product single page. I need to move it out..any help would be appreciated..

  20. My website crashed. Say Parse error: syntax error, unexpected ‘<' in /home/****dmin/public_html/wp-content/themes/atelier/functions.php on line 484

    • Hi Devanshi, that error is probably due to some improper syntax in the functions.php file. I suggest running that code locally with WP_DEBUG turned on to see more detail of what the error is, then research that error.

Comments are closed.