Search the site:

Home Blog Display the remaining cost for customer to avail free shipping on your WooCommerce store

Display the remaining cost for customer to avail free shipping on your WooCommerce store

Shipping is an important factor for the customers while shopping online. Usually store owners give a variety of shipping options to customers so they are more inclined to finish their purchase.

For example, some store owners give discount on the shipping costs if customers purchase a certain number of products, or allow free shipping for certain zones near the store.

The one thing e-commerce store owners know is that customers love free shipping when buying products. This is often tied to a minimum order total for free shipping. You can let the customers know how much more they need to shop so as to avail the free shipping.

By default, WooCommerce provides three shipping methods which can be added for shipping zones based on different regions. In a way, these are very limited. These limitations can be overcome by using some advanced shipping plugins.

WooCommerce has a setting where we can set the minimum amount required for free shipping. It displays an option for free shipping if that much amount of products have been purchased. However, WooCommerce doesn’t provide a way to show a message to the user as to what is the minimum amount required to get free shipping. That’s a big drawback. We will see how to overcome that.

Set Minimum Order Amount for Free Shipping

To set the free shipping minimum amount, go to Dashboard > WooCommerce > Settings > Shipping > Shipping Zones.

If you hover over ‘Free Shipping’, you will see the edit option. On the edit screen, you can choose whether you want to set the minimum amount, a minimum amount for free shipping with a coupon, etc.

So now we have set $500 as the minimum order amount that is required to get free shipping on any WooCommerce order. We will now see how to show the remaining amount to get free shipping on the cart & checkout page.

Show Amount Left for Free Shipping on Cart Page

We will display the notice above the cart with the WooCommerce hook woocommerce_before_cart. This notice will be displayes only when the cart total is less than the minimum amount required for free shipping. We need the total amount from the cart and we already have the minimum amount required for free shipping. We need to display the difference of these two in the notice.

In the above example, we get the free shipping settings from our wp_options table. Then we get the cart subtotal and calculate the remaining amount. We display the notice using wc_print_notice() if the amount left for free shipping is greater than the cart total.

The option for “Free shipping” won’t appear on cart page as far as the order total is below the minimum required order amount. But once the cart total reaches your minimum amount ( which in this example is $500 ), it will give an option for free shipping as well.

As you can see, the cart page gives an option to select a shipping method.But you may want to display only the “Free shipping” method & hide the other shipping methods (like “Flat rate”), as the order total has already reached the minimum amount for the free shipping option. Let’s see how we can do that.

Show Amount Left for Free Shipping on Checkout Page

We can display the notice on the checkout page in the same way as the cart page. Our function will be same but we will use a different filter for the checkout page. Of course, the filter/hook depends on the position you want to display the notice. We will display it above the checkout form using the woocommerce_before_checkout_form hook.

The notice will now show up above the checkout form.

Free Shipping Remaining Cost on WooCommerce Cart & Checkout

 

 

 

Show only Free shipping & hide other shipping methods

We want to display only the free shipping option and hide other shipping options. WooCommerce provides a filter for that called – woocommerce_package_rates. It accepts one parameter – $rates, which is the array of rates found for the package. The $rates array contains the shipping methods & their shipping rates defined in our settings.

In the above example, we check for the available shipping methods & rates. This function will hide other shipping rates if ‘Free Shipping’ is available. It will only show ‘Free Shipping’ option. If free shipping is not available then we display the other options e.g. Flat Amount, Local Pickup, etc.

This method is really useful to inform users that they can get free shipping if they purchase a few more items. This can also help increase sales of your products.

A much better way to do this is by adding a sticky notice bar at the top of the website on all pages to inform the customers about the shipping threshold. We are going to work on that too and will update here on how to achieve that.

Browse more in: WooCommerce, WooCommerce How Tos, WooCommerce Tutorials

11
Leave a Reply

avatar
5 Comment threads
6 Thread replies
8 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
RachelAbdul MuqsitJoeMarkusMike Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
saad
Guest
saad

where is the code. just a dictation without example?
that just a theory which every one knows

Abdul Muqsit
Guest

There is git code along with output, what else you need?

adnan
Guest
adnan

hello there, it doesn’t seem supporting ajax. so what would happen when cart is updated dynamically?

Mike
Guest
Mike

If i put this on the cart page, i dont only the code:
cart->subtotal;
$remaining = $amount_for_free_shipping – $cart;
if( $amount_for_free_shipping > $cart ){
$notice = sprintf( “Add %s worth more products to get free shipping”, wc_price($remaining));
wc_print_notice( $notice , ‘notice’ );
}

}
?>

Someone help me pls (=

Markus
Guest
Markus

Do I have to copy the code in functions.php?

It’s not working there for me – thanks!

Joe
Guest
Joe

I copy/paste the Show Amount Left for Free Shipping on Checkout Page code, and it broken my website. I added on fuctions.php files and removed php tag, but it doesn’t work. Any idea ??

from purchased

Subscribe Now