WooCommerce Tutorials Archives - Page 11 of 14

Posted on February 18, 2019December 8, 2019 by Đạt Trần — Leave a comment

How To Set Up WooCommerce Free Shipping Coupons

Coupon is a great way to reward your customers. In WooCommerce, you can create coupons for almost anything. You can create a coupon that offers a 10% discount or a fix amount discount. However, little people know that you can create a free shipping discount. You can even set a minimum order for that coupon to be effective. Sounds good? Let’s find out how to set up WooCommerce free shipping coupon.

Here are what we are going to do to setup WooCommerce free shipping coupon:

Make sure your store has coupon enabled
Create the coupon that enables free shipping
Add free shipping to your shipping zone
Apply the coupon on a test order

Make sure your store has coupon enabled

The very first step is to make sure you have the use coupon option checked. Let’s go to WooCommerce->Settings->General and scroll down to the Enable coupons section:

enable the coupon codes usages in WooCommerce

Make sure you have the checkbox “Enable the use of coupon codes” checked. We are ready for the next step.

Create the WooCommerce free shipping coupon

Let’s go to WooCommerce->Coupons and click on Add coupon:

Now, enter the details for your coupon:

There are three fields you need to pay attention to, other fields are not important in enabling free shipping for the coupon.

You need to give the coupon a name. In the example above, my coupon’s name is SHIPZERO
You may or may not give the coupon a description. However, it’s extremely helpful when you come back and visit your coupons later, you will know exactly what they do.
There is a small check box says “Allow free shipping” and you need to check it.

That’s all we need to do with the coupon. Now, click on submit and move on to the next step.

Create free shipping method for your shipping zone

In order to activate the WooCommerce free shipping coupon, the next step is to create a free shipping method in your shipping zones. If you have multiple shipping zones, you may need to create one free shipping method for each zone.

Let’s head to WooCommerce->Settings->Shipping->Shipping zone:

As you can see, I have four zones here. I’m going to enable free shipping for Australia. As mentioned before, if you need to enable the use of the WooCommerce free shipping coupon we have just created in other zones, you may need to repeat the following steps for all zones.

Let’s click on the Edit link under Australia:

Let’s click on Add shipping method:

Select free shipping in the drop down box and click on Add shipping method.

Then, you will see a new shipping method added in our list:

free shipping method is now under Australia

Let’s click on the Edit link under free shipping. We are going to configure the condition for the free shipping option to be effective.

Here, you can edit the title. I’ll leave the default title as Free shipping. The most important field is the select box: Free shipping requires…

There are a few options you can select from. You can require that the order must have a minimum amount so the coupon can be active. However, I’m going with the first option here, which requires only a valid shipping coupon.

After that, click on Save changes and we are done.

Apply the coupon on a test order

We are going to make a test order on my store. Let’s add some items and go to cart and click on Proceed to check out.

The total before coupon is applied:

You can see the notice says: “have a coupon?…” If you are going to apply the coupon now, the coupon will not have any effect. Why? As you may remember, we only enabled free shipping for Australia. However, the country in the Country field is Vietnam. Let’s add our address to Australia and try to apply the coupon:

Now, if we check the cart total, the free shipping fee is $0:

Restrict the coupon to be available on particular products

In case you want to restrict the use of free shipping on some particular products or categories, it is definitely possible.

Let’s click on the Usage restriction tab:

As you can see, in the product categories section, I enter the product category “Dress”. That means this free coupon is available for products in this category only.

There are also other restrictions such as the minimum spent, exclude sale items… that you can set for the coupon.

Conclusion

As you can see, setting up WooCommerce free shipping coupon is quite easy. If you have multiple zones, you may need to do some repetitive work. There is a workaround though. That is to create a shipping zone that cover all shipping zones then create a free shipping method for that zone.
In case your store requires more complex shipping, I would recommend you use table shipping plugin. You can setup very complex shipping rule with this tool. Checkout my table rate shipping tutorial here to get started.

Posted on February 18, 2019August 11, 2019 by Đạt Trần — 10 Comments

