How to Get Number of Items in the Cart

In this tutorial I am going to show you not only how to print the number of items in the cart but also how to process plural forms (1 product, 2 products) and what to do if AJAX add to cart buttons are enabled.

As I said a couple weeks ago – I’m just working with my client website and decided to describe every step I do.

It is quite easy to display just the number of items in the cart:

global $woocommerce;
echo $woocommerce->cart->cart_contents_count;

Or the total amount:

global $woocommerce;
echo $woocommerce->cart->get_cart_total();

You may also find an implementation like this count( WC()->cart->get_cart() ), but please note – it just shows the number of unique products in the cart, and the first way is also presented in the official WooCommerce documentation.

But this is not enough, because you have to keep in mind a couple moments, I will describe them in a while.

How to Properly Use Plural Form Depending on the Number of Products in the Cart

The thing is that it is rarely displayed only the number, it is usually followed by the word like “1 product, 2 products” or “1 item, 2 items”. And we can not display just “1 items, 2 items”, we must process plural forms properly.

You would properly suggest if-else solution, but there is a proper way, with the help of translation function _n().

global $woocommerce;
$count = $woocommerce->cart->cart_contents_count; 
echo sprintf( _n( '%d product', '%d products', $count, 'text domain' ), $count );

Text domain parameter can be skipped if you are not going to translate it.

How to Update the Cart Count when Products are Added via AJAX

Last but not least, AJAX. If you go to WooCommerce > Settings > Products, you will find this checkbox there:

WooCommerce option: Enable AJAX add to cart buttons

When it is turned on, the products will be added to the cart via AJAX, so there is no page refresh. But if there is no page refresh, how can we update the cart items count? Because it will weird, if a customer keeps adding the products to the cart, but it still shows “Cart is empty”.

WooCommerce give us a way to handle it with this very magiс hook woocommerce_add_to_cart_fragments.

It works the following way – when a product has been added to the cart via AJAX, it refreshes all the elements, specified in the hook. Let’s take a look at the example.

First of all you just have to display the number of items in your theme template as usual. And you can do it in multiple places. Just to forget to add a unique CSS class or ID to the element.

<a href="<?php echo wc_get_cart_url() ?>" class="misha-cart">Cart (<?php echo $woocommerce->cart->cart_contents_count ?>)</a>

Then paste the following code to your theme functions.php (you know that I mean a child theme or a custom plugin, but current theme is also OK if you are not going to update it).

add_filter( 'woocommerce_add_to_cart_fragments', 'misha_add_to_cart_fragment' );
 
function misha_add_to_cart_fragment( $fragments ) {
 
	global $woocommerce;
 
	$fragments['.misha-cart'] = '<a href="' . wc_get_cart_url() . '" class="misha-cart">Cart (' . $woocommerce->cart->cart_contents_count . ')</a>';
 	return $fragments;
 
 }

Line 7 does the work. So we add an array element, using a CSS class or ID as a key. The array element contains the same dynamically generated HTML code which we inserted in the template a little above. Everytime. a product is added to the cart, WooCommerce will get the HTML from here.

See also

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code