“Add to cart” with Woocommerce and AJAX step by step

I’m a fan of the sales rates improvement, and I’m always looking for tips and 3rd party plugins to improve the sales like the products and categories in the menu.

But one of those things that I never understand about WooCommerce, is the way the Add to cart works is the single products. The default function reloads the entire website each time you press the Add to cart button.

I always thought that an ajax add to cart button is a better implementation as it improves the user experience by allowing changes to the pages without having to load them again.

Imagine that each step you take in a web should refer to another page, and another, and another … The more steps and time your e-commerce load, the more you reduce the chances of selling. AJAX makes the actions take place immediately as if we were interacting with a PC program.

If you don’t want to go through the whole tutorial, you can download the ready to use plugin here: WooCommerce Ajax Add To Cart

WooCommerce Ajax add to cart

Why use AJAX?

  • Use less bandwidth
  • Reduce server load
  • Speed user experience
  • Increase your sales!

1. Add Javascript File

We will start by including this javascript in your website, so add this code in your functions.php file.

2. Create Javascript File

After adding the javascript, create a new folder in your child theme called “JS” and add a new javascript called “ajax-add-to-cart.js”.

If you have doubts about how to create a child theme, you can consult the linked tutorial from wp.rocks.

Add jQuery to avoid recharging

Apply this code to prevent the button from sending the information to the database and reloading the page.

Add the product to the cart

The jQuery will be used to collect the information from the website and add a product from the site to the cart. Include this code inside the previous code that hooks in the add to cart single product button event to collect the product data.

Now we will prepare the data to interact with the Ajax WordPress function. This feature allows a web page to communicate with your server without reloading the page.

With Ajax applications on the web can exchange data with the server without interfering with the existing web page.

Ajax Add to cart event

After this code where we define an array with all required variables, we will trigger the add to cart event, just in case a theme is using this function to make any changes.

Ajax Add to cart function

Here is where the magic begins. We will trigger a PHP function via javascript with the help fo the WordPress ajax interface.

Ajax Add to cart on single products script

3. Add to cart PHP function

Now we will go to the functions.php file of your child theme to add the following code. The intention of this is to update the cart with the information received by the jQuery file.

Ready!

If all the above was complicated, remember that you can download our plugin called WooCommerce Ajax add to cart that allows you to do this.