View Sidebar
Display WooCommerce Cart Item Count on Favicon

Display WooCommerce Cart Item Count on Favicon

September 24, 2013 7:57 pm0 comments

Just sharing my solution to displaying the number of items in the WooCommerce shopping cart on the favicon in the user’s browser. I placed the code below in my footer.php file just above the closing </body> tag. See details below the code sample.

<?php global $woocommerce; ?>
<?php
$my_cart_count = $woocommerce->cart->cart_contents_count;
if ($my_cart_count > 0) :
?>
 <script src="<?php bloginfo('stylesheet_directory'); ?>/js/favico-0.3.3.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 var favicon=new Favico({
 animation:'pop'
 });
 favicon.badge(<?php echo $my_cart_count; ?>);
 </script>
<?php
endif;
?>

screenshot_cart_favicon

The script that makes this possible is the favico.js script found at http://lab.ejci.net/favico.js/. They have the code to download and examples of customizing the icon display. One drawback with the favico.js script to date is that it only supports a number up to 9 and not larger*. This may be changed in a future revision.

Obviously this script assumes you are using the WooCommerce plugin for your ecommerce solution. To use this with another ecommerce solutions, you could change this code by replacing the method of obtaining $my_cart_count value based on your ecomm tool of choice.

*UPDATE: Dec 1 2013 – as of version 0.3.3, the script now supports two digits so the number can be larger than 9 now.

Leave a reply