Adding shipping notice on WooComemrce checkout page can be an important thing 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?
Of course, you can use your PHP function and add this notice, but I’ll show you a simple way with CSS code that you can use on your store.
All you need is 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.
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.
In this article, I showed you how to add shipping notice on WooCommerce checkout page using Flexible Checkout Fields. I hope that it’ll be helpful and you’ll add your own shipping notice. Good luck!