Free Shipping Bar: How to Display Remaining Amount to Free Shipping in WooCommerce?

Display Remaining Amount to Free Shipping in WooCommerce
Author Bartosz Gajewski
Updated:
2020-09-08
Reading time:
3 minutes read

Free shipping over the amount is a super effective marketing tool in eCommerce. Most clients would be willing to buy something extra from your store than pay for delivery. To make it even more efficient, you can display the remaining amount to free shipping with a Free Shipping Bar. In this article, I’ll show you how to do it with a free plugin.

Every time I write about free shipping, I recommend it as much as I can. It’s a very effective marketing tool that can raise sales in your store. This time, I’d like to present an additional solution that can boost it even more. As simple as it sounds, it’s just displaying the remaining amount to free shipping in your store. This way, your customer will know exactly how much they have to add to their cart to get free delivery. Experiments showed the fact that customers prefer to spend more on products than spending that money on shipping.

Read our complete guide about free shipping in WooCommerce.

How to display remaining amount to free shipping in WooCommerce?

Displaying a free shipping bar in your store can be a simple thing to do. You can use custom code or a proper plugin. In this article, I’ll show you how to display the remaining amount to free shipping in WooCommerce with the free Flexible Shipping plugin. It offers much more than just free shipping. It’s a feature-rich table rate plugin that allows you to set shipping cost based on cart weight and value. And it’s all for free!

Flexible Shipping WooCommerce

The best Table Rate Shipping for WooCommerce. Period. Create shipping rules based on weight, order totals or item count.

Go to WordPress.org or Download for free
100,000+ Active Installations
30-day money back guarantee
Last Updated: 2024-12-09
Works with WooCommerce 9.1 - 9.5.x

Add Flexible Shipping method

With the proper plugin, you can start the configuration. Go to your shipping zone, press the Add shipping method button, and select Flexible Shipping from the list of available methods. 

Then click on the newly created Flexible Shipping method to edit it.

Enable the method, set a title, and optionally an additional description. You can also use the shipping rules or integrate that shipping method with couriers.

Free shipping configuration

However, the most important thing, in this case, will be to configure the free shipping method. In the Free shipping field, enter the amount that will become the free shipping level. Then in the Free shipping label field, enter the label that will appear when it will be reached.

free shipping settings flexible shipping plugin

If you have set up free shipping in the method, you can start displaying the remaining amount for free shipping in WooCommerce. To achieve this, just check the ‘Left to free shipping’ notice box. And that’s basically it. As I mentioned before, with the Flexible Shipping plugin it is trivially simple. 

The ‘Left to free shipping’ notice checkbox mentioned above will appear after defining the free shipping threshold in the Free shipping field.

If you still need some help, watch this video on how to add free shipping over amount in WooCommerce and how to hide other shipping methods, when free shipping is activated.

 

Results

The Free Shipping Bar will be displayed on the shopping cart and order page, and its appearance will depend on the theme you are using.

In a standard Storefront theme, that message will look like this:

remaining amount to free shipping in WooCommerce

 

The missing amount will be dynamically changed based on the value of the basket. It is important that all shipping methods in your store have the same free shipping amount. The message about the missing amount for free shipping in WooCommerce will be displayed regardless of the shipping method chosen by the customer.

Changing the notice

Information about the missing amount for free shipping can be easily edited. Just use one of the specially prepared filters:

flexible_shipping_free_shipping_notice_text_message  to edit the notice text,
flexible_shipping_free_shipping_notice_text_button_label  to edit the button label.

Here are some examples of how to use it:

Change the notice text

All you have to do is to insert your own text, containing the %1$s section, which is responsible for displaying the corresponding amount. Put it instead of Message example. After changing the code, just paste it into the functions.php file.

Change the button label

Just change the Button Label into your own text. After changing the code, just paste it into the functions.php file.

Delete the button

To delete the button from the notice, just paste it into the functions.php file.

Remaining amount to free shipping in WooCommerce

Displaying the remaining amount to free shipping in WooCommerce is not so difficult to set up. All you need is one proper plugin. And what’s more, with Flexible Shipping you can do it for free! I hope it will help you to increase your sales. Good luck!

Comments
Subscribe
Notify of
guest
29 Comments
Inline Feedbacks
View all comments
Nature et Soi Webmaster
Nature et Soi Webmaster
3 years ago

Hello, this function it does not work.

Nature et Soi Webmaster
Nature et Soi Webmaster
3 years ago

After the lest update … it’s ok …. thank you

O2 Web
O2 Web
3 years ago

I would like to know, before making the purchase, if this text can be translated into several languages, I have my store in 2 languages

Łukasz Spryszak
Łukasz Spryszak
Reply to  O2 Web
3 years ago

Hi O2 Web, yes, this phrase should be fully translatable.

Mehdi
Mehdi
3 years ago

Hi it seems that the flexible_shipping_free_shipping_notice_text hook doest not work anymore since 5.6 WordPress update. I use that hook to translate the message.
Thanks.

David
David
Reply to  Mehdi
3 years ago

Same issue for me with WP5.6.1

Łukasz Spryszak
Łukasz Spryszak
Reply to  David
3 years ago

