Category: WooCommerce Tutorials

Posted on by — Leave a comment

How To Make Woocommerce Free Shipping Per Product

How To Make Woocommerce Free Shipping Per Product 1

If you are running a store selling items that have different shipping requirements, having different shipping terms in very important. One very common scenario is to enable WooCommerce free shipping per product. That means for other products, you still charge shipping fee. However, for some particular products, you may want to enable free shipping.

I’ll show you how to do that in this post. Good news is there is no plugin to install.

Use shipping class to enable WooCommerce free shipping per product

Shipping class is a very simple feature in WooCommerce. However, it is very powerful if you know how to use it. I made a shipping class in depth tutorial here.

Create a shipping class

Now, let’s go to WooCommerce->Settings->Shipping class

woocommerce shipping class interface

Let’s click on Add shipping class button to start creating our free shipping class. You can name any way you like. However, I’ll make it descriptive by giving it the name: Free shipping class.

How To Make Woocommerce Free Shipping Per Product 2

Click on Save shipping classes and you are done.

Configure the free shipping class’s fee

Our next step would be configuring the free shipping class fee. Let’s go to shipping zone and click on the edit button below your zone. If you have multiple shipping zone, you need to do this for every zones if you want to make the free shipping per product works for all customers in all zones.

edit a shipping zone

Next, edit the shipping method. As you can see, I have one shipping method here (a flat rate shipping method). If you have multiple shipping methods, you need to configure the free shipping class fees for all of them.

Edit shipping method
How To Make Woocommerce Free Shipping Per Product 3

In this edit screen, you can see that at (1), I have the common shipping cost to all products is $21. In order to enable free shipping for products that have “Free shipping class”, I need to enter a number that when add to the cost results in $0.

The only number that adds to 21 returns 0 is -21.

Save the changes and you are almost done.

Set free shipping class for particular products

Now, the last step would be assign the free shipping class to product that you want to enable free shipping. Let’s pick a product and edit it. Scroll down to Product data and click on Shipping tab:

configure WooCommerce free shipping class per product

Let’s assign the shipping class of this product as “Free shipping class”.

Now, if I add this product to cart and go to the cart page, I’ll see that there is no shipping fee:

woocommerce free shipping per product

That’s how you enable WooCommerce free shipping per product using shipping class. There is another way, which I’m going to show you next.

Use coupon to enable free shipping per product

Do you know that you can use coupon to enable WooCommerce free shipping per product? I’ve made a free shipping coupon tutorial here so you can have a look. Using free shipping coupon offer some unique flexibilities and it is definitely a method you can use to maximize the flexibility that you can offer to your customers.

Conclusion

As you can see, configuring WooCommerce free shipping per product is quite simple and require no external plugin. You can either use a coupon or a shipping class to enable this feature. I personally prefer using free shipping coupon as it requires less step and you can easily add products that can use the coupon at one screen.

Using shipping class has some unique strengths too. In the case of free shipping coupon, you need to add a new free shipping method in every shipping zone. This may not be desirable for some people. However, it is up to you to decide what method to use based on your actually situation.

Posted on by — Leave a comment

How To Backup WooCommerce Database Quickly

backup woocommerce database

As you run your store, one issue comes up very early that how do you prepare for the worst case scenarios: your site got hack, the server is corrupted…

The most intelligent thing that a site owners do is to have his site backed up. No one can say that your site will never get hacked or your sever will never be corrupted. Those risk may be small, however, it still happen to people every day.

So, WooCommerce users, how do you backup your database quickly?

WooCommerce is a part of your WordPress site

As you may know, WooCommerce is a plugin that you install on WordPress. Thus, backing up WordPress is a much easier and safer way to backup your store. You don’t backup WooCommerce individually (though doing so is possible but it would cost you a lot more time than backup the whole WordPress site).

How to backup your WooCommerce site manually

If you want to actually experience the backup job, you have a few options. In case you have ssh access to your server (if you don’t know what this mean, skip to the next section), you can type the following command:

mysqldump -u your_database_user_name -p your_database_name > backup.sql

Hit enter, the server will ask for your database password, type it in and you are done.

If you use hosting services like bluehost or hostgator, you will have access to a tool called phpmyadmin. It’s a web app that let you backup your databases quickly.

Let’s watch the following video to learn how to backup WordPress database in less than 30 seconds:

how to backup woocommerce database with phpmyadmin

There you go, by backing up the whole WordPress database, you also backup WooCommerce database too.

