Ajaxify header cart items count in Woocommerce

You should not use any reload to update the cart content count… Instead you should use the dedicated woocommerce_add_to_cart_fragments action hook that is Ajax powered.

1) The HTML to be refreshed: So first in your theme's header.php file you should need to embed the cart count in a specific html tag with a defined unique ID (or a class), for example something like:

$items_count = WC()->cart->get_cart_contents_count(); 
?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : '&nbsp;'; ?></div>
<?php

or:

$items_count = WC()->cart->get_cart_contents_count();

echo '<div id="mini-cart-count"><?php echo $items_count ? $items_count : '&nbsp;'; ?></div>';

2) The code:

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments){
    ob_start();
    $items_count = WC()->cart->get_cart_contents_count();
    ?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : '&nbsp;'; ?></div>
    <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}

if you use a class in your html Tag, you will replace ['#mini-cart-count'] by ['.mini-cart-count']. This hook is also used to refresh the mini-cart content.

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Since few years global $woocommerce; + $woocommerce->cart is outdated and replaced by WC()->cart to access WooCommerce cart object.


If you need jQuery to force refresh that count, you can try wc_fragment_refresh or wc_fragments_refreshed delegated events, like:

$(document.body).trigger('wc_fragment_refresh');

or:

$(document.body).trigger('wc_fragments_refreshed');

For anyone who wants the proper ajax implementation, here is the way to go.

in functions.php

add_action('wp_ajax_cart_count_retriever', 'cart_count_retriever');
add_action('wp_ajax_nopriv_cart_count_retriever', 'cart_count_retriever');
function cart_count_retriever() {
    global $wpdb;
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

in your script file (assuming you have enqued the script file and passed the ajax object into the script. you also need to put this block into a setInterval or in some other jquery action.

var data = {
  'action': 'cart_count_retriever'
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
  alert('Got this from the server: ' + response);
});