WooCommerce: Ajax Add to Cart Quantity @ Shop

As you know, you can tick the “Enable AJAX add to cart buttons on archives” checkbox in the WooCommerce settings in order to add products to cart from the Shop / Category / Tag / loop pages without refreshing the page.

This is great for certain businesses, especially those who sell in bulk and where customers know exactly what they need to buy without the need of checking the single product page.

The bad news is that the Ajax Add to Cart button only allows you to add 1 item to the cart i.e. there is no quantity input field. The other bad news is that the Ajax Add to Cart button only works for simple products, while for variable ones it will turn into a “Select options” link without the possibility of adding a variation to cart from there.

In this tutorial, we will see how to turn the WooCommerce shop into an… Ajax cart with quantity inputs. Enjoy!

With this neat snippet, the Ajax Add to Cart buttons will also get a quantity field beside them, so that customers can add as many products as they wish. This is for simple products only – variable products will show a “Select options” button instead.

PHP Snippet: Ajax Add to Cart Quantity For Simple + Variable Products @ WooCommerce Shop

 * @snippet       Ajax Add Cart Quantity @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 7
 * @community     https://businessbloomer.com/club/

add_filter( 'woocommerce_loop_add_to_cart_link', 'bbloomer_ajax_quantity_shop', 9999, 3 );

function bbloomer_ajax_quantity_shop( $html, $product, $args ) {
	if ( $product->is_purchasable() && $product->is_in_stock() && $product->supports( 'ajax_add_to_cart' ) ) {
		$html = '<div style="display: inline-block; margin-right: 0.2em">' . woocommerce_quantity_input( array(), $product, false ) . '</div>' .  $html;
	return $html;

add_action( 'woocommerce_after_shop_loop', 'bbloomer_add_cart_loop_js' );

function bbloomer_add_cart_loop_js() {
	wc_enqueue_js( "
		 $(document).on('change','.quantity .qty',function(){
	" );

Advanced Plugin: WooCommerce Express Shop Page

WooCommerce Express Shop Page transforms your WooCommerce shop and category pages, allowing customers to select product quantities and variations without leaving the page. It does this by adding quantity input fields and variation dropdowns, making customers more likely to buy instantly and in bigger quantities.

AJAX-Powered Variations guarantees ultra fast performance and won’t slow down your site even if you have thousands of products. The plugin is also easy to set up and users can quickly choose whether to show the quantity field and variation drop-downs in the settings page.

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages
    I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can […]
  • WooCommerce: Hide Prices on the Shop & Category Pages
    Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

13 thoughts on “WooCommerce: Ajax Add to Cart Quantity @ Shop

  1. Hi,

    Great solution and it’s working fine, but the ‘add-to-cart’ button is showing under the quantity field. What can I do to show the quantity field left and the add-to-cart button on the right?

    Thank you!

    1. I think it’s only a matter of custom CSS. Feel free to share a link and I’ll take a look

  2. Is there a way to display the up and down arrows that adjust the quantity number?

    1. Those quantity input fields are of type = number, so the arrows should show on hover. Can you verify that please?

  3. Not working for me unfortunately, I get the a modal with the error ‘Content not found’

    Am I doing anything wrong?

  4. I thought it was suppose to use ajax on the archive page, for variable products too. Now I see that is not your intended result. However on the archive page it shows “add to cart” as the button, for the variable product.

    1. It should be “Select options”, so you probably have some other plugin / customization that is overriding that

  5. Doesn’t seem to work. Not sure if it matters but I’m using Oxygen Builder, fresh install.

  6. It didn’t work for me. I had 10 items in my cart and tried to get it to 12. As I wrote 12 in the “quantity” field, hoping that would take the difference (2 items), I ended up instead with 22 items in my cart (so the quantities were added instead of taking the difference only). Could you tell me where my code was wrong please ?

    1. Sorry Gwen, that’s actually how it’s supposed to work. Your request is a different thing (basically, the shop becomes a cart page), and would require custom code. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  7. Hi,

    Wow working like charm !


Questions? Feedback? Customization? Leave your comment now!

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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