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.
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!
The best Table Rate Shipping for WooCommerce. Period. Create shipping rules based on weight, order totals or item count.
Download for free or Go to WordPress.orgWith 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.
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.
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.
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.
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:
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.
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.
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!
Learn how to configure custom shipping rules for furniture orders – from heavy and bulky to small and light.
Read Octolize Case Study about Vitrek – a provider of innovative global solutions for High Voltage Test and Measurement.
Read Octolize Case Study about EnglishSpeakingMum – Polish dedicated and involved parenting blogger.
Hello, this function it does not work.
After the lest update … it’s ok …. thank you
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
Hi O2 Web, yes, this phrase should be fully translatable.
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.
Same issue for me with WP5.6.1
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.
Finally it works. May be it was a cache issue.
However the ‘Continue shopping’ link on the right has dissapeared.
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 ), '', '' );
}
Hello I tried this code but ‘Continue shopping’ not clickable anymore. It just text.
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]
Thank you for answer! Copy and pasted code but problem continues.
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]
Now works like a charm! Thank you! Have a nice day.
It’s great to hear that and I’m glad I was able to help 🙂
Yes! Thank you!
Hello, everythin fine but there is no announcement “You only need xx,xx more to get free shipping” after add the filter, why?
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.
There was 0-cost in local pickup, ive changed it for 10 nothing happen, disabled and still cant see it in cart
even if i unchecked all other shipping method
Does the ‘Darmowa wysyłka’ shipping method include any rules granting the 0 shipping cost?
Nope
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.
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.
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.Thank you so much for your answer. It is very much appreciated!
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
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.
Is there maybe a manual way, like remove_action() , add_action()
to change the place?