Simple Guide to Configure Custom Fields in WooCommerce Checkout

In this article, I want to show you how to display custom checkout fields on the WooCommerce order page. And there are a lot of new fields you can add to the WooCommerce checkout, for example, a custom input. I will show you more field types in the article!

Do you want to show more fields on the checkout page as you lack this option in WooCommerce? It is a bit anxious to add a piece of custom code found online or expensive when you must pay for it!

Wouldn't be great to add input, color, HTML, image, textarea, and custom fields to the checkout page with a plugin? Today, you will learn an easy and fast way to customize the order form in WooCommerce. Let's begin!

Table of contents

1. Why add Custom fields to the order form?
2. Checkout Fields Customization Plugin
3. Display custom fields on the WooCommerce order page
4. Custom fields options
   • General settings
   • Validation
   • Set your CSS class
   • Choose where to display a field
   • Conditional logic
5. What field types I can use?

Why add Custom fields to the order form?

There are different ways in which you can use custom fields on the checkout page.

🧑🏼‍💼 Let's say you sell services. You can add an Upload field to the WooCommerce checkout so your clients can send you a brief of a project. No additional emails!

Do you sell your products in the 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 they find you. In this case, you may use a radio button with a few options to choose from by your clients.

🎉But there is a way!

Let's meet Flexible Checkout Fields - the plugin to manage your WooCommerce checkout order form and add custom fields!

Flexible Checkout Fields

With the plugin, you can easily add custom fields to the checkout, reorder them, or remove specific fields from the order form.

👉🏼 Watch this video to see what this plugin (FREE version) can do with your checkout page:

Over 80,000 stores use this plugin worldwide!

Also, our plugin has a 4.6 out of 5 stars rating. Look at some of the reviews:

What's more, you can download this plugin for free! Now, let's add some fields!

Display custom fields on the WooCommerce order page

👉🏼 Once you install and activate the plugin, you can start adding fields.

Go to WooCommerce → Checkout Fields:

Look at the checkout sections:

Billing is the default one. So here, you can configure what fields will appear on the checkout page:

👉🏼 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:

Fields configuration

I will show you now how to use the plugin setting to manage the appearance of the checkout fields. You may use:

1. General settings

   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 the date field interacting means setting a date, for a text field it means providing some text, etc.

2. Validation

   You can use both default and custom validation.

   

   It's worth mentioning, that you can use custom validation if you need to extend the standard ones.

   You can read an article about the validation for the checkout fields. You should check it out! It's a great feature of this plugin 🙂

3. Set your CSS class

   You can change the way fields look in your store. Simply go to the Appearance tab in a field's settings. You can set your CSS classes here:

   

4. Choose 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 these places, simply unmark an option.

5. Conditional logic

   The Advanced tab lets you configure conditional logic. It's the PRO feature.

   

   👉🏼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 the customer's checkout or a client chooses a defined shipping method in the checkout.

   Flexible Checkout Fields PRO WooCommerce £59

   Add custom fields WooCommerce. Edit, add new or hide unnecessary fields from the checkout form.

   Add to cart or View Details

   WP Desk

   80,000+ Active Installations

   Last Updated: 2023-03-15

   Works with WooCommerce 7.1 - 7.5.x

Fields available in the Flexible Checkout Fields plugin

Let's see the list of checkout fields you can add to the WooCommerce checkout page 🙂

You don't have to add every field to your checkout to find out. Take a look at some examples!

Single Line Text

First, you can add input fields to the WooCommerce checkout page.

So, you are no longer restricted to the default WooCommerce inputs, you can add custom ones!

Checkbox

There is a checkbox field too!

Headline

Add a heading to organize your checkout fields.

Paragraph Text

You may also add a custom message to the form.

HTML or plain text

Color picker

How about the color picker on the WooCommerce checkout page? You can use it to build color swatches for WooCommerce products!

Radio button (PRO)

This field type is available in the PRO version of the plugin where you can use a standard radio or radio with colors, or radio with images! Read more about custom radio fields!

Select (Drop down) (PRO)

This field type is also available in the PRO version of the plugin.

You can check all features of the PRO version on the plugin page:

Date picker (PRO)

It's very useful when you want to let customers pick a delivery date or precise time for the WooCommerce order. Read more →

Time picker (PRO)

File Upload (PRO)

This is probably the best custom field on the WooCommerce order form page you can add to reduce additional emails!

Summary

In this article, you have learned how to add WooCommerce custom fields to the order checkout page.

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 plugin documentation.

We're looking for your feedback in the comments section below.