Add shipping notice on WooCommerce checkout page

Adding shipping notice on WooCommerce checkout page can reduce abandoned shopping carts in your store. Some WordPress themes offer that feature, but what if your theme doesn’t support that, and you want to inform your clients? In this article, I’ll show you three different ways to do that using free and paid solutions. 

Of course, you can use your PHP function and add shipping notice in WooCommerce, but it requires the work of a developer. Instead, you can use ready-made solutions that will help you do this without writing a single line of code. In this article, I will show three different approaches to displaying shipping messages on the checkout page in WooCommerce:

• remaining amount to free shipping with free plugin
• custom message when no shipping methods are available with free plugin
• fully customizable notice with paid plugin.

Display remaining amount to free shipping

One of the primary uses of shipping notices is to display the amount missing for free shipping. That kind of message works great for conversion and increasing the value of customers’ shopping cart. Many studies have confirmed the effectiveness of such solutions, so it is not surprising that more and more online stores are using this type of message.

Adding a message about the amount missing for free shipping is effortless. All you need to do is install and activate the free Flexible Shipping plugin. More than 130.000 shops worldwide use it daily. The free version will work great as a basic shipping calculator. It allows you to set shipping based on weight and cart total. Additionally, it has built-in feature to display remaining amount to free shipping.

To display remaining amount to free shipping, you have to add Flexible Shipping method, set the free shipping threshold and check the ‘Left to free shipping’ notice box.

Such a solution will automatically display a proper message on the shopping cart and checkout page. In the 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.

Custom message when no shipping methods are available

Another good practice is to create an appropriate message when for some reason none of the shipping methods are available. WooCommerce itself does not have an option to change the default “No shipping options were found” message. Customers who receive the standard notice are more likely to abandon the shopping cart. You can save a lot of an abandoned shopping carts by creating a custom message that explains the reason and makes it easy for them to change their cart contents or contact the store.

You can easily change the “No shipping options were found” message in WooCommerce using a free plugin called Shipping Notices. It allows you to replace the default “No shipping found” notice with your custom text. You can even decide where the notice should be displayed: cart, checkout, or both of them.

Get Free Shipping Notices Plugin →

Fully customizable shipping notice

If you need a more advanced solution, you should use the PRO version of the Flexible Checkout Fields. With this plugin, you can add HTML field in the checkout page and adjust it with CSS.

Flexible Checkout Fields

Flexible Checkout Fields allows you to add new fields in the checkout form, edit or even hide existing ones. You can decide where do you want to add it – in order, billing or shipping section. What’s more, you can add custom sections, so basically this plugin allows you to completely control your WooCommerce checkout page.

Download the Flexible Checkout Fields plugin

Adding shipping notice on WooCommerce checkout page is only one of the many useful things that you can make with Flexible Checkout Fields plugin. If you want to read more about Flexible Checkout Fields, read our article about how to change the default WooCommerce checkout page.

How to add shipping notice on WooCommerce checkout page?

Go to WooCommerce → Checkout Fields → Settings. In Custom Sections enable Before Customer Details and Save Changes.

Now, you can add HTML field before customer details, at the top of WooCommerce checkout page. If you want to add it in a different place, you can enable one of the remaining fields or choose between billing, shipping, and order sections. Remember that you can change it with CSS, but in my opinion, adding it before customer details is the simplest solution.  

Go to Before Customer Details section and Add New Field. As a Field type choose HTML and in the Label field type your shipping notice. Here you can use HTML and style it, but I recommend to do it with CSS. For now, just enter your label and click on Add Field.   

Now, your shipping notice will appear on Section Fields. It will be the last of them. Click on it to see more options. 

Here you can add CSS Class to this field and use the magic of CSS to adjust it to your store. As a default, it will be a form-row class, like the rest of the fields. Change it to your new class and Save Changes. Now, you can adjust it with CSS using entered CSS Class. 

I’m using Storefront theme, so as a default, it looks like this:

Only a few lines of CSS and I’ve got this:

Your shipping notice will depend on your theme, but it’s all up to you how to make it look.

Summary

In this article, I showed you three different ways how to add shipping notice on WooCommerce checkout. I hope that it’ll be helpful, and you’ll add your shipping notice. Good luck!