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
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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(){
			 $(this).closest('li.product').find('a.ajax_add_to_cart').attr('data-quantity',$(this).val());
		 });
	" );
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

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.

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

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

    Am I doing anything wrong?

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

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

  4. 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!

  5. Hi,

    Wow working like charm !

    Thanks

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. 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 BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

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