How To Quickly Add Cart Icon On Your WooCommerce Site Navigation Bar

Nowadays, almost all WooCommerce theme has the support for the cart icon on menu. However, what if your theme doesn’t support WooCommerce extensively? What if it lacks the cart icon on the navigation menu? Don’t worry, you don’t have to change your theme. There is a plugin for that.

Here are the steps you need to do to get the cart icon on your navigation menu:

  1. Check if you have a menu created
  2. Check the location of your menu
  3. Install and activate  WooCommerce Menubar cart plugin
  4. Add the cart icon to your navigation bar

Without further ado, let’s get started.

Check if you have a menu created

Creating a menu is one of the tasks that you do first when creating your site. However, speaking from my personal experience, many times I use the default menu that WordPress provides, that is the list of pages on my site. To be honest, sometimes it’s all I need. However, as we are going to display the cart icon on our navigation bar, we need to have at least one menu.

So, let’s go to Apperance->Menus:

no menu available in wordpress

As you can see, I don’t have a menu on this site. So, let’s create one.

I’m going to quickly create a menu here so we can get on display the cart icon on my site’s navigation bar. So, I’ll enter the menu name and click on Create Menu:

create a menu in wordpress

Now I have a menu. You may think that we are done here with the menu. However, there are a few things we need to do. First, it’s to add some items to the menu. I’m going to add the Cart, Shop and Checkout page to the menu:

add woocommerce page to the navigation menu

After clicking on Add to menu, I got my pages appears on the menu. Let’s click on Save menu to save the changes.

The last step is to set this menu to the top navigation position. Let’s click on Manage Locations. The number of navigation menu locations depends on the theme. As I’m using StoreFront, I have three locations as shown below.

available navigation locations on wordpress theme

I want to set the menu to the Primary Menu location only. So I click on Select a Menu and select the menu I’ve just created. I click on Save changes when all is done.

set menu location in wordpress

Now, we are done with the menu. Let’s install the plugin to display the cart icon on the navigation menu of our site.

Install and activate  WooCommerce Menubar cart plugin

Now, it’s the to install the plugin I mentioned in the beginning of this post. It’s a free plugin on WordPress.org. You can download it from here

After install and activate the plugin, let’s go to its settings to familiarize yourself with its options. You can access its settings under WooCommerce-> Menu cart setup

woocommerce menu cart settings

Here are the most important settings:

  1. Select the menu(s) in which your want to display the Menu cart: Let’s select the menu we have created. As you can see, you can display the cart icon on three menus. However, since we are using the free version. There is one location is available.
  2. Hide theme shopping cart icon: If you theme has its own cart icon, you should hide it when using this plugin. The reason is obvious, you don’t want to display two cart icons on your menu bar to confuse your customers.
  3. Always display cart, even if it’s empty: This option is up to you. However, I check this on my site.
  4. Display shopping cart icon: Whether to display the cart icon or not. I personally enable this by default

Other options are grey out since we are using the free version. Let’s click on the save changes button at the bottom of the settings page and visit our site:

cart icon with totals display on the site

Now our site has the cart icon with the cart total.

Conclusion

As you can see, adding cart icon to your navigation bar is easy with the help of this plugin. There are things I like about this plugin:

  1. It’s simple, easy to use
  2. The cart total, items updated when customers add products to cart or remove products from cart

Things I think it can improve:

  1. There isn’t much design choice, even in the pro version
  2. When I hover my cursor over the cart, there is no extra details provided. Normally, when customers hover the cursor over the cart, there will be a drop down showing all the items in cart and an option to go to the checkout page or cart page

Hopefully you find this post and the plugin useful. If you have questions, please leave in the comment section below.