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:
- Check if you have a menu created
- Check the location of your menu
- Install and activate WooCommerce Menubar cart plugin
- 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:
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:
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:
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.
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.
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
Here are the most important settings:
- 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.
- 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.
- Always display cart, even if it’s empty: This option is up to you. However, I check this on my site.
- 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:
Now our site has the cart icon with the cart total.
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:
- It’s simple, easy to use
- The cart total, items updated when customers add products to cart or remove products from cart
Things I think it can improve:
- There isn’t much design choice, even in the pro version
- 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.