Posted on Leave a comment

How To Hide Product Category In Woocommerce Product Page In 5 Minutes

On WooCommerce single product pages, you usually see the product’s categories displayed under the add to cart button, like this:
product category displayed under add to cart

As you can see from the picture, the category of this product is “Business PC”.

What if you want to hide that part? That’s what I’m going to show you right away.

How To Hide Product Category In WooCommerce Product Page In 5 Minutes

The method we are going to use to hide the category in WooCommerce product page is to get the CSS selector of the category and hide it using additional CSS rules, supported by most themes.

The first step would be getting the CSS selector of the category. Here is how you can do this.

Getting the CSS selector of product’s category

On your browser, preferably Chrome, right click on the category then click on Inspect:

select inpsect element

Now, you’ll see a window appears. Depends on your browser settings, you may see the window appear at the bottom, on the right or as a floating window. In my case, it appears at the bottom of the screen.

You should see the element highlighted in the new window:

get the css selector

As you can see, our category element has the class posted_in and it’s a child of a div which has product_meta as its class.

NOTICE: The class of these elements maybe different on your site since different themes may have different class name. Thus, make sure you replace the selectors here with the ones that match your own site.

If you know CSS, you’ll probably have no problem writing the selector for this element. In case you don’t know, the selector for the category element is:

.product_meta .posted_in

Now, it’s time to make this element disappear using the customizer.

Hide the category using additional CSS

Let’s go to Appearance->Customize->Additional CSS (This option usually appears at the bottom of the customize panel so you may need to scroll a bit) and enter the following code:

.product_meta .posted_in {
   display: none !important;;
}

Then hit publish.

Now, let’s view the site and sure enough, the category meta is gone:

woocommerce category meta is hidden

Conclusion

There you go! It’s the simplest method to hide the category meta in WooCommerce. There could be more methods involving entering some PHP code. I prefer using CSS since it’s quick, simple and I’m not a fan of modifying PHP code on live site.

Posted on 14 Comments

[Guide] Customize WooCommerce Shop Page With Page Builder (Elementor/Beaver…)

customize woocommerce shop page

In the previous post on the same topic, I showed you how to customize WooCommerce shop page using a template file. Though it works, many people find it hard to follow since they have to access files on the server. This post will show you another way, easier, friendlier for people who doesn’t want to mess up with code.

We are going to customize the shop page using page builders such as Elementor, Visual Composer, Beaver, Divi… or any page builder you have. You can completely change the layout, the designs, the type of products, number of products display on the shop page without writing any code yourself. I promise at the end of this post, you can start working on designing your WooCommerce shop page without any problem.

In case you got some problems, no worries. You can simply contact me or leave a comment below, I’ll get back to you.

Let’s get started!

How To Customize WooCommerce Shop Page Using Page Builders

The idea is very simple. Here are the steps:

  1. You will create a page that display your products with your favorite page builder
  2. You will set that page as your shop page

And that’s that! There isn’t a third step.

In case you want to watch a video tutorial instead, I’ve made one here:

If you are still with me, let’s dive in.

Step 1: Create a page listing your products with your page builder

I’m not going to show you how to use your page builder (Elementor, VC, Divi…) in this post since I assume that you have already know how to use them. I’m going to use Elementor. I’m going to create a page like this on my site:

create a new page to use as shop page in elementor

As you can see, I have a blank page. Let’s say I want to have three section on my shop page:

  1. Featured products
  2. Best selling products
  3. New arrival products

I’m going to create three headings first:

create the headings for the shop page

Now, I’m going to fill the products to this page. How can I do that?

Fill the products to the shop page using WooCommerce products shortcode

It’s time to use some shortcodes to display the products we want on the page. You can find the extensive list of WooCommerce shortcodes here

However, to include products, you only need to know these ones:

  1. [featured_products]: List featured products. If you don’t know what featured products are or want to know how to create featured products, I’ve made an extensive WooCommerce featured products tutorial here
  2. [best_selling_products]: List of your best sellers
  3. top_rated_products]: Top rated products
  4. [sale_products]: Products are on sales
  5. [recent_products]: New products
  6. [products]: This is the most powerful shortcode. If you don’t add any attributes, then it will list all the products on your store

