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!

How To Enable Search Products By SKU, Tags, Categories In WooCommerce

The product search function comes with WooCommerce is often enough for most stores. When you enter a search term in the WooCommerce default search box, if the search engine finds a text match in title or in content, the result will return.

However, what if you want to search products by SKU, tags or catetgories? With WooCommerce default search function, you are out of luck.

The good news is, there is a good plugin that let you add SKU, tags, categories to the product search. It works with most themes too.

So,  how to add the new search power to your site? Let’s find out.

Step 1: Install Advanced Woo Search

The first step is to install a plugin called Advanced Woo Search from WordPress.org repository. You can download it here.

The other method to install this plugin is to search for Advanced Woo Search from your Plugins->Add new panel. At the time of this writing, it’s at the #1 position:

searching for advanced woo search in plugins add new

After installing and activating the plugin, you’ll see its menu appears on the left:

advanced woo search menu item

Step 2: Configure Advanced Woo Search’s options to enable advanced products search on your site

click on that and we’ll get to the main configuration screen:
advanced woo search options first screen

Here are the most important settings you need to pay attention to:

1. Re-index table: You need to click on this, wait for a while for the process to complete

index products for advanced search

2. Clear cache: As you first use the plugin, this button doesn’t hold much importance. However, it’ll be useful later.

3. Seamless integration: I would recommend set this option to On simply because it will enable the search functions for the existing WooCommerce search box. However, some themes may implement their own search functions so this is not guaranteed to work on all themes.

4. Cache results: Caching will make the search faster if the same term is searched over and over.

5. Sync index table: This option will update the index every time your products are updated. This will help bring fresh results. However, if you notice your site’s performance decrease, you should leave this off.

6. Search in: This is the most important feature of this plugin. It enables you to search in SKU, category, tags (fields that are not supported in WooCommerce’s default search function). You can even exclude title, content, excerpt from the search field if you want. However, I don’t see much sense in doing so:

add fields to search when searching for products

7. Show out of stock: This is self-explanatory. Do you want to show out of stock items? If yes, select show.

8. Stop words list: Stop words are words that have little to no meaning and should be exclude from search. You can add or delete words from this list. Make sure to re-index (1.) after changing the text in this box.

9. Do you want to use Google Analytics to track search? If yes, click On. However, you need to setup your Analytics account if you select On for this option.

Now, you are done with 90% of the work. Click on save changes to save your options.

At this point, you can go ahead and try the search function on your site. If you choose seamless integration, you could see the result right away. Let me demonstrate:

Before I have the Advanced Woo search’s seamless integration enabled. I couldn’t search for SKU. For example, I have a product that has SKU is SNK111. Without seamless integration, I couldn’t find the product:

woocommerce default search failed on sku search

Now, with the plugin Advanced Woo Search enabled and seamless integration On, I can search for products with SKU:

search successful with advanced woo search

The plugins does provide other tabs for users to customize the search function further and I encourage you to try those tabs out. The options are very straightforward and easy to understand.

Step 3: Add the Advanced Woo Search widget to your sidebars so your customers can use the advanced search option

If you have used WordPress for a few weeks, I think you don’t have a problem adding widgets to the website’s sidebar. In case you don’t know, let’s go to Appearance->Widgets:

Simply drag the AWS widget to the position on the sidebar you want to show the search box and click on Save. You now have a search  box that is way more powerful than WooCommerce’s default.

 

Conclusion

As you can see, WooCommerce’s default search function stop at searching through text in title and content only. If you want to search a product by tags, by categories or by SKU, you need plugins like Advanced Woo Search. As a free plugin, it allows you to extend the search function, add stop words (words to ignore) and custom design your search box. That’s is great and I think it’s enough for most stores. If you need for more features, consider upgrade to the pro version. (I have no affiliation with the author).

Want One More WooCommerce Secrets?

I never spam, only quality info that benefits you!