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.

Before:

After:

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

18 comments

  1. Been trying to figure this out for ages! I’ve got a custome ‘Quote Builder’ embedded into the homepage of my site. People would look through a 200 page pdf, add product code and everything to the build, add it, and it would refresh and go back to page 1 of the PDF. This has just saved the day for me, thank you so much!

  2. This post has been so helpful, thank you!

    I do have one follow-up question. Can you please explain what part of the code inserts the notice fragments into the fixed location of the theme?

    Add-to-Cart currently scrolls to the top of the page. I’m trying to scroll down to a cart section I added using a shortcode ([woocommerce_cart]).

  3. Hi there and thanks for a great blogpost. This solution is much more cleaner then “pro” plugin solutions out there, and works elegant in all my WooCommerce installs. The added notice handler is also working as a charm with complex ajax onload situations.

    It would be great if you have a “similar clean way” to add a number (default) quantity field into the mini cart, in harmony with this blog post functions.

    Keep sharing!
    / Jonas Lundman

  4. That’s what I was looking for, great job!
    To make it work, I had to change ‘messages’ with ‘notices’ on line 14 of the third snippet. For the rest, it works like a charm.

    I just have a question: is there any chance to make it work also on archive pages? I tried, but $all_notices are always empty.. do you happen to know why?

  5. After testing and debugging lots of codes, try this one and it’s working FANTASTIC.
    Thanks Jeroen Sormani, this was life saving!

  6. This post is really helpful.

    after a long search and tired with every option finally with this script i am able to implement ajax call on the single product page.

  7. Thanks for this! It all works perfectly, except for the last bit, for me. The “Add Notices to Fragments” code. With the code, it doesn’t show the notice that an item has been successfully added. When I remove that part of the code, and I add an item to the cart, then refresh the page, the notice shows. Any reason why it doesn’t work as intended?

    1. Hi,

      There was a outdated parameter, the ‘messages’ needed to be updated to ‘notices’. The current code on the page is updated and works 👍

  8. This code does not work in wordpress 5.6 with new jquery library when add to cart clicked in variable products, please help me to solve it. Thanks

  9. This snippet is not working from WC 4.8 It was working earlier pretty fine. Do you think you can update the code in a manner so that everything works properly without any issue. I think add-to-cart is not getting data for variable or grouped product as they have variations available. So we need to provide variation id’s for them any thoughts?

    1. Hi,

      Thanks, I’ve just reviewed this post and updated the snippets to work and properly make the ajax add to cart work on product pages with the latest versions (tested with simple/variable products, not grouped though).

      Cheers,
      Jeroen

  10. Hi,

    Great code.
    I have a custom success.php notice in my child theme. I also load global $post in there to get the product image and a shortcode as well . This gives errors. Probably because only html is loaded or something. Any ideas?

    1. Hi,

      Loading a global variable can be done in a template generally, its not limited to HTML only if its a .php file. Its give details without knowing the setup/error.

      Cheers,
      Jeroen

  11. Hi, I have another questions, solved the question above, but it looks like the quantity does not work. If I set the quantity to 10 for example, it just adds 1 product to the cart,

      1. Thanks, the form.context replacement works as a charm with both quantaties, variable products and addons like bookings and more.

Leave a Reply

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