BC Menu Bar Cart Icon Plugin Tutorial

In case you prefer to watch a video, I’ve made one here. It’s about 6 minutes long so you can get all the details quickly:

The purpose of BC Menu Bar Cart Icon

The sole purpose of this plugin is to help you: WooCommerce users to add a cart icon to the menu or any other locations (with the help of shortcode). When your customers see that icon, they will know

  • How many items are in their carts
  • How much is in their cart

In the pro version, when they hover or click on the cart icon (you can define the action), they’ll see the list of items and their quantity.

Sounds good? Let’s find out how to create one icon like that.

Here are the steps to create and icon and stick it to your menu

  1. Create a menu (if you don’t know how, click here for the step by step tutorial to create a menu and set its location in WordPress)
  2. Go to BC Menu Bar Cart and create a design.
  3. Link the design to the menu.

I’ll skip step 1 since I’ve covered it in a different post. Let’s create a design in BC menu bar cart and link it to the menu.

How to create a design in BC Menu Bar Cart Icon plugin

First go to the bc menu cart dashboard by click on its menu item here:

You’ll see the interface like so:

bc menu cart interface

If you use the free version, you will not see the green notification since I’m using the pro version.

Click on Create new cart design tab to start creating the design:

create menu cart interface

On the left is the place where all the design you created reside. On the right are the options you can set to the designs. If this is the first time you go to this page, you’ll probably see to item under “Designs you created”. That’s OK. Now, let’s click on Create new design button (Blue button).

I’ll go through every sections and explain every options for you to create the design.

design title section

This is where you put the title for the design. You can put anything here. It’ll appear under “Designs you created” section.

cart display section

The first checkbox, if checked will show the cart icon all the times, even when the cart is empty. If this is your desired behavior, then check this box.

The second checkbox is to display the cart icon. As you’ll see in the next section, there are layouts that contain cart icon. You can decide to hide or show it here. Check the checkbox if you want to show the cart icon.

cart layout section

Select cart layout: Here you have 6 layouts to choose from. Select the one that you think it’s the best match for your site. If there are layouts that isn’t in this list, please let me know and I’ll add it for you.

“My Cart” replacement is where you can put the text to display instead of “My Cart” as you see in the layout 3 and 4.

Cart float: As the cart display in the menu, it is another list item as other menu items. You can set it to float left or right.

Now, let’s click on the design settings tab to customize the cart icon further:

cart icon design section

Here, you can customize the cart icon further:

Cart icon type: In pro version, you can either choose a icon font or an image to be the cart icon. However, in free version, you are locked to the font icon.

Select icon for your cart: Here, you can select the icon you want to display. If you select image as cart icon in the section above, make sure to select your image by clicking on the select button.

Icon width, Icon height, Icon font size: The names of those fields are quite self-explanatory. If you use icon font, make sure to set Icon font size to adjust the size of the icon to your liking.

Cart icon color: If you use icon font, you can set the color of the cart icon here. It’s a feature of the pro version though.

cart count circle section

If you choose the cart layout 1 and 5, you’ll see there is a small circle that shows the number of items in cart. Here is the section you can customize that circle.

Item count circle background color: Background color of the circle

Item count circle text color: Text color of the number

Item count circle width, height, font size: These are for the width, height and the font size of the circle count

on item action behavior section

This section lets you define the behavior of the cart icon when your customers click or hover over it.

There are three actions:

  • Go to cart: browser will open the cart page
  • Do nothing
  • Show cart items list: Show the list of items in cart

cart list design section

Here you can select various designs for the item list (the cart list that appears when visitors hover or click on the cart icon). Currently, there is only one design so it’s selected by default.

cart list close button section

The cart list has a close button for customer to close it. Here it is:

bc menu cart list

This section lets you select various close buttons and its font size.

product image styling section

This section helps you specify the display of product image in the cart list. You can select to show and hide the images and their width and height here.

product removal button section

This section is similar to the above section about the cart list close button. Before each product in the cart list, there is a close button. This is the section you can work to customize that button.

other cart list section

This section is where you can customize the display of the cart list further (the list that appears when you hover the cursor over the cart icon).

customize cart list

Cart list header text: Type the text you want to display instead of “Your cart” in position 1 here

Cart list subtotal text: What do you want to use instead of “Subtotal” in position 2, put it here

Go to cart button: Customize the button at position 3

