AJAX Add to Cart – How it Works

In this tutorial guys I would like to deconstruct for you how an asynchronous adding products to cart works in WooCommerce and we are also going to create some custom “ajax add to cart” buttons here.

Creating AJAX Add to Cart Buttons without JavaScript

This functionality works with the help of add-to-cart.js file and in case we decide to do something like this, sometimes it is not even necessary to write extra JavaScript code.

The code would be:

add_action( 'woocommerce_after_shop_loop_item', function() {

	$product_id = get_the_ID();
	echo '<a href="?add-to-cart=' . $product_id . '&quantity=10" data-quantity="10" data-product_id="' . $product_id . '" class="button add_to_cart_button ajax_add_to_cart">Add 10 to cart</a>';

}, 99 );

In order this button to work you need to make sure the following:

• Provide product ID in data-product_id attribute.
• The button must have the following classes add_to_cart_button ajax_add_to_cart.

But also:

• You can provide product quantity inside data-quantity attribute (as we did).
• href attribute is only needed when JavaScript is turned off in the browser.

Selecting quantity before adding product to the cart

All we need to do here actually is to use WooCommerce default function woocommerce_quantity_input() and to manipulate data-quantity attribute of the “Add to cart” button.

This is going to be our result:

Let’s display the quantity input with this incredibly simple code snippet:

add_action( 'woocommerce_after_shop_loop_item', function() {
	
	global $product;
	
	// I think it would be a great idea to check this
	if( ! $product->is_type( 'simple' ) ) {
		return;
	}
	
	woocommerce_quantity_input();

} );

Then, with another incredibly simple JavaScript code snippet we are going to change the value of the data-quantity attribute of the button.

$( 'li.product .qty' ).change( function() {

	const qty = $(this).val();

	$(this).parent().next().attr( 'data-quantity', qty );

} );

Selecting product variations on the shop page

The situation with product variations is quite a bit more complex. Here I am going to show you a simple static example, but if you are going to display the list of product variations dynamically, I would recommend you my another tutorial.

add_action( 'woocommerce_after_shop_loop_item', function() {

	$variation_id = 25;

	echo ' <a href="?add-to-cart=' . $variation_id . '" data-product_id="' . $variation_id . '" class="button add_to_cart_button ajax_add_to_cart">Add a blue hoodie to cart</a>';

}, 30 );

As you can see we are still using the same data-product_id attribute, the only difference is that we are providing a variation ID inside of it.

So, displaying product variations like this on the shop page is possible and please note, that we didn’t even do a lot of JavaScript here. Sometimes you can do really cool stuff, for example displaying variation color swatches like this:

Custom AJAX Add to Cart JavaScript Function

But sometimes just using default buttons and data-product_id and data-quantity attributes isn’t enough.

jQuery( function( $ ) {
	$( '#custom-add-to-cart' ).click( function( event ) {
	
		event.preventDefault();
	
		const data = {
			product_id: 54,
			quantity: 2,
		}

		$.ajax( {
			type: 'POST',
			url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
			data: data,
			dataType: 'json',
			beforeSend: function( xhr ) {
				// you can set the button loading state here
			},
			complete: function( res ) {
				// you can remove the button loading state here
			},
			success: function( res ) {
			
				$( document.body ).trigger( 'added_to_cart', [ res.fragments, res.cart_hash ] );

			},
		});

	} );
	
} );

# WooCommerce, admin-ajax.php

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X