Out of the box WooCommerce displays an Add to Cart button on product archive pages, but does not have the quantity input. There are a few solutions out there to achieve this, but none maintain ajax functionality (which is very handy on archive pages). Thankfully it’s super easy to get this up and running.

First, drop the following code to your functions.php file (remembering to remove the opening <?php tag), and WooCommerce will print out a nice quantity input box next to your add_to_cart button.

This isn’t the end of the story, as it won’t do anything by itself. To send a quantity along with the add_to_cart ajax request, we can add a custom data attribute to the add_to_cart button called data-quantity. With this data attribute set, WooCommerce will handle the quantity automatically. This means all we need to do is add a little bit of javascript to update this data attribute when the quantity input is changed. This can be achieved with the following javascript (put this in your websites main javascript file, inside the $.ready() function).

*Note: This works with WooCommerce’s default HTML structure, but if you’re using a custom theme the HTML structure might be different, so you’ll need to modify this script to suit.

And that’s it! These two small snippets are all you need to add a quantity input to archived product pages and maintain ajax functionality. If you’d like a dynamic cart on your page that updates when you add products via ajax, WooCommerce has already got you covered here: http://docs.woothemes.com/document/show-cart-contents-total/.

If this post has helped you out, feel free to consider throwing a small donation my way.