You maybe eager to start adding the shortcodes to your page and you can. However, there are some very important things about the shortcodes attributes you may want to know first.

Set number of columns: How many columns do you want to use to display the products? The default number is 4, however, you can set any other number you like. For example, you want to display best selling products in 3 columns, you’ll use this shortcode[best_selling_products columns="3"]

Here is what it look like when I set 3 columns:

best selling products shortcode 3 columns woocommerce

 

Limit the number of products displayed: You may notice that though we have the products displayed in 3 columns, you possibly want to limit the number of products. For example, if I want to limit the number of products to only 9 (three rows), I’ll use this attribute:limit

So, the shortcode to display top 9 best selling products in 3 columns would be:

[best_selling_products limit="9" columns="3"]

Easy, right?

Specify the categories to get products from: You may want to have a section that display products from specific category(ies) only. In such case, you’ll use the category attribute. You are going to need the category’s slug to make this work. What is the category’s slug? Simple, go to Products->Categories, under the category, click on Quick Edit:

find category slug

You’ll see the category’s slug in the Slug field.

So, in this example, if I want to display all products in the category Business PC, I would use this:

[products category="business-pc"]

If I want to display products from Business PC and Laptop (given the slug of the Laptop category is laptop), I would use this shortcode:

[products category="business-pc, laptop"]

Now, you have all you need to start adding products to the new page. Here is what I have after adding the shortcodes:

final shop page created by page builder

I must admit, I’m not a good designer but from here, you can see that you can create a custom layout for your shop page.

Now, it’s time to make this page your official shop page.

Set the page as our new shop page

The first thing  you need to do know is to create a child theme to enter a bit of code. You can put the code right in the functions.php file of your current theme but that’s a bad practice. Future update of your theme can wipe out all your changes. If you need help creating child themes, I have a quick tutorial here on this matter.

Now, I assume that you have created your child theme. Let’s first grab the URL of the page you have just created, then go to Appearance->Theme Editor:

[Guide] Customize WooCommerce Shop Page With Page Builder (Elementor/Beaver...) 1

If you see any warning popup, just click on “I understand”.

Now, your interface might be different from what I have here:

paste the code in functions file to make it works

However, most of the time, you’ll see the “Theme Function” file on the right. Just click on that and paste the following code at the end of that file:

add_action('template_redirect', 'bc_010101_redirect_woo_pages');

function bc_010101_redirect_woo_pages()
{
 
 
 if (is_shop())
 {
  //don't remove the quotes(')
  wp_redirect('http://localhost/wordpress/my-shop-page/');
  exit;
 }
}

Make sure you replace your own URL inside wp_redirect.

Now, save the page and if you go to your original shop page, you’ll see the new page display.

Conclusion

As you can see, it is quite simple to customize WooCommerce shop page using page builder. There is a bit of code to enter, however, you don’t need to understand that code to make things work. One of the most important thing you need to do is to create a child theme to enter the code. It’s much safer than entering the code directly to the theme you currently use.

Posted on Leave a comment

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases 2

Shipping is not a simple matter, even for simple store. WooCommerce (the plugin) does a good job offering some basic shipping cost calculations such as free shipping, flat rate… However, if your shipping cost is based on weight or price or number of items or a mix of all those things, you will need a help from an additional plugin. In this post, I’m going to introduce you to a plugin called table rates shipping for WooCommerce. With this plugin, you can

  • Setup shipping cost based on cart’s weight
  • Calculate shipping cost based on number of items in cart
  • Setup shipping cost based on products’ price, line total and cart total

Let’s get started.

Download and install WooCommerce table rates shipping

As mentioned in the beginning of this post, you’ll need the plugin called WooCommerce table rates shipping to follow along.

Download table rate shipping plugin

