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 : ' '; ?></div>
<?php
or:
$items_count = WC()->cart->get_cart_contents_count();
echo '<div id="mini-cart-count"><?php echo $items_count ? $items_count : ' '; ?></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 : ' '; ?></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 byWC()->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);
});