Update Custom Cart Count (or any HTML) after AJAX Add to Cart in WooCommerce

You know the drill; you add your own custom cart count into the header of your new theme. You add an item to the cart via AJAX. The cart count doesn’t update. Not good!

The problem; you haven’t told WooCommerce to update it. Fortunately, it’s easy to hook into the method that updates the default cart count and cart contents (like the mini cart widget), and add your own items to update on the page. You can do all of this via some very simple PHP code, without even touching javascript.

This is something you could implement if you’re using our WooCommerce Quickview plugin. It’ll already update the default fragments for you, but it’s easy to add your own.

Template Code

Let’s say you’ve added an element in your header that displays the total cart count, like so:

This is perfect for displaying the cart count on page load, but won’t update after adding to cart via AJAX; on the archive pages, for example.

Update Cart Count After AJAX

You can simply add your HTML data to the cart fragments that are returned. To expand on this; WooCommerce already returns cart fragments (HTML data) on page load and every time something is added to the cart via AJAX. This replaces the contents of the mini cart, and other elements on the page. It’s a fantastic way of getting your dynamic data to avoid page caching, as it’s swapped in with javascript.

So with that in mind, let’s add some data to the returned fragments.

We’re hooking into the fragments that are returned and adding our own. The $fragments variable is an array of data. Each item is a key/value pair. The key is an element target, which you can see we’ve set to div.header-cart-count; this is the element and class name of the code we added to our header. The value is the same content as we added to our header template, however, as this is being fetched after adding to cart, it will include anything we’ve just added.

Try It Out

That’s actually all there is to it. When the page loads or an item is added to the cart via AJAX, it will now be updated on the page. Important things to note:

  • The HTML element you define in the fragment key will be replaced. The content is not inserted into that element.
  • The fragments are cached, so if you change your fragment code, empty or modify the basket!
  • The fragments are also applied on/after page load, not only when an item is added to the cart.
  • You could replace any kind of content on the page when this is triggered.

Leave a Reply

14 Comments on "Update Custom Cart Count (or any HTML) after AJAX Add to Cart in WooCommerce"

avatar
  Subscribe  
newest oldest most voted
Notify of
Samuel Gadea
Guest

Hello, is it possible to hide the div when the product quantity is equal to 0 ?

kishan
Guest

i want give some effact when one count add in the basket

simon codrington
Guest

Thanks for the article mate. This was exactly what I needed and worked perfectly, cheers!

Yannick
Guest

Hi, great it works perfectly for my cart items count!

I have a minicart too. How would you go about updating the minicart with the same technique?

How would I trigger animation, like add-remove a class with js?

Thanks for your help!

abdo arbab
Guest

That’s an impressive functionality. Thanks for sharing that with us, you saved me a lot of time.

Ali Boozarpoor
Guest

hi
Thanks for your article,
i create a mini cart using this technic , number of item and total price update with ajax but new product (title-link-thumbnail ) appear when page reload.
how can i show new product to mini cart without refresh page (when someone add new product to his cart)?

Giuls
Guest
Great Article! I’m having some trouble executing some javascript code off the back of this function. Essentially IF number of items in cart (AJAX) is equal to 5…trigger a javascript alert. Is this possible? My code is below… add_filter( ‘woocommerce_add_to_cart_fragments’, ‘wc_mini_cart_refresh_number’); function wc_mini_cart_refresh_number($fragments){ ob_start(); ?> cart->get_cart_contents_count(); ?> 5) { //Javascript alert ?> (function($){ $(‘body’).on( ‘added_to_cart’, function(){ // Testing output on browser JS console console.log(‘added_to_cart’); // Your code goes here swal( ‘You added all the items!’, ‘Proceed to checkout?’, ‘success’) }); })(jQuery); <?php } }
Myles Hyson
Guest

How would you go about doing this when you remove a product from the cart?

Mauro Iman
Guest

Just wanted to say that, after hours of search and lot of pages with no clear answers, I stumble upon yours, which really helped me to make progress with a custom cart I’m coding. Sinceraly, thanks!