Here is a way you can add WooCommerce cart icon to the header with the cart count. This solution is quite simple and can be added to any theme, just follow these steps and you will have a Cart icon in your theme header.
Step 1:
Add the code to the theme’s template file header.php where you want your cart icon to be. Make sure WooCommerce is active for the icon to appear.
<?
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
$count = WC()->cart->cart_contents_count;
?>
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>">
<?php if ( $count > 0 ) { ?>
<span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
<?php } ?>
</a>
<?php } // if (in_array)
?>
Step 2:
Add the following to your functions.php to ensure that cart is simultaneously updated as the items are added to the cart.
/*
* Add Cart in header
* */
function my_header_add_to_cart_fragment( $fragments ) {
ob_start();
$count = WC()->cart->cart_contents_count;
?>
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
if ( $count > 0 ) {
?>
<span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
<?php
}
?>
</a>
<?php
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );
Step 3:
Add the CSS so you can use WooCommerce’s native shopping cart icon. Once this is done, adjust till it fits into your theme. If you want, you can use your custom icon font.
If you want to use a different icon, you can do so by changing “WooCommerce” to your icon font’s name and change the e01d on line 3 to your icon’s Unicode.
/* cart css*/
.cart-contents:before {
font-family:WooCommerce;
content: "\e01d";
font-size:28px;
margin-top:10px;
font-style:normal;
font-weight:400;
padding-right:5px;
vertical-align: bottom;
color: #fff;
}
.cart-contents:hover {
text-decoration: none;
}
.cart-contents-count {
color: #fff;
background-color: #2ecc71;
font-weight: bold;
border-radius: 10px;
padding: 1px 6px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
vertical-align: top;
}
Now, you have added the cart item as well as count to your WooCommerce website. Add items to the cart to see your work in action.
Work on your WooCommerce project and build an e-commerce store that your client needs. High quality expert web design Mississauga who are up-to-date with latest developments that results in efficient, robust and intuitive plugin.
