Recently, I installed Mautic. It’s such a great email marketing platform if you know how to install and use it. I had a bit of problem setting it up. However, after few hours, I have the site up and running.
There is one problem, I tried to subscribe but got no email.
There are many reasons for this. Let’s go through each case and find the fix.
Make sure you got your email settings setup correctly
This is the most common problem, yet the easiest problem to fix. You need to go to your email configuration to test your email settings. Make sure you got the test email delivered to your inbox.
To go to email settings, click on the gear icon at the top right of the screen, go to Configuration->Email settings:
Now, if you tested your email settings and got the test email, that’s good. However, to make Mautic send email automatically, you need to set cron jobs.
Make sure you setup cron jobs correctly
Setting up cronjobs is quite simple. You can follow the tutorial on how to setup the cronjob here.
If you have followed the instructions there and still, no email sent after subscriptions, chances are, you made this mistake:
You didn’t add a blank line at the end of the cron file.
On WooCommerce single product pages, you usually see the product’s categories displayed under the add to cart button, like this:
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:
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:
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:
Now, let’s view the site and sure enough, the category meta is gone:
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.
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:
You will create a page that display your products with your favorite page builder
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:
As you can see, I have a blank page. Let’s say I want to have three section on my shop page:
Featured products
Best selling products
New arrival products
I’m going to create three headings first:
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:
[best_selling_products]: List of your best sellers
top_rated_products]: Top rated products
[sale_products]: Products are on sales
[recent_products]: New products
[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:
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:
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:
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:
If you see any warning popup, just click on “I understand”.
Now, your interface might be different from what I have here:
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.
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.
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.
![[Guide] Customize WooCommerce Shop Page With Page Builder (Elementor/Beaver...) 2](https://www.binarycarpenter.com/wp-content/uploads/2019/06/go-to-theme-editor-640x459.png)
![[Tutorial] WooCommerce Customers Enter Price Amount (Name Your Price) 10](https://www.binarycarpenter.com/wp-content/uploads/2019/05/custom-pricing.jpg)