Go to checkout button: Customize the button at position 4

Conclusion

I hope the tutorial has been helpful. Hopefully you can start using the plugin now. If you have questions, please let me know.

 

Want One More WooCommerce Secrets?

I never spam, only quality info that benefits you!

The Ultimate Guide To WordPress Navigation Menu

A navigation menu is not something alien to webmasters today. It’s a must have for any website. In WordPress, menu are created automatically for you the time you set up your site. However, do you know that you can create your own menu, set your own styles for the menu? Sounds interesting? Let’s get started.

How to create a navigation menu in WordPress

Create a menu is super easy in WordPress. Simply go to Appearance->Menus:

menu dashboard in wordpress with no menu yet

As you can see, I have no menu created yet. Let’s create one.

In the Menu name box, enter the name of the menu. It can be anything. As I’m going to create a primary navigation menu, I’ll call it primary nav.

Now, click on create menu.

create a blank menu

You can see that we have a new menu called primary nav but there isn’t any item on it yet. Let’s add some.

How to add your WordPress pages to the menu

On the left, you’ll see the list of items you can add to the menu:

items you can add to the navigation menu

Click on Pages, for example, you’ll see the list of pages of your site:

list of pages to add to navigation menu

To add any item to the navigation menu, check the checkbox in front of that item and click Add to menu.

How to add custom links to the menu

There are times you may want to add external links to the menu (pages that are not on your site). It’s super easy to add such links to the menu. Let’s click on custom links:

add custom link in wordpress menu

As you can see, there are two boxes for you to enter the details. Let’s enter the URL you want to point to in the URL box and the text you want to display in the Link Text box.

For example, I add a link to Google with the link text “Search Engine”. It’ll look like this:

adding a custom link

After clicking on Add to menu, it appears on my menu:

custom link on menu

Now, let’s add some other items to the menu to finish the creation of our menu. Make sure you click on the “Save Menu” button to save all your changes. Here is the final version of my menu:

menu with items

How to change the order of menu items

As you notice, the order of items is the order you add them to the menu. First added items appear first and so on. So, does that mean you need to delete and re-add the items if you wan to change the order? Fortunately, not.

You can drag the items up and down to change the order they appear in the menu:

drag to re-order items in wordpress menu

As you drag, you can see that there is a dotted box appear. If you release the mouse, the item you are dragging will fit into that dotted box.

How to create menu hierarchy (Create child menu items)

There are times you want to create a menu item that contains other items (children). You can do this by click and drag too. For example, I want to make Cart item is a child of Shop item. I’ll click and drag the cart under the shop (still hold the mouse) and then drag a little bit to the right:

drag and create child in wordpress menu

As you can see, the dotted box is aligned a bit to the right of the shop item. That means if you release the mouse now, the cart will be a child of Shop.

You can even drag an item under the Cart item and make that item a child of Cart. There is no limit of the number of levels you can create in your menu.

Make sure you click on Save Menu to save your changes.

Why don’t I see the menu

If I view my site now, I don’t see the menu I’ve just created. Instead, I may see no menu or the default menu that WordPress creates for me (consisted of all pages in my site). So, how to make the menu   appears at the location(s) I wanted?

It’s time to talk about menu locations.

What are menu locations

Menu locations are locations that you can display the menu and is defined by your theme.

That means if you use a different theme from mine, you may have less or more locations to put your menu. In addition, the locations may be different.

Now, still in Appearance->Menus scree, click on Manage Locations:

menu locations in wordpress

As you can see, my theme offers two menu locations, one is Primary menu, the other is footer menu.

Now, each location has a select box to let you select the menu you want to display at that location. The menu I’ve created in the previous step is available in these select box.

Now let’s select it for the Primary Menu location:

select menu for location

Click on Save changes and view the site:

menu appears at correct position

Sure enough, we have the menu at the right place and the Cart item is the child of the Shop item.

Can I have the menu at this place?

Often times, you may need to display a navigation at places that isn’t support by default by the theme. One example is to display the menu inside page, post… If this is what you want, you may need to use a plugin to achieve the result.

There are plugins that available in the WordPress repo. However, they are not supported for quite a long time so it’s quite risky to use them. If you have this need, please let me know and I’ll create one. It should be very simple.

Conclusion

Hopefully you’ll find working with WordPress menu easier now. If you have any suggestions/questions, please let me know.