Search the site:

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 Tutorials, WooCommerce, WooCommerce How Tos
Notify of

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

Inline Feedbacks
View all comments
3 years ago

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

Abdul Muqsit
2 years ago
Reply to  saad

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

3 years ago

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

3 years ago

If i put this on the cart page, i dont only the code:
$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 (=

2 years ago

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

It’s not working there for me – thanks!

2 years ago

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 ??

2 years ago

I’ve tried both ways with or without array and not working either way. I used code snippet. Any other ideas? Your coding for removing all other shipping methods worked though.

1 year ago

Hi thanks for this! I’ve gotten it working on the cart page but not the checkout page. I put the cart code in a Code Snippet. When I put the checkout page code in a snippet it said I couldn’t redeclare the function. I tried it with just the line you mentioned above but that didn’t do anything:
add_action( ‘woocommerce_before_checkout_form’, ‘wc_add_notice_free_shipping’ );

Thanks for your help.

1 year ago
Reply to  Mark

change the function name it is the same for that on cart thatis why you get that message. either way it didn’t work for me

from purchased

Subscribe for more offers

Would love your thoughts, please comment.x