How to reflect cart count at the cart icon as and when products are added or removed from the cart in WooCommerce

Although there is a hassle free option of using WooCommerce.com as your e-commerce store, you may prefer to host your own.

If you are familiar with WordPress and wish to host your e-commerce website, WooCommerce is also available as a WordPress plugin that augments WordPress with e-commerce website features.

Although more work needs to be done for self-hosted WordPress sites, we have the option of creating our own themes without having to pay additional charges on top of the web hosting fees.

When it comes to creating our own WooCommerce themes, one feature that we may want to implement would be to show the number of products that had been added to our WooCommerce cart near the shopping cart icon as and when products are added or removed from the cart.

This post documents how we can reflect cart count at the cart icon as and when products are added or removed from the WooCommerce shopping cart.

Hooking into WooCommerce to update the cart count HTML portion when products are added to or removed from the cart

The first step is to hook into WooCommerce to update cart count when products are added to or removed from the cart.

WooCommerce included a filter that enables theme developers to customize the HTML output for the cart count whenever there is any changes made to the shopping cart.

Hooking into the woocommerce_add_to_cart_fragments filter allows us to change the HTML portion that reflects the cart count each time a product is added to or removed from the cart. With that, we could include the following code fragments in functions.php to reflect changes to the cart count:

<?php
function woocommerce_header_add_to_cart_fragment( $fragments = array()) {
	ob_start();
	$cart_count = WC()->cart->get_cart_contents_count();
?>

	<div id="cart-count"><?php if ($cart_count > 0) { ?><span><?php echo $cart_count;?></span><?php } ?></div>

<?php

	$fragments['#cart-count'] = ob_get_clean();

	return $fragments;

} // end function woocommerce_add_to_cart_fragments
add_filter('woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');

In the above code fragment, we first define a function, woocommerce_header_add_to_cart_fragment, that expects an array as an input parameter. When nothing is supplied to the function, a new array will be implicitly created.

Inside the function body, we use the ob_start() and ob_get_clean() functions to capture some PHP code execution that will produce the HTML portion that reflects the cart count.

In between the ob_start() and ob_get_clean() function calls, we then make a call to WC()->cart->get_cart_contents_count() to get the number of products that are in our WooCommerce shopping cart and assigned it to the $cart_count variable. We then use $cart_count to generate the HTML code to reflect the cart count.

We then create an array entry, with:

• the jQuery selector for seeking the HTML element to replace as the key and
• the HTML code that reflects the cart count as the value.

Finally, we return the $fragment array to the function caller.

Note that the HTML portion includes the HTML element, with id=“cart-count”. This HTML element will be replaced by WooCommerce whenever there are changes to the shopping cart.

Calling the function earlier in header

Since the function that we had added to the filter already did the work of generating the HTML portion for the cart count, we simply make a call to that function to display cart count at our shopping cart link:

<a href="/cart" title="See what is in your shopping cart">
	<?php echo woocommerce_header_add_to_cart_fragment()['#cart-count'];?>
</a>

With that, whenever products are added to or removed from the WooCommerce shopping cart, the cart count will be updated and reflected at the cart icon.

• Share
• Tweet
• Share
• Save