How to Add WooCommerce Shopping Cart Icon In Menu

Are you looking for a quick and easy way to add a WooCommerce cart icon to the menu? In this post, we will give you a solution to this problem. However, you need some coding skills to implement this solution.

Table of Contents

When a customer comes to your store, naturally, you want to give them a personalized shopping experience. This can encourage repeat purchases from loyal customers. There are many ways to do this in WooCommerce. One of these ways is to add something like a shopping cart icon in the primary menu.

Having a cart ion in the menu gives site users the ability to see their cart items and totals from any area. They do not have to click on the cart link to view their items and totals on another page.

If you do a quick search, many plugins provide you with a solution to this problem. However, plugins will bloat your site, which will negatively affect your site’s loading speed. This is why we decided to create this post to provide you with the best solution.

WooCommerce Shopping Cart Icon In Menu

We will share a custom code snippet in today’s buying guide to add a shopping cart icon in the primary menu. This is a great way to personalize your customers’ shopping experience because it gives them an easier time with navigation.

Before you proceed, we recommend creating or installing a child theme. This will ensure that the changes are not lost during an update.

Let us get right into it.

Steps to Add Cart Icon In Navigation Menu

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to add a cart icon on the menu.
Add the following code to the php file:

[php] //* Make Font Awesome available
add_action( ‘wp_enqueue_scripts’, ‘njengah_font_awesome’ );
function njengah_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css’ );
}
/**
* Place a cart icon with the number of items and total cost in the menu bar.
*
* Source: http://wordpress.org/plugins/woocommerce-menu-bar-cart/
*/
add_filter(‘wp_nav_menu_items’,’njengah_wcmenucart’, 10, 2);
function njengah_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 item’, ‘%d items’, $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"><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;
}

[/php]

This is the outcome:

Wrapping Up

In this post, we have shared a custom code snippet we made for adding the cart icon in the primary menu. If you want to add the cart menu item to a custom menu assigned to the Secondary Navigation Menu, change primarily to secondary in line 21.

Alternatively, if you want the cart menu to appear only when there is at least 1 item in the cart, then uncomment lines 34 and 46.

We hope that this post helped you get a solution to your problem.

Editorial Staff

How to Add WooCommerce Shopping Cart Icon In Menu

WooCommerce Shopping Cart Icon In Menu

Steps to Add Cart Icon In Navigation Menu

Wrapping Up

Similar Articles

Related