Having a ‘Add to cart’ button on the shop (archive) pages can be a great way to increase conversions on your site. Depending on the products you’re selling having to go into the product detail page about a product may not be needed at all.

However if your customers tend to order more then 1 quantity of a product using the ‘Add to cart’ button on the overview page can be a very unsatisfying experience for the customer. Adding a quantity field on the overview page may just be the right solution for you!

Adding the Quantity Field

WooCommerce Core doesn’t come with a setting or option to show a quantity field at the shop page. Using a code snippet you’ll be able to add a fully functional quantity field without much hassle. 

The following code snippet will add the quantity field to products for who it is fitting. This means it won’t show the quantity field for products that are marked as ‘sold individually’, variable products, or if the product is not purchasable for another reason.

The code snippet works for both AJAX and the regular Add to cart button on the shop pages. The quantity fields should look something like this;

For some themes, including Storefront (the theme I’m using in the screenshot above) the quantity field will be shown on its own separate line. I my mind it looks better on the side of the ‘Add to cart’ button.. If you also encounter this with your theme there’s a good chance you to solve this by adding the following CSS line;

.archive .quantity { display: inline-block; }

Now that looks a lot more streamlined!

Changing the Quantity Field Position to the Right

Don’t like it there on the left side? Changing it to be on the right side is a simple change of priority. Change this line in de the code snippet:

add_action( 'woocommerce_after_shop_loop_item', 'ace_shop_page_add_quantity_field', 8 );

With this line;

add_action( 'woocommerce_after_shop_loop_item', 'ace_shop_page_add_quantity_field', 12 );

As you can see only the third argument has changed, which determines the priority of the callback. 

About the author: Jeroen Sormani is actively building WordPress, WooCommerce and Easy Digital Downloads plugins. Slightly obsessed by writing high quality code.
Follow Jeroen on Twitter

Leave a Reply

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