Hi David, hi Mehdi, I’ve just run a test on the fresh WP 5.6.1 installation with only the latest WooCommerce 5.0.0 and Flexible Shipping free 4.0.10 on. I used the slightly modified snippet above and added it using Code Snippets plugin: [Image no longer available] . I’ve set the free shipping threshold for Shipping to Porto method to 200 €, added some sample 100 € product to the cart, entered the shipping details and here are the results: [Image no longer available] As you can see it worked properly on the WP 5.6.1 as well. Please make sure no other plugins you are currently using are interfering or there is no other free shipping method or method with 0 cost available.

David
David
Reply to  Łukasz Spryszak
3 years ago

Finally it works. May be it was a cache issue.
However the ‘Continue shopping’ link on the right has dissapeared.

Łukasz Spryszak
Łukasz Spryszak
Reply to  David
3 years ago

David, have you tried using the slightly modified snippet below?

add_filter( 'flexible_shipping_free_shipping_notice_text', 'wpdesk_flexible_shipping_free_shipping_notice_text', 10, 2 );
function wpdesk_flexible_shipping_free_shipping_notice_text( $notice_text, $amount ) {
return sprintf( 'You only need %1$s more to get free shipping! %2$sContinue shopping%3$s', wc_price( $amount ), '', '' );
}

Last edited 2 years ago by Bartosz Gajewski
Yasin
Yasin
Reply to  Łukasz Spryszak
3 years ago

Hello I tried this code but ‘Continue shopping’ not clickable anymore. It just text.

Łukasz Spryszak
Łukasz Spryszak
Reply to  Yasin
3 years ago

David, Yasin, it looks like for some reason Disqus comments system removes the part of the snippet responsible for displaying the Continue Shopping button linking. That’s why I’m pasting it as screenshot this time: [Image no longer available]

I’ve just run a test and the snippet above worked properly including the fully functional and clickable Continue Shopping button: [Image no longer available]

Yasin
Yasin
Reply to  Łukasz Spryszak
3 years ago

Thank you for answer! Copy and pasted code but problem continues.

Łukasz Spryszak
Łukasz Spryszak
Reply to  Yasin
3 years ago

Yasin, I see you’ve used the previous version with the HTML link tags stripped. Please try the later version from the screenshot: [Image no longer available]

Yasin
Yasin
Reply to  Łukasz Spryszak
3 years ago

Now works like a charm! Thank you! Have a nice day.

Łukasz Spryszak
Łukasz Spryszak
Reply to  Yasin
3 years ago

It’s great to hear that and I’m glad I was able to help 🙂

David
David
Reply to  Łukasz Spryszak
3 years ago

Yes! Thank you!

GOTDESIGN
GOTDESIGN
3 years ago

Hello, everythin fine but there is no announcement “You only need xx,xx more to get free shipping” after add the filter, why?

Łukasz Spryszak
Łukasz Spryszak
Reply to  GOTDESIGN
3 years ago

Hi GOTDESIGN, is there any 0-cost shipping method available to pick at the moment in your shop (including the WooCommerce default Local Pickup)? If so, I believe this might be the reason for the notice not being displayed. If any 0-cost shipping method is available it is considered as the free shipping being granted and that’s why the notice is no longer being displayed.

GOTDESIGN
GOTDESIGN
Reply to  Łukasz Spryszak
3 years ago

There was 0-cost in local pickup, ive changed it for 10 nothing happen, disabled and still cant see it in cart

GOTDESIGN
GOTDESIGN
Reply to  GOTDESIGN
3 years ago

even if i unchecked all other shipping method

Łukasz Spryszak
Łukasz Spryszak
Reply to  GOTDESIGN
3 years ago

Does the ‘Darmowa wysyłka’ shipping method include any rules granting the 0 shipping cost?

GOTDESIGN
GOTDESIGN
Reply to  Łukasz Spryszak
3 years ago

Nope

Łukasz Spryszak
Łukasz Spryszak
Reply to  GOTDESIGN
3 years ago

Could you please contact us directly at https://octolize.com/support/ ? I’m afraid that we will need to take a closer look at the situation to check what’s going on there.

Tri ShC
Tri ShC
3 years ago

Which functions.php file should I use as I have found multiple functions.php that may be used. I am new to this so any help would be appreciated.

Łukasz Spryszak
Łukasz Spryszak
Admin
Reply to  Tri ShC
3 years ago

Hi Tri, you should use the functions.php of the theme/child-theme your shop’s currently using. It should be located in the theme folder at /wp-content/themes/name-of-your-theme/functions.php. Optionally, you can also use e.g. the Code Snippets plugin to place the code safely without modifying the files via FTP and to prevent the changes from being overwritten after the theme’s updated.

Tri ShC
Tri ShC
Reply to  Łukasz Spryszak
3 years ago

Thank you so much for your answer. It is very much appreciated!

Navid
Navid
2 years ago

Is there a way to move the notice text to another space than there?
woocommerce_cart_totals_after_shipping would be the hook where i would like to place the notice text

Łukasz Spryszak
Łukasz Spryszak
Admin
Reply to  Navid
2 years ago

Hi Navid, I’m afraid that unfortunately our Flexible Shipping plugin doesn’t allow to change the place where the notice is displayed since it uses the default WooCommerce mechanisms. However, it sounds like a really useful feature to be implemented. I saved it as a feature request to our backlog a we’ll let you know as soon as the update containing this option is released.

Navid
Navid
Reply to  Łukasz Spryszak
2 years ago

Is there maybe a manual way, like remove_action() , add_action()
to change the place?