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.
