Pre-order products are not something strange to us. We see them all the time. For example, game producers usually let people order their games before the release date.
The main benefit of pre-order products is to get some funding even when the product is not available. For example, you may need a bit of capital upfront to develop the product. Another benefit is to see how much your customers want the product you are making (stocking…) Whatever the reason, pre-order products can be a great option for your store.
How to create pre-order products in WooCommerce
WooCommerce itself doesn’t support pre-orders by default. However, there are many plugins available to help you accomplish this. I’ve tried some and found the one from WooCommerce store itself is the easiest to use. You can get it below to get started.
Now I assume that you have WooCommerce Pre-Orders plugin installed and activated. Let’s create a product that enable your customers to pre-order it.
Now, go to Products->Add new and scroll down to product data area, you’ll see there is a new tab called pre-orders:
The details of that tab is quite simple but enough for your to enable a product to be pre-orderable (That’s my made-up word)
I’ll explain the fields briefly since they are straightforward enough:
Enable pre-orders: This is obvious. If you want to enable pre order for the current product, check this box
Availability Date/Time: The date, time that this product is available for the customer to use. It should be the day you deliver the product to your customer
Pre-order Fee: Do you want to charge an EXTRA fee for this pre-oder. Note that this fee will not be deducted from the product price. Most products I see on the market don’t charge a pre-order fee.
When to charge: You can either charge now or charge when the product is shipped to the customer. Normally, stores will charge upfront. However, if you don’t need cash upfront, you can choose to charge later (upon release)
Now let’s quickly fill some details to make a valid pre-order enabled product.
As you can see that, the test product is a simple product that has regular price at $60 and sale price $45. Let’s make a test order.
Making a test order on pre-order product
Let’s click on the pre-order now button and walk through the checkout flow. Note that if your customer has other products in cart, those products are removed since pre-order products must be order separately.
Let’s go to the cart page. You’ll notice that other than an available notice right below the product name, there isn’t any difference from a cart page of normal products:
Let’s finish the checkout. As the admin of the site, you’ll see the pre-order appears in WooCommerce->Pre-orders:
Some cautions
Now you see that creating pre-orders products in WooCommerce is quite simple. However, as I mentioned above, pre-order products must be ordered separately. That means you can’t have two pre-order products in one cart.
You may say that you can use grouped products to group multiple products together. That doesn’t work too.
The only option as I know now is to create a product bundle (you will need another plugin from WooCommerce :O). However, using product bundle doesn’t bring much flexibility. Your customer still can’t order two or more random pre-order products together.
Conclusion
As you can see, with the help of WooCommerce pre-orders plugin, you can create pre-order product quite easily. However, this plugin works best if you only have one product in store (think about a video game that has its own domain) or a store that people will buy products separately. If your customers usually order multiple products including “buy it now” products, this product may not be your choice.
By default, WooCommerce products have fixed price. That means if you want to change the price of a particular product, you need to login and edit the product price. This is where the idea of WooCommerce dynamic product pricing came from. With dynamic pricing, you can set rules so you can offer some flexible pricing structure to your product. Take these cases for example:
You want to encourage your customers to buy more products from your store. For example, if the customer buy one product A they will get another item for free (it doesn’t need to be buy one get one, you can set the rule to buy X get Y and they don’t have to be the same products. For example, you want to create a promotion program that if a customer buy a jacket, they will get a belt for free or 50% discount).
You want to reward customers with large purchase. If they order more than $200 (but less that $300), you’ll give then 10% discount. If they order more than $300, you’ll give them 20% discount.. and so on.
You have variable products and only want to offer discount on a particular variation.
Give the customer discount based on number of product they purchase. For example, buy 10 get 10% discounts, buy 30 get 15% discounts…
Let’s discuss each case and find out you can achieve that with WooCommerce dynamic pricing.
Get WooCommerce dynamic product pricing plugin
To follow along, you need to have WooCommerce dynamic product pricing plugin from WooCommerce.com. You can get it following this link.
Now, let’s go through each case and find out how to do that.
Case one: The classic buy one get one (BOGO)
As the name suggests, you want to give the customers a reward for purchasing a particular product. For example, I have an electronic store that sell smartphones and smartwatches. I want to create a rule that:
If the customers purchase two phones, I’ll give a smartwatch for free.
You can apply this rule to create many kind of creative incentive to encourage your customers to buy more from your store. Here are some examples:
Buy one (any number here) shirt, get 50% off socks
Buy 2 items, the next item is free…
OK, let’s get back to our example. Here is the list of all products on my store:
As you can see, I have one smartphone and three smartwatches. In this example, the rule I’m going to create says: For customers who buy 2 ZTE phones, I’ll give one IYOU smartwatch for free.
Now, let’s go and edit the IYOU watch. Let’s scroll down to the product data section, you’ll see there is a new tab called Dynamic Pricing. Click on that at set the options as following:
Here is the quick explanation of each fields in the picture:
Applies to: This rule applies to everyone. There are two more options, which are Guest and Specific Role. That means you can apply this rule to customers with specific role only. It’s a good option to create a reward to specific group of customers.
Quantity based on: This is the base to calculate the discount. As the rule I mentioned above said: “buy two smartphones will get one smartwatch for free” so count the quantity based on Category and the field #3, I set the category to smartphone.
Product/Variation: You can select to give a specific variation of this product as a reward (if the current product is a variable product).
Rule process mode: There are two modes: Bulk and Special Offer. For buy X get Y free, we are going to use Special Offer.
Date: You can specify the date range that this offer is valid.
Finally, the rule. As you can see, I set the purchase number to 2, the receive number to 1, percentage discount to 100. That means if the customers buy two products from the category I specified in field #3, they will get one product (the one that we are editing) with 100% discount. The repeating is currently set to No. If it is set to yes, that means the customers can buy 4 smartphones and get 2 smartwatches, 6 smartphones and get 3 smartwatches and so on
Now, let’s save the product and make a test purchase of two smartphones and one smartwatch (the IYOU). Sure enough, when go to cart, I see this:
As you can see, the watch has a 100% discount.
Case two: Offer discount based on cart amount
Now, there is a new scenario. You want to reward customers with large purchases and also encourage them to purchase large quantity. Here is the discount structure based on cart amount:
Order amount
$100 to $200
$200 to $400
More than $400
Discount amount
10%
20%
25%
Now, let’s get this setup. Under WooCommerce, go to Dynamic pricing:
You can see that there are three tabs. We focus on the first tab in this case, which is Order totals.
So, let’s click on Add pricing group button and setup the rules:
As you can see, the rules are quite straightforward. We create the rule based cart total, applied to everyone and have no specific start and end date. In the table at the bottom, there are something you need to pay attention to:
WooCommerce’s precision is up to cent. That’s why I need to enter 200.01, 400.001. If I entered 201 or 401, if someone buy more than 200 but less than 201, they will not have any discount (same goes with the case of 400 and 401)
In the third rule, as I mentioned at the beginning of this case, we apply a 25% discount on orders > $400. In the max order total, I entered the * (shift + 8) symbol. This is required by the plugin if you don’t have the limit.
You can enter as many rules as you want, simply click on the (+) icon on the right to add more row.
Now, let’s save the rule and make a test purchase.
10% discount on order more than 100 but less than 200
20% discount on order more than 200 and less than 400
25% discount on order more than 400
Case 3: Offer dynamic pricing on bulk order
There is a another way to reward your customers is to give discount on large items purchase. For example, you want to implement this discount structure:
Amount purchase
10 to 20 items
21 to 30
31 and more
Amount discount
discount $5 per item
discount $15 per item
discount $20 per item
Let’s take my store for example and I want to apply this structure on the ZTE phone. So, I edit the product and go to Product Data -> Dynamic Pricing and add rules like this:
As you can see, this discount is for everyone, based on this product’s quantity (not based on products from other categories as in the first example) and the Rule processing mode in Bulk (instead of Special offer).
I think you have no problem understanding the table at the bottom. Now, save the product and make some test purchases:
No discount for quantity less than 10:
If the purchase is more than 10 items, a 5 discount is applied to all products:
For order from 21 to 30, customer gets a $15 discount on each product:
Finally, if the customers buy more than 30 items, they will get a 20 discount on each product:
You can easily change the discount type to percentage instead of a fix amount. In addition to these two option, you can also set the product price to an amount. For example, when the customer purchase 10 items, the price is $100, when they purchase 100 items, you may set the price to $50. This is just an example to show you how flexible WooCommerce dynamic product pricing is.
Conclusion
As you can see, with WooCommerce dynamic product pricing, you can create some great offer for your customers to encourage them to buy more products. At the same time, the customers are rewarded for their purchases. It is a win-win situation and any store can apply this to increase more sales and customers’ loyalty. You can get WooCommerce dynamic pricing plugin here to get started.
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.
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 weight
Shipping cost
1
Less than 3kg
$20
2
From 3kg to 20kg
$40
3
More 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:
Under United State, I’ll click on edit.
In the next screen, click on Add shipping method and select Table rates:
Then, you’ll see the table rates shipping added to the list of shipping methods. Currently, I have only one.
Hover the cursor on the word Table rate, you’ll see an Edit link. Click on that to start configure the options.
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:
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 weight
Shipping cost
1
Less than 3kg
$20
2
From 3kg to 20kg
$40
3
More than 20kg
$1 per kg
So, here is how we are going to set this up:
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):
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:
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:
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:
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:
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.
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 cart
Shipping cost
1
Less than or equal 10
$10
2
From 11 up
Free shipping
Scenario 2:
Items in cart
Shipping cost
1
Less than 10
$1 per item
2
From 11 up
0.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:
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.
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:
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:
Now, let’s go down and setup the rules:
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?
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:
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):
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:
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 total
Shipping cost
1
Up to £10,000
5%
2
More than £10,000
2%
3
Max 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.
Next, set the calculation type to Per order since we calculate the shipping fee based on cart total:
Now, let’s set the rules:
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:
Now, let’s add some more items to make the cart total pass £10,000. Let’s add 10 more items:
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:
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:
Now, let’s set the rule:
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:
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”:
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:
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.
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 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.
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
You can see all the options available:
Enabled: make sure you set this field to yes.
Default price: You can enter your default price here or leave 0 as default
Min price: Enter a valid amount here if you want to set a min price, otherwise, leave it as default or set to 0
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:
Let’s enter an amount, say $500 and click on buy now. When I view the cart, I see the product:
The customer then can buy the same product with different amount. Let’s say $900. Here is the 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.
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
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:
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:
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.
This is where you put the title for the design. You can put anything here. It’ll appear under “Designs you created” 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.
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:
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.
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
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
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.
The cart list has a close button for customer to close it. Here it is:
This section lets you select various close buttons and its font size.
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.
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.
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).
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.
Are you a dev? Checkout programming tutorials here: datmt.com
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
![[Tutorial] WooCommerce Customers Enter Price Amount (Name Your Price) 13](https://www.binarycarpenter.com/wp-content/uploads/2019/05/custom-pricing.jpg)