How To Disable Magnifying Glass Effects On WooCommerce Products’ Images Without Using Plugin

If you go to any stores, you can find that if you hover the product’s images, there is a magnifier appears to help you view the products better (the product image is zoomed in so you can see a specific area better). WooCommerce supports this feature too. However, I personally don’t like the default effects of WooCommerce:

Original image:

Product image on hover:

So, if you are like me, you may wonder: how can I disabled product zoom feature in woocommerce?

How To Disable Magnifying Glass Effects On WooCommerce

Disabling the zoom effect in WooCommerce is quite simple. However, you need to do something first.

First thing first, create a child theme if you haven’t got one

If this is the first time you’ve heard of WooCommerce child theme, let me introduce it quickly. A child theme is an extension of your current theme that lets you add additional functionalities to your site without changing your current theme’s code. Why is it beneficial and how to create one? Check out my post on creating child theme here.

Now, I assume that you have created and activated the child theme. However, if you are in a rush, you can proceed without one.

All you need to do is to go to Appearance -> Editor and put the following code at the bottom of your functions.php file

add_action( 'after_setup_theme', 'bc_remove_magnifier', 100 );

function bc_remove_magnifier() {
remove_theme_support( 'wc-product-gallery-zoom' );
}

If you view the product image now and hover over the image, the effects are now removed.

Conclusion

As you can see, if you don’t like the default behavior that WooCommerce gives to products image on being hovered, removing it is quite simple. This tip is also useful if you are making a custom plugin to add a better magnifying effect to the products’ images.

Posted on February 14, 2019December 5, 2019 by Đạt Trần — Leave a comment

WooCommerce Shipping Classes: The Ultimate Tutorial

WooCommerce provides some good options that help you offer flexible shipping to your customers. Shipping classes are ones of those. Today, we are going to learn the in and out of WooCommerce Shipping Classes and how we can use those classes to create flexible shipping methods for our store.

What are WooCommerce shipping classes?

In short, WooCommerce shipping classes are a way to group similar products to have one shipping method and fee. For example, you have a store selling furniture. While decoration items like vases, lamps don’t cost much space when packing, tables and chairs do. So, you may want to group vases, lamps in one shipping class called small items and tables and chairs in another class, called large items.

You can then setup different shipping calculation for each class. For example, you want to set the shipping cost for small items to a flat rate at $2 and shipping cost for large items to a flat rate at $20. You can achieve this quite easily with WooCommerce shipping classes.

How to create shipping classes in WooCommerce

Creating shipping classes is very simple in WooCommerce. All you need to do is to go to WooCommerce->Settings->Shipping->Shipping classes:

As you can see, we don’t have any shipping classes yet. Let’s click on Add shipping class button and add two shipping classes: small items and big items:

Finally, click on Save shipping classes to save. You have successfully created two shipping classes.

How to setup WooCommerce shipping classes

To use the shipping classes, first you need to assign them to the appropriate products. We are going to assign the small items class to a vase and big items class to a table. Let’s go to Products->All products and click on the Edit link under the product we want to assign the shipping class to:

Let’s scroll down to Product data section, click on shipping and click on the shipping class select box:

assigning shipping class for product in woocommerce

Then choose the appropriate shipping class for the item. As we are editing the table, let’s select big items. Now, update the product.

You have successfully assigned a shipping class to a product. Make sure you do the same with the vase.

Our products now have shipping classes. However, there isn’t any change in shipping fee applied. That’s because shipping classes are part of shipping methods under a specific shipping zone. Let’s go configure the rules for our shipping classes.

Configure conditions for shipping classes

Let’s navigate to WooCommerce->Settings->Shipping->Shipping zones

Shipping classes can only be configured as a part of shipping method, and shipping methods are children of shipping zones. So, if you have multiple shipping zones, you need to configure shipping classes’ rules for each zone. For example, you can set the shipping fee for big items to $30 for customers who have UK address and $60 for customers who have Australia address.

Sounds confusing? Let’s have an example to clear the muddle. Let’s say we are going to set the shipping fee of big items in Australia to $60.

First, click on the edit link under Australia shipping zone:

