Updating the WooCommerce mini-cart via AJAX

The mini-cart is a scaled-down version of the WooCommerce cart. It’s the template that the WooCommerce Cart widget uses to display the user’s cart in the sidebar or footer. In a client build, I decided to use the mini-cart template to display the user’s cart when they hover over the cart icon in the navigation menu. However, I found that with caching plugins also running, it’s possible to run into problems with the mini-cart not displaying the correct information to users – in effect, they’d be viewing the contents of other users’ carts.

Why use AJAX?

The way to prevent cached versions of the cart displaying was to use AJAX. AJAX allows the theme to update parts of a page without reloading the whole page. Even though most caching plugins will allow you to exclude specific pages from being cached, thereby avoiding any problems with the main cart page itself, it’s not easy to exclude sections of a page. AJAX solves this problem.

How to exclude the mini-cart from being cached

For a full explanation of how AJAX works within WordPress, please check the Codex here. For a quick overview of how I solved this specific problem, read on:

The JavaScript

If you don’t already have a JavaScript file where you put your theme scripts, create one, and add the following code:

;
( function ( $ ) {
 "use strict";
// Define the PHP function to call from here
 var data = {
   'action': 'mode_theme_update_mini_cart'
 };
 $.post(
   woocommerce_params.ajax_url, // The AJAX URL
   data, // Send our PHP function
   function(response){
     $('#mode-mini-cart').html(response); // Repopulate the specific element with the new content
   }
 );
// Close anon function.
}( jQuery ) );

This code creates an anonymous jQuery function that defines our PHP function (below) that we’ll use to load the new content. It passes this parameter back to the server then uses the response to populate a defined element with the new content. In this example, we are populating the #mode-mini-cart element with the content but this is likely to be different in your theme.

The PHP

In your functions.php file, add the following snippet:

function mode_theme_update_mini_cart() {
  echo wc_get_template( 'cart/mini-cart.php' );
  die();
}
add_filter( 'wp_ajax_nopriv_mode_theme_update_mini_cart', 'mode_theme_update_mini_cart' );
add_filter( 'wp_ajax_mode_theme_update_mini_cart', 'mode_theme_update_mini_cart' );

This is the PHP code that is triggered by our JavaScript. It uses a standard WooCommerce function, wc_get_template(), to locate the template file for the mini-cart. This will find the default mini-cart.php template if you don’t have a customized version in your theme. It then returns that content to your JavaScript, which completes the process by repopulating the correct element in the page.

Note that we register this function using wp_ajax_ filters. Check the Codex for more information.