After activating the plugin, when you go to add shipping method, you’ll see the table rates shipping method is added, along with WooCommerce’s default shipping methods (flat rate, free shipping and local pickup).

As you can see that table rates shipping is just another shipping method. That’s why:

  • It must exists inside a shipping zone.
  • You can have multiple table rate shipping method per shipping zone.

How to setup WooCommerce shipping by weight

Let’s learn how to add shipping by weight using WooCommerce table rates shipping. In this example, I’m going to setup shipping cost by weight for the shipping zone US. As the method’s name suggest, it only works with items that have weight.

Here are the scenarios we are going to cover

Scenario 1:

 Order’s weightShipping cost
1Less than 3kg$20
2From 3kg to 20kg$40
3More than 20kg$1 per kg

Scenario 2:

  • If the order’s weight is less than 10, offer free shipping
  • If the order’s weight is more than 10, charge $0.5 per kg

First of all, let’s add the table rates shipping method for our shipping zone.

Let’s go to WooCommerce->Settings->Shipping->Shipping zones:

edit shipping zone to add shipping method

Under United State, I’ll click on edit.

In the next screen, click on Add shipping method and select Table rates:

select table rate shipping as shipping method for zone

Then, you’ll see the table rates shipping added to the list of shipping methods. Currently, I have only one.

list of shipping methods

Hover the cursor on the word Table rate, you’ll see an Edit link. Click on that to start configure the options.

table rates shipping settings - general
table rates shipping settings - rates
table rates shipping settings - table

You’ll find the detailed explanation for each fields in this post .

Setup the rules for scenario 1

Here is the place we are going to work:

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases 3

As you can see, there isn’t any rule setup yet. The first column, Shipping class is visible if you have shipping classes setup. If you don’t have any shipping class (which is pretty normal), then you will not see this column.

Let’s review the shipping rules:

 Order’s weightShipping cost
1Less than 3kg$20
2From 3kg to 20kg$40
3More than 20kg$1 per kg

So, here is how we are going to set this up:

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases 4

Let me explain the rules. We have three rows here. They are the result of three times I clicked on Add Shipping Rate button. You can add as many rules as you like.

Let’s look at the first row, Shipping class is set to Any class. I select this option for the sake of simplicity. However, you can see that you can combine shipping class with table rates shipping to create very complex shipping rules.

On the condition column, I set it to weight. This is obvious since we are setting up weight based shipping cost.

On the row cost, I set the number 20. Since we are calculating the shipping fee per order. This amount will be applied to the whole order, not just a single line in cart.

Every other columns are left as default.

The second row is similar to the first one. The on difference is we set the number 40 for row cost and the weight range is from 3 to 20

The third row corresponds to our third rule,  I set the minimum weight is 20 and in kg cost column, I set the number 1 to match with the condition $1/kg.

Let’s make a test order to see if the rules work as we expect.

First, I’m going to order 3 CPUs, two Intel’s and one AMD’s. One Intel’s CPU weights 0.4kg and one AMD’s CPU weights 0.5kg. The total weight is 1.3kg.

As you can see, the shipping cost falls into the first tier (for order which has weight less than 3kg):

shipping cost for first tier

Now, let’s add some more items to make the weight of the order more than 3 but less than 20kg. I’m going to add a desktop to the cart. The desktop weights 6kg so now, the total weight is 7.3kg. As you can see, the shipping cost has changed to reflect the change in shipping tier:

shipping cost for second tier

Finally, let’s add some more items to make the weight of our cart more than 20kg. I’m going to add three more desktops. That’s 18kg more and makes our cart now weights 25.3kg (18 + 7.3). As you can see, the shipping cost is now $25.3:

shipping cost based on cart weight by kg

Everything worked as we expected. That’s great!

Setup the rules for scenario 2

Now you know how to setup the rules for scenario 1, it’s super easy to setup the rules for scenario 2. Let’s review the requirements of scenario 2:

  • If the order’s weight is less than 10, offer free shipping
  • If the order’s weight is more than 10, charge $0.5 per kg