Backup WooCommerce Database Automatically

While manually backing up your database is easy and quite fun to do, I would prefer something that is automatic. No one want to do this task every single day (daily database backup is vital, especially when you run your store, new data is added quite frequently and you don’t want to lose such precious information). Luckily, there is a free tool called UpdraftPlus that let us make backing up WordPress automated and easy (both database and your fileds).

Let’s go to Plugin->Add new to add the plugin. If you search updraft, you will see the plugin comes that the first place:

updraft plus woocommerce backup tool

Click on install now, then activate to make it available on your site. After that, you will see there is an option called UpdraftPlus backup under Settings:

updraft plus option in your site

Click on that then you will see the following screen:

updraftplus dashboard

Let’s click on Backup now to start configuring the backup.

updraftplus backup options

There you can see, the options are quite simple and easy to understand. Normally, I would keep these settings as default. The plugin allows you to setup a remote storage (dropbox, google drive) to store your backup, which is super cool!

Let’s click on backup now to start the process.

Next, let’s configure the frequency of the backup job.

How To Backup WooCommerce Database Quickly 4

As you can see, there are quite many options for you to select in terms of frequency. There isn’t one settings for all site. It depends on how frequent you have new data on your site. If your store get many purchases everyday, it is wise to set the backup to every hour. However, if it doesn’t get much sales, running twice daily seems to be a good choice.

Next, click on settings tab to setup your remove storage.

storage options for storing woocommerce database and files

As you can see, there are many options to select. Usually, I choose the free services such as Google Drive or Dropbox. The setup of those service is very straightforward and I have no doubt you can do it on your own.

Conclusion

As you can see, backup WooCommerce database (actually, backup your whole site database) is very important. Fortunately for us, the actually job is quite simple. You can either do it manually or use tools like UpdraftPlus backup to get the job done. Personally, I prefer UpdraftPlus since I can set it once and let the plugin does the backup automatically.

Posted on by — Leave a comment

WooCommerce Composite Products – #1 Way To Sell Custom Built Products

selling woocommerce composite products

WooCommerce Composite Products are a custom product type in WooCommerce that let you sell kits, custom built product with ease. One good example is computer shops that let their customers select the parts to build a computer. Another good example is a printable T-Shirt shop that let customers select the plain color shirt then select the art work to print. If you need something similar to that, read on. You’ll find your answer here.

Get WooCommerce Composite Products plugin

