Adding TinyCon library to WooCommerce - Show products in cart count on the favicon

I just came across with a solution for implementing TinyCon with WooCommerce. I use this super-easy, leightweight library to display cart quantity on the favicon.

You need to edit file footer.php in your theme, you find this in most cases:

    /wp-content/themes/xxxxxx/footer.php

What you need to add first is the TinyCon JS library. Download it from [Github][1].

Then you need to call this library and add the cart quantity to display it on the favicon. Add this code before the </body> tag.

My code with explanation:

 <?php global $woocommerce;  //you need this for het the cart quantity
    $my_cart_count = $woocommerce->cart->cart_contents_count; //get the quantity
    ?>
     <script src="<?php bloginfo('stylesheet_directory'); ?>/includes/js/tinycon.min.js" type="text/javascript"></script> //call the TinyCon library
     <script type="text/javascript">
    Tinycon.setOptions({
        width: 7,
        height: 9,
        font: '10px arial',
        colour: '#ffffff',
        background: '#e01c1f',
        fallback: true
    });
     </script>
    <?php if ($my_cart_count > 0) :             //if cart has products in it display bubble by default.
    ?>
    <script type="text/javascript">
   
    Tinycon.setBubble(<?php echo $my_cart_count; ?>);
   
    </script>
    <?php
    endif;
    ?>
    // this part is needed if you use AJAX add to cart in WooCommerce, this will ensure when if you click on AJAX add to cart button the bubble is updated correctly.
    <script type="text/javascript">
     var darab =  <?php echo $my_cart_count; ?>;
     
     jQuery('.add_to_cart_button').bind('click',function() {
       
     darab = darab + 1 ;
     
     Tinycon.setBubble(darab); 
    });
   
    </script>

  [1]: https://github.com/tommoor/tinycon