If you’re not familiar with what AJAX is – in simple terms it is a method of performing a job/task without the need of a page reload. Think of the cart/checkout totals updating when you change the shipping method.
WooCommerce already makes use a of a AJAX add to cart button on the archive page, but when it comes down to the product page it will by default always refresh the entire page. For a more streamlined user experience it would be interesting to have this add to cart button also work with AJAX.
As a bonus, adding products to the cart through this method is also a bit lighter on the server as it doesn’t require to load the entire page, but instead only a small part of it.
In this post I’ll show how you can change the add to cart button to use AJAX using a code snippet.
Making the Add to Cart Button Use AJAX
To accomplish our goal we can use a few code snippets, without the need of changing the data or overriding the add to cart template(s).
Use AJAX for the Add to Cart Button
The first thing to do is change the behaviour of the ‘Add to Cart’ button itself. This is done through the following code snippet which will ensure the button doesn’t cause a page-reload and it will send the data over to the server through a AJAX call.
Having this installed as-is won’t do much, it will send the data to the server and show a loading block over the Add to cart button.
Handling the AJAX Add to Cart Request
To handle the request we’re going to add the following code snippet which heavily utilizes existing WooCommerce functionality to handle the adding to the cart based on the available data.
This will also ensure the server sends back data to update the mini-cart for example. Lastly this removes the default Add to cart handler as this would cause additional add-to-cart of the product.
Add Notices to Fragments
The third and last part is not specifically required, but definitely recommended. This code ensures that any notices are also returned by the server and shown to the customer. If the product was successfully added (or something failed) it will show the notice accordingly to the result.
Also worth noting that by not using this code snippet it would show the ‘Product X added to the cart’ notice on the next page reload.
Do note that the first code snippet inserts the messages at a fixed location. It could be your theme uses a different location to display notices, if that is the case you may want to change things in that code snippet accordingly.
AJAX Add to Cart VS Default Button Result
I think the end result is very smooth and definitely worth adding to your website.