Add shipping notice on WooCommerce checkout page

Add shipping notice on WooCommerce checkout page
Author Bartosz Gajewski
Updated:
2019-08-19
Reading time:
4 minutes read

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.

Flexible Shipping WooCommerce

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.org
100,000+ Active Installations
Last Updated: 2022-10-03
Works with WooCommerce 6.6 - 7.0.x

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.

Flexible Shipping method settings

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:

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.

If you want to know step-by-step instructions and how to change the default message, read our how to display remaining amount to free shipping in WooCommerce tutorial

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 →

If you want to get detailed information about it, read our how to change the “No shipping options were found” message tutorial

 

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.

add custom section with flexible checkout fields plugin

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.   

add new html field in woocommerce checkout page

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

general section of new HTML field in checkout page

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. 

add css class to html field in woocommerce checkout page

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

shipping notice on WooCommerce checkout basic example

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

shipping notice on WooCommerce checkout custom example

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

Want to know more about CSS Class in WooCommerce. Read our guide about setting your own CSS Class to any custom fields in your WooCommerce store.

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!

Comments
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Check out our case studies

Dream Home Story
Dream Home’s Story

Read Octolize Case Study about Dream Home – a provider of furniture and products for the home and office.

2 minutes read
Vitrek’s Story

Read Octolize Case Study about Vitrek – a provider of innovative global solutions for High Voltage Test and Measurement.

2 minutes read
EnglishSpeakingMum’s Story

Read Octolize Case Study about EnglishSpeakingMum – Polish dedicated and involved parenting blogger.

2 minutes read

Join over 10,000 subscribers

Stay up to date and get WooCommerce tips & Octolize news right to your inbox!