Then, click on add shipping method:

Select flat rate and click on add shipping method. Then click on the Edit link under the flat rate shipping method we have just added:

configure shipping method with shipping classes

There are three fields you need to pay attention to:

The cost field: This is the base cost of the shipping method. The shipping cost for the item will be the sub of this field and its shipping class cost.
“big items” shipping class cost: This is the cost of products which has big items shipping class (under a specific shipping zone and shipping method)
“small items” shipping class cost: This is the cost of products which has small items shipping class
No shipping class cost: You can set the shipping fee for items that don’t have any shipping class. We are going to leave this field blank. That means such items will have the shipping cost equal to the base cost ($10).
Calculation type: You can have two options: per class and per order. If you choose per class, the shipping cost will be the total cost of all shipping classes of the items in cart. Thus, if we have one big item and one small item, the shipping cost will be: the base cost + big items shipping class cost + small items shipping class cost. However, if you choose per order, the shipping cost will be: the base cost + big items shipping class cost (since big items shipping class is the most expensive).

We are going to set the base cost is $10, $60 and $5 for big items and small items accordingly. For calculation type, let’s select per class. Then, click on save changes.

Make a test order to see shipping classes in action

We are going to order one vase and one table. Then, go to the cart page:

Now, look at the cart total:

shipping fee calculated with shipping classes

You can see the shipping cost is $75. That’s be cause we have $10 as the base shipping cost, $60 for the “big items” class (the table/desk) and $5 for “small items” (the vase).

$10 + $60 + $5 = $75

As mentioned above, there are two ways to calculate the shipping class cost in one order: per class or per order. We have $75 here because we select per class. If we now change to per order, you will see the shipping cost changes too:

cart total changed after shipping calculation type changed

As you can see now, the shipping cost is now $70. That’s because it’s equal to the base cost + most expensive shipping class, which is “big items” ($60).

Flexible shipping with shipping classes

Using shipping classes can offer much for flexibility that just setting a fix number. Let’s consider some scenarios to see how shipping classes can help you provide flexible shipping options for your customers.

Set shipping cost per product

For example, you don’t want to charge a fix amount per item in cart. Instead, for “small items” shipping class, you want to charge $0.5 per item. Thus, if one customer orders 10 items, his total shipping cost will be $0.5 * 10 = $5.

Let’s set that up by going to WooCommerce->settings->Shipping zones and edit a shipping method:

This is the settings we have done previously. Now, in the small items shipping class cost box, enter [qty] * 0.5.

Then, go to our cart and update the cart to have 10 vase and remove the desk.

update cart to see flexible shipping class in action

Now, if you look at cart total, you’ll see our shipping cost is now $15:

new shipping cost based on item quantity

That’s because the shipping cost = $10 (base cost) + 10 * 0.5 = $15.

It’s really flexible, isn’t it?

Set shipping cost as a percentage of item total cost

You can also set the shipping cost as a percentage of item total cost. For example, the shipping cost for “small items” shipping class is 5% of the cost of all “small items” in cart. You can set that up by doing so:

setting shipping fee as percentage of items total

Now, if you go to our cart (still have 10 vases), you’ll see the shipping cost is now $25:

That’s because 10 vases cost $300 ($30 per vase). 5% of $300 is $15. The total shipping cost would be: $10 (base cost) + $15 = $25.

Set the minimum and maximum amount for the shipping fee

After setting the fee as a percentage of items total, you can set the minimum and maximum cost for that shipping class. For example, I want to set the minimum shipping cost for “small items” is $20 and maximum $50. You can do it like so:

setting min and max shipping fee for shipping classes

Now, with still 10 vases in our cart, if we refresh the cart, you will see the shipping fee is now $30, instead of $25. That’s because the minimum fee is $20 plus base cost ($10) = $30.

apply min shipping fee for shipping classes

If you update the cart to buy 100 items (that is $3000 total and 5% * $3000 = $150), the shipping cost would be $60:

apply max shipping fee for shipping classes

That’s because our percentage based fee now is $150, exceeds the $50 maximum fee. Thus, the customers will get the maximum shipping fee $50 + $10 (base cost) = $60.

