In this article, I want to show you WooCommerce custom fields in checkout. There are a lot of fields you can add to your store's checkout. I will show you all of them. Let's begin!
Custom fields can be very useful!
There are different ways in which you can use WooCommerce custom fields in checkout.
Let's say you use WooCommerce store to sell business services. You can add an Upload field to the checkout so your clients can send you a brief of a project.
Do you sell your products in B2B model? Then the simple text field will be useful. You can add a VAT number field this way.
Maybe you need some information for marketing purposes. For example, you can ask your clients how do they find you. In this case, use a radio button with a few options to choose by your clients.
Standard WooCommerce doesn't let you create such additional fields.
But there is a plugin!
I'll show you the Flexible Checkout Fields plugin in this simple guide. You will learn how to install and configure the plugin.
Also, during this article, you'll learn how to add WooCommerce custom fields in checkout.
Flexible Checkout Fields
We created this plugin so WooCommerce store owners can easily add custom fields to the checkout.
I have created an article about this plugin. Check out my guide on How to Create Custom Fields in Checkout →
People really appreciate our work! Not to mention, over 30,000 stores use this plugin worldwide on a daily basis.
Also, our plugin has 4.4 out of 5 stars rating. Look at some of the reviews:
What's more, you can download this plugin for free!
How to add WooCommerce custom fields in checkout
Once you install and activate the plugin, you can start adding fields.
Go to WooCommerce → Checkout Fields:
You'll see Flexible Checkout Fields' configuration screen:
Look at the tabs:
Billing is the default one. You can configure how this section looks at the checkout:
However, this plugin gives you many more options. You can add any custom field after or before:
- Customer Details
- Billing Form
- Shipping Form
- Registration Form
- Order Notes
- Submit Button
You'll find them in the Custom Sections tab.
Now, to add a new field, select the field type, provide a label and click Add Field button:
You can configure both custom and standard fields. Simply click on the field to show all configuration options.
You can enable or disable any field. Yes, you can disable the default WooCommerce fields, too.
Also, you can set a field as required. This way a customer will not be able to make an order without interacting with a field. For date field interacting means setting a date, for a text field it means providing some text etc.
You can use both default and custom validation.
In custom validation, you can program any validation you need.
We created an article about validation feature for the checkout fields. You should definitely check it out! It's a great feature of this plugin :)
Set your own CSS class
You can change the way fields look like in your store. Simply go to Appearance tab in a field's settings. You can set your own CSS classes here:
Where to display a field
You can configure where the plugin should display a field. By default, it displays a field on:
- Thank You Page
- My Account - address tab
- My Account - Orders tab
- In Emails (about orders)
If you don't want to show these fields in any of this places, simply unmark an option.
Advanced tab lets you configure conditional logic.
There are three options:
- fields conditional logic,
- product/category configuration logic,
- shipping method conditional logic.
It means that the plugin displays a field when another field is present. For example, when a customer marks a checkbox:
Another option is when there is a defined product (or a product from the defined category) present in customer's checkout or client chose defined shipping method in the checkout.
Fields available in Flexible Checkout Fields plugin
I have something for you on the end. I prepared a cheat sheet for you :)
You don't have to add every field to your checkout to find out how it looks like.
You'll find every type of field below:
Single Line Text
Select (Drop down)
HTML or plain text
In this article, you have learned how to configure WooCommerce custom fields in checkout.
However, this plugin has many more features. For example, you can rearrange or hide default WooCommerce checkout fields. We described all the features in the docs.
We're looking for your feedback in the comments section below.