Ajaxify Header Cart Items Count in WooCommerce

Identifying the Need

In WooCommerce integrated WordPress themes, updating the header cart items count without reloading the page is a common challenge. jQuery offers a solution, but questions arise when items can be added in multiple quantities.

Utilizing AJAX to Retrieve Total Count

To dynamically retrieve the total cart count from PHP sessions using jQuery, a reloadCart.php file is created to echo the value:

cart->get_cart_contents_count();
?>

AJAX Implementation

However, attempts to make AJAX calls to this file using jQuery's get(), post(), or ajax() functions have been unsuccessful.

Improved Approach

Instead of relying on a reload, WooCommerce offers a dedicated woocommerce_add_to_cart_fragments action hook that supports Ajax.

HTML Integration

Embed the cart count in the header with a unique ID or class:

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

PHP Code
Implement the following code in the theme's function.php file or a plugin:
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();
    ?>
    

    
Replace #mini-cart-count with .mini-cart-count if using a class.
jQuery Refresh
If additional jQuery refresh is required:
$(document.body).trigger('wc_fragment_refresh');
or
$(document.body).trigger('wc_fragments_refreshed');