Conclusion

As you can see, WooCommerce shipping classes can be very powerful when setting up your shipping cost. You can set a fix amount per class. You can also set the shipping cost as a percentage of items total. Hopefully, the post has been helpful to you.

Does this post solve your shipping questions? If not, leave a message. In the mean time, make sure you checkout table rate shipping tutorial. I wrote an extensive tutorial there for people who need complex shipping structure.

Posted on February 14, 2019April 14, 2019 by Đạt Trần — 2 Comments

How To Setup Woocommerce Minimum Order For Free Shipping

Free shipping is a great method to reward loyal customer. Good news is WooCommerce has some nice settings that help you enable free shipping for order that exceed a certain amount. Let’s learn how to setup WooCommerce minimum order for free shipping in this post.

Steps to setup minimum order for free shipping

Here are what we are going to do:

Setup shipping zones
Add free shipping method and set the minimum amount that triggers free shipping

Setup shipping zones

As you may already know, no shipping method exists outside of a shipping zone. So, your first step is to setup a shipping zone. Simply put, shipping zone is the physical range that your shipping methods cover. For example, you want to apply different shipping method, shipping fee for the US and the UK then you will need to setup a shipping zone that covers the US and the other for the UK.

Setting up shipping zones is super easy. If you need instructions setting up shipping zones, click here.

Let’s go to WooCommerce->Settings->Shipping and click on shipping zones:

As you can see that I have setup four shipping zones.

Add free shipping method for a zone and setup the minimum amount that triggers free shipping

Now, for example, we are going to reward customers in Australia. For all order above $400, they will not have to pay for shipping fee. Let’s click on the Edit link under Australia shipping zone:

Now, you see the shipping zone screen like this:

Let’s click on Add shipping method, select free shipping:

Click on add shipping method, you will be see the shipping zone screen:

Let’s click on the edit link under Free shipping method we have just added:

Here, you can put anything you like in the title. Note that your customers will see the title so make sure you don’t put anything that isn’t suitable to your customer here. In the free shipping requires… field, select “A minimum order amount”. Finally, enter 400 (or whatever number you want) in the Minimum order amount. This number is the cart total (i.e. money, not number of items).

Click on save changes and you are done.

Test free shipping on orders that meet the minimum amount

Now, let’s go to our store and buy one item. In this case, I’m going to buy a pair of shoes. Let’s go to the cart page:

As you can see, we don’t see the free shipping option since the cart total is only $54. Now, let’s update the cart to order 3 more. We will have 10 items in cart and the amount exceed $400. After updating the cart, you should see the free shipping option appears:

Our customers now can select that option to save the shipping cost.

Conclusion

As you can see, it is easy to setup free shipping for orders that meet a certain minimum amount. This is a great feature to boost customers loyalty. Shipping is a big topic in WooCommerce and there are many customizations can be done. If you need a specific shipping settings, please let me know in the comment section below. I’m always glad to help.

Posted on February 14, 2019June 28, 2019 by Đạt Trần — 6 Comments

[Solved] Woocommerce Shipping Zones Not Showing In Cart and Checkout Page

Normally, when you setup multiple shipping zones for your store, in cart and checkout page, you should see the option to select:

However, for some reasons, you don’t see that option. All you see is something like this:

You wonder, why the shipping zones option doesn’t show up? Well, the fix is quite simple. Let’s go to WooCommerce->Settings->General and scroll down to General Option:

As you can see, my settings prevent me from selling to any countries other than Afghanistan. So, if you have shipping zones that cover Europe, make sure the selling locations include Europe and shipping locations option is enabled, like this:

Make sure you click on save changes at the bottom of the screen.

Now, if you go to the cart page, you can see the option to change the address and select shipping zone:

That’s it! If you have the problem fixed, that’s great! If you still need assistance, please let me know via the comment section below or via my contact page. Make sure you check the following resources out to have more control over your shipping:

WooCommerce flat rate shipping tutorial
WooCommerce table rate shipping tutorial – Create complex shipping plan for your store

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.