Add WooCommerce Cart Icon with Item Count as a Shortcode

WooCommerce

In this tutorial I’m going to show you how to Add WooCommerce Cart Icon with Item Count as a Shortcode. We just need to add simple code snippets to functions.php file of your custom theme/child theme and add some CSSĀ to your stylesheet. There are only two functions that we have to use. Here is the first one and it will create a shortcode for the WooCommerce cart. This can be appended anywhere in your theme templates.

Create the shortcode

<?php
/**
 * Create a Shortcode for WooCommerce Cart Item
 */
function ta_woo_cart_btn() {
	ob_start();
 
    $cart_count = WC()->cart->cart_contents_count; // Set variable for cart item count
    $cart_url = wc_get_cart_url();  // Set Cart URL
    
    if ( $cart_count > 0 ) {
        $ta_cart_count = $cart_count; 
    } else {
        $ta_cart_count = 0;
    }
    ?>
    <a class="ta-cart-link" href="<?php echo $cart_url; ?>" title="<?php _e( 'View your shopping cart' ); ?>">
          
        <span class="fa-stack fa-2x has-badge" data-count="<?php echo $ta_cart_count; ?>">
            <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
            <i style="" class="fa fa-shopping-cart fa-stack-2x red-cart"></i>
        </span>
    </a>
    <?php
	        
    return ob_get_clean();
 
}

add_shortcode ('ta_woo_cart_shortcode', 'ta_woo_cart_btn' );
?> 

Filter to enable Ajax on the Cart Count

Following code snippet will add a filter to get the cart count updated when it changes using the Ajax fragments.

<?php
/**
 * Add AJAX Shortcode when cart contents update
 */
function ta_woo_cart_btn_count( $fragments ) {
	ob_start();
 
    $cart_count = WC()->cart->cart_contents_count; // Set variable for cart item count
    $cart_url = wc_get_cart_url();  // Set Cart URL
    
    if ( $cart_count > 0 ) {
        $ta_cart_count = $cart_count; 
    } else {
        $ta_cart_count = 0;
    }
    ?>
    <a class="ta-cart-link" href="<?php echo $cart_url; ?>" title="<?php _e( 'View your shopping cart' ); ?>">
          
        <span class="fa-stack fa-2x has-badge" data-count="<?php echo $ta_cart_count; ?>">
            <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
            <i style="" class="fa fa-shopping-cart fa-stack-2x red-cart"></i>
        </span>
    </a>
    <?php
	        
    $fragments['a.ta-cart-link'] = ob_get_clean();
     
    return $fragments;
 
}

add_filter( 'woocommerce_add_to_cart_fragments', 'ta_woo_cart_btn_count' );
?> 

Add CSS

Now let’s add some CSS to make Cart looks nice with the item count. Also note that I have used Font Awesome 4 for the cart icon.

.fa-stack[data-count]:after {
  position: absolute;
  right: 0%;
  top: 0%;
  content: attr(data-count);
  font-size: 40%;
  padding: .6em;
  border-radius: 999px;
  line-height: .75em;
  color: white;
  color: #DF0000;
  text-align: center;
  min-width: 2em;
  font-weight: bold;
  background: white;
  border-style: solid;
}

.fa-circle {
  color: #DF0000;
}

.red-cart {
  color: #DF0000;
  background: white;
}
 

You can use the following shortcode for PHP template files.

<?php echo do_shortcode("[ta_woo_cart_shortcode]"); ?> 

That’s it. Now you have a mini cart icon with item count which updates using AJAX.

Share:

Meet the Author

Dushan Maduranga

Software Engineer at DigiTecz Inc, who loves to drink a lot of cups of tea when coding gets complicated. He believes it helps him to stay refreshed and focused. He loves to write articles for DigiTecz on web technologies when he is not coding.