There are two rules you need to setup in this case:

table rates shipping rule for scenario 2

You can see that I added a label for the first row called Free shipping. This label will up when the rule in this row is applied.

Now, if I look at the cart (which still weights 25.3 kg), the shipping cost would be:

shipping cost for scenario 2

That’s 25.3/2 = 12.65

If I remove the desktops to make the weight less than 10, the shipping cost should be $0.

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases 5

I hope you see the power of WooCommerce table rates shipping plugin in setting up weight-based shipping cost. However, that’s not the only capability of this plugin. You can also setup shipping cost based on items count and items’ price.

Using table rates shipping to setup shipping cost based on number of items

There are times you want to calculate the shipping cost based on the number of items in cart. One of the most common scenarios is you want to encourage the customers to buy a larger quantity. In such case, you may want to offer free shipping for orders that meet a certain amount of items in cart. Let’s discuss the following scenarios:

Scenario 1:

 Items in cartShipping cost
1Less than or equal 10$10
2From 11 upFree shipping

Scenario 2:

 Items in cartShipping cost
1Less than 10$1 per item
2From 11 up0.5$ per item

In scenario 2, we will also set a maximum shipping cost at $100. So, when the customers order more than 200 items, the shipping cost is still $100.

Rules for scenario 1: Free shipping when cart count reaches a certain amount

From the rules of the scenario, you can see that we need to set two rules. The first one is to set a flat shipping fee at $10 for orders than have up to 10 items. The second rule would be offer free shipping for orders that have more than 10 items. Here are the rules set in table rates shipping:

setting up table rates shipping rule for free shipping when cart count reaches certain amount

As you can see that, on both rows, I set the condition to Item count.

On the first row, I set the max items count is 10 and the row cost is $10 based on the requirement of the first rule. I also set a label named Flat rate so the customers can easily understand the kind of shipping fee is applied to their order.

On the second row, I only need to set the min item count to 11 and the label to free shipping.

Let’s check out cart.

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases 6

Since I have only 3 items on my cart, the flat rate £10 is applied. Now, let’s increase the order of AMD Ryzen to 8 more. That’ll make our cart has 11 items. The shipping fee now should be 0 as the Free shipping condition is met:

free shipping when cart amount passes 10 items

Easy enough? Let’s discuss scenario 2.

Rules for scenario 2: Shipping cost per items changes when cart count reaches a certain amount

Scenario 2 is a bit different from scenario 1 since we don’t offer free shipping. Instead, we reduce the shipping cost per item from $1 to 0.5 when our customers order more than 10 items. In addition, there is a maximum shipping cost applied.

Let’s find out how to setup the shipping fee for this scenario.

First of all, we need to set the maximum shipping cost at $100. This step is quite simple. Let’s go up the screen and you’ll see a field called “Maximum shipping cost”. Enter 100 in that field:

setting up maximum shipping fee

Now, let’s go down and setup the rules:

setting shipping cost per item using table rates shipping

I hope the rules are visual enough so you’ll have no problem understanding them.

On the first row, I set the max item is 10 and item cost is one. That means for orders that have up to 10 items, the shipping cost per item is $1. I also set the label to $1/item so the customers will have an idea what kind of shipping fee is applied on their order.

On the second row, I set the min number to 11, max number to 200 and the label to $0.5/item.

Technically, I don’t have to add the third row since we already have the maximum shipping cost at $100. However, if I don’t set the third row, orders that have more than 200 items still have the label $0.5/item, which is very confusing to customers.

Test the rules on the shopping cart

Here, I have 9 items in my cart, the first rule is applied. The shipping cost is £9. Easy to understand, right?

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases 7

Now, let’s increase the number of the first row to 173 items. That makes our cart 180 items in total. The shipping cost would be £90:

shipping cost discount on large item order

Finally, let’s make the cart count more than 200 items. I’m going to set the total order of the AMD CPU to 30. That’ll make our cart have 203 items. Due to our settings, the shipping cost should be £100 (the maximum amount):

