{"id":871,"date":"2017-12-12T19:04:01","date_gmt":"2017-12-12T11:04:01","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=871"},"modified":"2018-09-05T10:56:27","modified_gmt":"2018-09-05T02:56:27","slug":"how-to-reflect-cart-count-at-the-cart-icon-as-and-when-products-are-added-or-removed-from-the-cart-in-woocommerce","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-reflect-cart-count-at-the-cart-icon-as-and-when-products-are-added-or-removed-from-the-cart-in-woocommerce\/","title":{"rendered":"How to reflect cart count at the cart icon as and when products are added or removed from the cart in WooCommerce"},"content":{"rendered":"

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

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

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. <\/p>\n

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.<\/p>\n

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.<\/p>\n

Hooking into WooCommerce to update the cart count HTML portion when products are added to or removed from the cart<\/h2>\n

The first step is to hook into WooCommerce to update cart count when products are added to or removed from the cart.<\/p>\n

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. <\/p>\n

Hooking into the woocommerce_add_to_cart_fragments<\/code> 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<\/code> to reflect changes to the cart count:<\/p>\n

\r\n<?php\r\nfunction woocommerce_header_add_to_cart_fragment( $fragments = array()) {\r\n\tob_start();\r\n\t$cart_count = WC()->cart->get_cart_contents_count();\r\n?>\r\n\r\n\t<div id="cart-count"><?php if ($cart_count > 0) { ?><span><?php echo $cart_count;?><\/span><?php } ?><\/div>\r\n\r\n<?php\r\n\r\n\t$fragments['#cart-count'] = ob_get_clean();\r\n\r\n\treturn $fragments;\r\n\r\n} \/\/ end function woocommerce_add_to_cart_fragments\r\nadd_filter('woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');\r\n<\/pre>\n
In the above code fragment, we first define a function, woocommerce_header_add_to_cart_fragment<\/code>, that expects an array as an input parameter. When nothing is supplied to the function, a new array will be implicitly created.<\/p>\n
Inside the function body, we use the ob_start()<\/a> and ob_get_clean()<\/a> functions to capture some PHP code execution that will produce the HTML portion that reflects the cart count.<\/p>\n
In between the ob_start()<\/a> and ob_get_clean()<\/a> function calls, we then make a call to WC()->cart->get_cart_contents_count()<\/code> to get the number of products that are in our WooCommerce shopping cart and assigned it to the $cart_count<\/code> variable. We then use $cart_count<\/code> to generate the HTML code to reflect the cart count.<\/p>\n
We then create an array entry, with:<\/p>\n