These are 2 steps to add a WooCommerce cart icon with the cart count to your theme. The number of items will be updated automatically as items are added to cart.
step 1 : Open your functions.php file of your active child theme (or theme) and add below code to it. which would display the number of items in shopping cart and their total amount in navigation menu.
When there is at least 2 item in the cart, nav bar will look this:
Add this in functions.php:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
}
add_filter('wp_nav_menu_items','sk_wcmenucart', 10, 2);
function sk_wcmenucart($menu, $args) {
// Check if WooCommerce is active and add a new item to a menu assigned to Primary Navigation Menu location
if ( !in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) || 'primary' !== $args->theme_location )
return $menu;
ob_start();
global $woocommerce;
$viewing_cart = __('View your shopping cart', 'your-theme-slug');
$start_shopping = __('Start shopping', 'your-theme-slug');
$cart_url = $woocommerce->cart->get_cart_url();
$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
$cart_contents_count = $woocommerce->cart->cart_contents_count;
$cart_contents = sprintf(_n('%d', '<span class="mycart_style">%d </span>', $cart_contents_count, 'your-theme-slug'), $cart_contents_count);
$cart_total = $woocommerce->cart->get_cart_total();
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// if ( $cart_contents_count > 0 ) {
if ($cart_contents_count == 0) {
$menu_item = '<li class="right"><a class="wcmenucart-contents" href="'. $shop_page_url .'" title="'. $start_shopping .'">';
} else {
$menu_item = '<li class="right mycart"><span class="carttxt">CART:</span><a class="wcmenucart-contents" href="'. $cart_url .'" title="'. $viewing_cart .'">';
}
$menu_item .= '<i class="fa fa-shopping-cart"></i> ';
$menu_item .= $cart_contents.' - '. $cart_total;
$menu_item .= '</a></li>';
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// }
echo $menu_item;
$social = ob_get_clean();
return $menu . $social;
}
If you would like to add the cart menu item to a custom menu assigned to Secondary Navigation Menu, change primary to secondary in line 7.
Step 2 : Add this css code in your style.css file of your active child theme (or theme) and Adjust as needed to fit nicely into your theme or You can also use your own css code for design cart button in your way.
.mycart{border: 1px dashed #000;padding: 0px 41px;}
.mycart .carttxt{position: absolute;top: 23px;left: 4px;}
.mycart a .fa-shopping-cart{position: absolute;top: -16px;color: red;font-size: 31px;left: 87px;}
.mycart a .woocommerce-Price-amount{position: absolute;top: 22px;left: 48px;}
.mycart a .mycart_style{position: absolute;top: -35px;left: 113px;border-radius: 17px;border: 1px dashed #000;background-color: #cccaca73;padding: 0 8px;}