Ultimate WooCommerce Table Rates Shipping Tutorial & Use Cases 8

As you can see, things work as we expected and that’s great.

Besides offering the ability to set the shipping cost based on weight, cart count, table rates shipping plugin also let you set the shipping cost based on cart or line total. I think you have no problem understanding calculating shipping cost based on cart total. However, what is line total? Let’s find out in the next section.

Using WooCommerce table rates shipping to set shipping cost based on items’ price, line total, cart total

First, let’s clear some terminologies.

Item’s price: the price of a particular item.

Line total: Let’s consider the following screenshot:

cart lines

This order has two lines. Normally, one product will occupy one line. The first line’s total is £48,440 and the second line total is £11,010.

Cart total: This term is simple enough. This is the total amount of the order and equals to the sum of all line total.

Now, let’s consider some scenarios:

Scenario 1: Setting up shipping fee based on cart’s total

 Cart totalShipping cost
1Up to £10,0005%
2More than £10,0002%
3Max shipping cost£700

Scenario 2: Shipping cost based on products’ price

Only charge a 2% shipping fee for products that have price less than £100.

Scenario 3: Shipping cost calculated based on line’s total

Only charge a 5% shipping fee for lines that have total less than £30,000.

Let’s setup the rules for each scenario using table rates shipping.

Scenario 1: Shipping cost is a percentage of cart total

First thing first, we need to setup the maximum shipping cost at £700. You should be able to do this since we have done it previously with item based scenario.

set maximum shipping cost

Next, set the calculation type to Per order since we calculate the shipping fee based on cart total:

set calculation type

Now, let’s set the rules:

set shipping cost based on cart total

The first row, I set the condition to price. The word “price” may sound confusing since we are talking about cart total. However, I think there aren’t many better choice for the developer since this name will also represent the price of a product if we set the calculation type to “per item”.

I also set the % cost to 5. This means the shipping cost will equal to 5% of the total order.

On the second row, I set the range from 10,000 to 35,000. Why 35,000? Since our max shipping cost is £700 (equals to 35,000 * 2%), setting 35,000 as the upper bound of the second line makes senses.

On the third row, I set the min to 35,000 and the row cost to 700. Since we have already set the maximum shipping cost to £700 previously, this row is not technically necessary. However, it will help the customers understand what kind of shipping cost is applied to their order.

Now, let’s go and check our cart. My cart total is £7,340. It’s less than 10,000 so the shipping cost should be equal 5% of cart total:

shipping cost based on cart total tier 1

Now, let’s add some more items to make the cart total pass £10,000. Let’s add 10 more items:

shipping cost discount on large order

Sure enough, the second tier is applied. The shipping cost is now only 2% of cart total.

Finally, let’s make the cart total exceed £35,000. I’m going to add 100 items more to the cart:

apply maximum shipping cost when cart total reached certain amount

As you can see, the flat rate £700 is applied as we expected.

Scenario 2: Charge a 2% shipping fee per item that has price less than £100

In this case, we are going to set the shipping fee based on product’s price. Specifically, the charge is 2% for products that cost less than £100. For products that cost more than that, we offer free shipping.

I’m not going to cover the maximum fee in this case since you know how to do that already. Let’s go straight to calculation type and set it to per item:

set calculation type to per item

Now, let’s set the rule:

set shipping cost based on products price

The rules are quite simple. On the first row, I set the % cost to 2 and the Max price of the item is 100. The second row states that for items that cost more than 100, there will be no shipping fee.

Let’s check our cart to see the rules in action:

shipping cost based on a percentage of products price

The calculation is not shown explicitly here. However, you can see that the cost for a single Samsung SSD is £46, which is less than £100 while the cost for an AMD CPU is more than £100. So, only the SSD price is used to calculate the shipping cost.

Sure enough, £4,600 * 2% = £92.

Scenario 3: Calculate shipping cost based on line total

