Everybody wants to increase the average order value for their store, right? A good way to do this is to offer free shipping above a certain order amount. If you have this on your site you should of course promote this as a selling point on a prominent and default position.

Alongside with that, it would be good to help the customer remind in the cart if they’re close to the free shipping amount with a notification saying something like “Add $10 more to your basket to receive free shipping!”.

In this post I’ll provide a code snippet that you can use to display such message on the cart/checkout page when using the WooCommerce Core ‘Free shipping’ option. I’ll also provide a solution when using the Advanced Shipping or Advanced Free Shipping plugins.

Showing a free shipping notice for WooCommerce Core free shipping rates

Using the following snippet you can show the notice on the cart / checkout page. It will only appear when the minimum order amount setting is set.

You can remove some of the lines if you only want to display it at the cart / checkout page as described inline.

Showing a free shipping notice for Advanced Shipping

If you setup a free shipping option with the Advanced Shipping / Advanced Free Shipping plugin then the above code snippet won’t work as that only recognises the ‘Free shipping’ rate of WC Core and the respective settings. Because of the conditions it is very difficult to setup a code snippet that would fit the exact requirements.

Therefore the easiest solution would be to use the Advanced Messages plugin. Just like the other ones, this plugin has similar conditions and will allow you to setup conditional messages throughout your store.

Here’s how an example setup would look like;

1. The free shipping rate

2. The message

The message would have a similar setup. I’ve added a additional condition to ensure it doesn’t show when there’s too big of a gap between the free shipping amount and the cart subtotal.

3. The message at the cart

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

20 thoughts on “Showing a ‘Add $10 more for free shipping’ notice

Andy September 26, 2017 at 7:36 pm

Hi Jeroen

Looks like a useful post, but it isn’t clear where we need to paste the code snippet to make it work.

Thanks!

Jeroen September 26, 2017 at 7:48 pm

Hi Andy,

You can copy&paste the contents of the script to your (child) themes functions.php. I usually recommend doing it over FTP.
If wanted you can read more about code snippets here: https://shopplugins.com/how-to-add-a-code-snippet-to-your-site/

Cheers,
Jeroen

Nick November 19, 2017 at 4:14 am

The snippit is cool, but it takes into account shipping costs.

For example

$50 item
$20 shipping

Free shipping => 100

Spend another $30 to get free shipping. Notice should say spend another $50. Needs to be item total not cart total.

Jeroen November 19, 2017 at 9:25 am

Thanks for noticing Nick!

I’ve just modified the script to get that sorted out.

Cheers,
Jeroen

Matteo November 21, 2017 at 11:39 am

Hello Jeroen,

thank you very much for this very handy piece of code!

I don’t want to steal your time, because it’s always uncomfortable to ask somebody already nice to further being helpful!

Yet, I have a question about a situation where I have two different free shipping options, regular free shipping, and priority one.

As I turn on your code, I get a duplicate message, one per free shipping method.
These are the messages:
Add 10$ more to get free shipping!
Add 70$ more to get free shipping!

It would be great to be able to customize the output like this:
Add 10$ more to get free tracking shipping!
Add 70$ more to get free priority shipping!

Do you think this is going to be crazy? =/

Kind regards,

Matteo

Jeroen November 22, 2017 at 10:47 am

Hi Matteo,

Shouldn’t be too difficult, you can either create a second code snippet based on the initial one. Or possibly a easier solution would be to display the shipping title in the notice like so:
Line #26: wc_add_notice( sprintf( 'Add %s more to get %s!', wc_price( $remaining ), $method->get_title() ) );
(untested)

This should show the shipping title in the notice, making it more dynamic and in-line with what you’re looking for.

Regards,
Jeroen

Matteo November 24, 2017 at 4:17 am

Thanks Jeroen, I’ll take a look and try and see how far I can go =)
And thank you again for sharing!

Matteo

Matteo November 26, 2017 at 5:44 am

I think I grasped how it works! Thanks! =)
Now I’m out to find a way to separate the variable from the text, so not to directly copy-paste the title of the shipping method! Sure thing, coding is fun!

Matteo

Samuel December 30, 2017 at 12:57 pm

Fantastic the plugin.
I need to show a tag on the product showing free shipping and the state where it will be free. Can you do it?

Example:
Tag on product written freight for free to São Paulo.

And this tag is displayed in the product listing and in the single display of the product.

Jeroen December 30, 2017 at 2:37 pm

Hi Samuel,

For tags like that you may want to look at the Advanced Product Labels plugin to see if that fits your needs.

Cheers,
Jeroen

David February 2, 2018 at 4:04 pm

Hi,
I wonder whether you can help?

I just had a customer point out an issue.

The notice showed OK on the Cart page.

She bought the amount needed to get free shipping, and the purchase went through OK, but then the notice also appeared on the Checkout page after the successful order.

And on the Checkout page after the order was completed (we use Stripe) the amount shown in the notice is the total amount that is needed to get free shipping. In other words it is as though no quantity had been ordered as in, say the amount needed to get free shipping is £10.00 – the notices (two of them one below the other) said ‘Add £10.00 more to get free shipping’

I am running the latest stable WooCommerce on the latest WP version and using a theme from Array Themes.

Thanks

David February 3, 2018 at 8:52 am

Here is a screen grab to show what I mean about the free-shipping notice showing after the purchase, and showing for the full amount that gets free shipping.

https://cloudup.com/cp57YWQUG-f/f

Steve G March 7, 2018 at 5:43 am

I tried your snippet. When using a coupon for free shipping on $25, this is what happens.

Item 19.99
Coupon -3.00

The message displays spend $5.01 more for free shipping. It should be spend $8.01 for free shipping after deducting the coupon amount.

Thanks,
Steve

Jeroen March 7, 2018 at 7:44 pm

Thanks for pointing that out Steve!

I’ve just modified the code snippet to take that into account.

Cheers,
Jeroen

Steve G March 8, 2018 at 10:18 pm

Thanks! It works perfect now.

Just what I was looking for.

Steve

Phraisohn March 19, 2018 at 6:39 am

Thank you very much.
Your code is really helpful and working great on my Woocommerce Project 🙂

Claudia March 21, 2018 at 1:55 am

Hi Jeroen,

This is a great code snippet! We’ve implemented it on our site and works great. I have one question – I noticed this message only shows if the user is logged in. Is there a way to have it show on the cart page if a user is not logged in? Or is this something dictated by the Woo settings?

Thanks!
Claudia

Jeroen Sormani March 21, 2018 at 9:46 am

Hi Claudia,

There shouldn’t be a logged in requirement, but note that this is based on the customer location.
Depending on your store settings and the customer progression it may not know the location of the customer yet, thus not showing a notice.

Cheers,
Jeroen

Rad April 5, 2018 at 2:45 pm

Hi 🙂
Thank you for your snippet!
Is there a way to show appropriate message based on the country which I choose in shipping calculator or on checkout page? I guess the plugin checks matched country by IP when getting to cart or checkout page, but whean I manually change shipping country on any of these pages, the message doesn’t refresh although free shipping treshold do.
Thanks!

Angelo April 26, 2018 at 4:55 am

Hello Jeroen,

I’m using Advanced Free Shipping plugin and Advanced Messages plugin.

Free shipping => $50

Item = $50
Discount = $10
Item – Discount = $40

So it is supposed to display a notice
‘Add $10 more to get free shipping!’

But it will not display, because the basis of the “Advanced Messages plugin” only the sub-total. It is supposed to have an option of ‘Subtotal minus discount’

Can you please help me how I can do that.

Thanks

Leave a Reply