The first step is to get WooCommerce Composite Products plugin. As I mentioned above, this is a custom product type (thus, it’s not available by default.

Get WooCommerce Composite Products Plugin

Let’s create a composite product

In this post, I’m going to create a custom built phone that has three parts:

  1. The screen
  2. The case
  3. The battery

I know that a smartphone actually has more parts than this. However, to keep the example simple and easy to follow but still comprehensive, three parts should be enough.

Create selections for each part of your WooCommerce composite product

After deciding that the phone should have three parts, I will need to create options for each part so our customers can select. For each part, I’m going to create three options.

One option is one simple product. I also group the parts in their categories so I can select them easily later.

create options for woocommerce composite products

As you can see, I’ve created three categories with 3 products in each category. Now, I’m ready to create the composite product so my customers can start building their favorite smartphone.

Create WooCommerce Composite Products

Now, let’s go to Product->Add new and select product type as composite product:

select composite product type to create woocommerce composite product

As you switch the product type to composite, you’ll notice that there is a new tab called component appears:

components tab in composite product

This is where we add the component to the main product (the custom built smartphone). Let’s click on Add component to add screen, battery and case.

After clicking on Add component button, you’ll see this screen appears:

configure one component in composite product

The fields are quite straightforward, don’t you think? You enter component name and description in field 1,2. Then component’s image in field 3. In field 4, as mentioned earlier, the reason I created and group components in categories is here. I can simply select a category instead of selecting individual product.

additional fields to configure woocommerce composite products

The next fields let you further customize the display of the component. You can set the component as optional, set default option, min, max quantity and shipping and pricing option.

One note about pricing. If you have one price for all variation (that means the total price doesn’t change if the customer change parts, this option doesn’t work in this case though), then you can set the price at the general tab. However, if the price of the WooCommece composite product equals the sum of all selected components, you will need to check “priced individually” at the bottom of the component option page.

As I’m done setting up the components, let’s publish the product and see how it looks.

As you can see from the video, I can easily select the option for each component. The price at the bottom updates as we select different parts for the phone.

You may wonder, what is the number $620 at the top. That’s the sum of all parts initially. I’m quite surprise that this number doesn’t update as I change the parts. Only the number at the bottom get updated. This is a bug that should be fixed by the plugin developer.

Setting scenario for WooCommerce composite product

If you have bought a desktop computer before, you may know one fact: Not all motherboards work with all CPU. One simple example is if you get an Intel CPU, you cannot use it with a motherboard that supports AMD’s.

As the store owner, you definitely want to guard your customers from buying incompatible parts. Luckily, WooCommerce composite products plugin let you create scenarios where only certain products can be bought together.

For our example, I’m going to create a scenario says that expensive screen must come with high capacity battery. Customers cannot buy expensive screen with cheap battery because the cheap battery may not be possible to handle the power-hungry high end screen.

Let’s switch to the scenario tab to create that rule:

create composite product scenario names and description

The first two fields in the Scenarios tab let you set name and description. Next, there are fields for you to configure the rules:

configure the way components can be bought together

So, as you can see that, my rule says: if the screen is the most expensive one, the battery must not be the cheapest model. Also, I don’t need to set rules for all components. In this case, I omit rules for case.

Let’s update the product and check its page:

As you can see, if I select the screen to be the most expensive one, the option for the cheapest battery is not available.

Conclusion

As you can see, WooCommerce composite products plugin is great for you to create custom built items for your store. There are some minor issues such as:

  1. The price at the top isn’t updated as the customers change the component
  2. It is not possible to exclude categories in the scenarios tab

However, with the job it does, it is still a decent plugin and could serve you well in case you need WooCommerce composite products.

Posted on by — 1 Comment

Easy Ways To Remove WooCommerce Breadcrumbs

breadcumbs

WooCommerce breadcrumbs are a piece of information that display at the top of every product page indicating the hierarchy of the product. Usually, it shows the product’s parent categories. This widget is quite helpful for customers to navigate your store. However, if you have other way to help your customer do that, the breadcrumbs would be redundant. In this post, I’m going to show you two easy ways to remove WooCommerce breadcrumbs that you can complete within a few minutes.

Method 1: Remove WooCommerce breadcrums using CSS

This is the easiest and safest way to remove WooCommerce breadcrums. You don’t need to enter PHP code, thus minimize your risk of breaking your own site.

Most of the time, your breadcrumbs has this CSS class: woocommerce-breadcrumb.

So, in order to hide it, you will enter this block of code inside: Appearance->Customize->Additional CSS

.woocommerce-breadcrumb { display: none; }

Publish the change and you should see the breadcrumb is gone.

If you prefer, I made a video tutorial here.

Method 2: Actually remove WooCommerce breadcrumb from the page

You can see that, in method 1, we only hide the breadcrumb, not actually remove that. If you want to really remove WooCommerce breadcrumb, you will need to put some code in your theme functions.php. I would recommend you create a child theme for this purpose.

For most themes, you can enter the following code at the end of your child theme’s functions.php to get the job done:

/**
 * Remove the breadcrumbs 
 */
add_action( 'init', 'bc_remove_wc_breadcrumbs' );
function bc_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Specifically, if you use storefront theme, you can enter the following code:

/**
 * Remove breadcrumbs for Storefront theme
 */
add_action( 'init', 'bc_remove_storefront_breadcrumbs');

function bc_remove_storefront_breadcrumbs() {
  remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}

Save the file and you should see the breadcrumb removed.

Conclusion

There you have the two effective methods to remove WooCommerce breadcrumbs. If you use method 1, make sure you copy the code when you change your site’s theme since you will need to paste it again in the customize CSS box. Actually, you may need to do the same when you use method 2.

Posted on by — Leave a comment

Best WooCommerce Checkout Fields Editor Plugins Review

best woocommerce checkout plugin

As you start using WooCommerce more, you’ll find that you need to customize a lot of things so your store will be exactly what you want. One of the most common customization that WooCommerce users request is checkout fields.

WooCommerce provides a handful of fields in the checkout page that matches most users need. However, there are cases you want to disable some fields and add some others. In such cases, you will need to use a WooCommerce plugin to edit checkout fields.

In this review, I’m going to show you the top three checkout fields editor plugins available now and help you decide what is the best one for your need.

The three plugins are:

Are you ready? Let’s find out what is the best WooCommerce checkout fields editor plugin!

What is the best WooCommerce Checkout Fields Editor plugin

To decide what is the best WooCommerce checkout fields editor plugin, we are going to review their functionalities. What features that only available in one plugin but not it others. How do they work on actual store.

Let start with the first one.

YITH WooCommerce Checkout manager review

When you install and activate this plugin, you will have access to this dashboard:

YITH WooCommerce Checkout manager general setting 1
Best WooCommerce Checkout Fields Editor Plugins Review 5

As you can see here, it does provide some nice options to style the inputs such as setting input size, and color. You can also set the text color on error messages. For example, I can set the following colors for error inputs:

setting color on input error

Then, on the checkout page, if the customer forgets to enter the required fields, she’ll see the following colors applied to the input fields and their labels:

error color on checkout page when required fields are missing

In addition, you can set the date and time format and set everything in one column (not two columns as default).

I think these options are quite nice.

Now, let’s move on to the main functions of this plugin, which is the part where we enable/disable fields and also, add additional fields to the checkout page:

YITH WooCommerce Checkout manager check out fields editor

As you can see there are two sections: at the top there is a list section on the checkout page you can edit. They are Billing fields, Shipping fields and additional fields. The name of those options are self-explanatory.

The section I marked with number 2 is where you edit existing fields. You can enable or disable multiple fields by select them and select an action to perform:

enable and disable multiple fields

If you have used WordPress for a while, this should not be alien to you.

To edit a single field, you can click on the edit button at the right of that field:

edit a single checkout field in YITH

When you click on edit button of a field, you’ll see this form appears:

YITH WooCommerce Checkout manager edit single field form

There you can edit quite many things. The most important fields are label (for you to set the label of this field), required (mark the field as required or not) and interestingly, it allows you to set some simple validations:

YITH WooCommerce Checkout manager validation

One quite interesting option of this plugin is it allows you to rearrange the fields by drag them in this screen:

drag to re-order fields in checkout page

This plugin also let you add more fields to current billing or shipping section. You can enter the field name and click on add new field form at the top:

add new field to billing checkout
add new field to billing checkout configuration

Then, if I save the changes, I can see the field on the checkout page.

added fields shown on checkout page

In this example, I added a field to the billing section. You can do the same with the shipping section.

So, there you have the YITH WooCommerce Checkout manager plugin in action. Let’s review WooCommerce checkout field editor plugin from woocommerce.com next.

WooCommerce checkout field editor review

This is the plugin interface after I activate it:

woocommerce.com WooCommerce checkout field editor billing section.png
woocommerce.com WooCommerce checkout field editor shipping section
woocommerce.com WooCommerce checkout field editor additional fields section

My first impression with this plugin is it’s quite simple to use. You don’t have the luxury of setting fields colors like in the first plugin but other than that, you still do pretty much the same in terms of functionalities.

When it comes to form validation, here are the options that this plugin offers:

support validations types in woocommerce checkout field editor

It has less options than YITH’s. However, I don’t see this as a weakness for most users.

Now, let’s review the last but not least checkout fields editor plugin,

WooCommerce easy checkout field editor review

This is the interface of our third plugin: WooCommerce easy checkout field editor:

WooCommerce easy checkout field editor billing screen
WooCommerce easy checkout field editor shipping screen
WooCommerce easy checkout field editor additional fields screen

Out of three, I find this plugin has the most pleasing interface. It’s so simple and clean. However, that doesn’t mean it lacks features.

When you edit a single field, there is a comprehensive form appears to let you edit that fields properties:

Best WooCommerce Checkout Fields Editor Plugins Review 6

This form is available for every fields. There is one option that only available in this plugin but not in other two is the visibility manager. This feature is quite brilliant in my opinion:

checkout field visibility manager

As you can see, you can make a field visible or invisible based on the the product/category. You can also make a field visible based on other field’s value:

field visiblity conditional

This could be the deciding feature for many people. If you need to manage visibility, this plugin is a clear winner.

Verdict

There you have it: three plugins with similar functionalities. For most people, they do their job just fine. All of three, the one comes from WooCommerce.com seems to be the last runner. YITH’s plugin, while provide additional styling feature comes with the highest price. The last one, despite being the least expensive, offers the most features.

It is your choice to make the decision. For me, styling fields is quite easy with some CSS so I don’t find YITH’s plugin’s additional features are good enough to justify the price. I would go for Woocommerce Easy Checkout Field Editor since it has the best price and most interesting features.