Let’s discuss the final scenario. What if you want to charge a 5% fee based on lines that cost less than £30,000 only? Lines that cost more than that are eligible for free shipping.

Setting up the rules for this scenario is quite simple. First, we need to change the calculation type to “Calculate rates per line item”:

calculate rate per line item
setting up shipping cost rules based on line total

Now, let’s set the rules:

On the first line, I set the condition to Price, the Max value to 30,000 (you only see 3,000 in the screenshot because of the field to enter the number is quite narrow). The % cost is set to 5%.

The second is responsible for making lines that cost more than 30,000 eligible for free shipping. I only need to set the Condition to Price and the min amount is 30,000.

Let’s inspect this cart:

shipping fee based on line total

As you can see that, we have two lines that cost less than £30,000, that’s the second and third line. As the rules dictate, the shipping cost equals to 5% of the sum of these two lines:

Shipping cost = 5% * (4,600 + 7,447) = 602.35

That’s the number we see in the shipping cost field of the cart.

Conclusion

Table rates shipping plugin for WooCommerce is a very powerful tool for stores that need flexible, complex shipping calculation. You can set the shipping cost based on cart total, number of items in cart, cart’s weight or even single product’s price. Hopefully the tutorial and the specific scenarios presented in this post is helpful to you. If you need a specific scenario that you have trouble setting up, please don’t hesitate to write in the comment section below.

Posted on 13 Comments

[Tutorial] WooCommerce Customers Enter Price Amount (Name Your Price)

[Tutorial] WooCommerce Customers Enter Price Amount (Name Your Price) 9

WooCommerce name your price is not a default supported feature. In fact, WooCommerce only has native support for three types of product:

  • Simple product
  • Variable product
  • Grouped product

These products all have the price defined by you, the store owner.

What if you want the customer to define the price at the time of the purchase. One good example is donation. You don’t want to enter a fixed amount first since the donor may want to donate less or more than the amount you specified.

Another good example is selling service. You want to use a simple product for all clients. However, you charge different clients with different amount (based on the amount of time, work…) The product in this case should not have a pre-defined price.

OK, no matter what reason you have, if you come to this page, you want to create a product that let the customers name the price. Let’s find out how to do that.

Download the required plugin that enable WooCommerce name your price feature

To enable this feature, we are going to need a plugin. It’s a free plugin on WordPress.org. In the free version, you can create only one product that have this flexible pricing. Pro version has no limit on this matter.

You can download the plugin here

You can install the plugin by uploading the zip file or install it in the dashboard. I would recommend you install the plugin via your site’s dashboard since it’s quicker.

search and install name your price plugin in wordpress dashboard

Make sure you activate the plugin before continuing to the next step.

Create a product and enable the name your price feature

Let’s go to Products->Add new to create a new product. You’ll a familiar interface if you created a WooCommerce product before. However, if you scroll down a bit, you’ll see there is a section called Product Open Pricing

name your price pricing options

You can see all the options available:

  1. Enabled: make sure you set this field to yes.
  2. Default price: You can enter your default price here or leave 0 as default
  3. Min price: Enter a valid amount here if you want to set a min price, otherwise, leave it as default or set to 0
  4. Max price: You can set a max price here. Similar to min price, you can leave it as default for no max price limit

As usual, you may want to enter the descriptions and add images for the product. When you are done, let’s publish the product.

Here is what I created:

name your price product result

Let’s enter an amount, say $500 and click on buy now. When I view the cart, I see the product:

customer enter product price in cart

The customer then can buy the same product with different amount. Let’s say $900. Here is the cart:

multiple product with custom price in cart

As you can see, the same service can be purchased multiple times by the same customer with different amount.

Conclusion

The plugin does a great job enabling the feature that let customers enter their own amount. Hopefully it helps you achieve what you want on your store. What do you think about this plugin? How can it be improved? What feature you want to include? Please let me know. I’m not the author of this plugin but I can add some additional features to this.

Posted on Leave a comment

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:

BC Menu Bar Cart Icon Plugin Tutorial 10

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.