• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

Simple Guide to Configure Custom Fields in WooCommerce Checkout

Updated: January 02, 2023 / Checkout, Plugin Tutorials

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.

Conditional VAT Number field in the WooCommerce checkout
Custom order fields: VAT Number

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.

💡 Standard WooCommerce doesn't let you display such additional fields on the order page.

🎉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.

Flexible Checkout Fields WooCommerce

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

Download for free or Go to WordPress.org
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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

Review of the WooCommerce checkout form customizer

Review for the WooCommerce checkout customization plugin

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:

flexible checkout fields custom fields woocommerce plugin
Add custom checkout Fields directly from the WooCommerce menu

Look at the checkout sections:

checkout sections to add custom fields woocommerce
WooCommerce order custom fields plugin - Flexible Checkout Fields sections

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

default checkout form woocommerce
Billing section - display default and custom fields on the WooCommerce order 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.

💡 Do you find the subject of Custom Sections interesting? Then read our WooCommerce Checkout Hooks Visual Guide →

Now, to add a new field, select the field type, provide a label and click Add Field button:

flexible checkout fields available fields
Add custom input fields to the WooCommerce checkout page

Flexible Checkout Fields WooCommerce

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

Download for free or Go to WordPress.org
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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.

    Custom Field Configuration
    WooCommerce order custom fields settings. General tab.

    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.

    Validation for WooCommerce order page custom fields
    Custom field WooCommerce checkout page field 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:

    CSS Class for checkout fields
    Modify custom fields WooCommerce checkout page. CSS styling.
  4. Choose where to display a field

    Custom checkout fields WooCommerce - Display On Settings
    Choose where custom fields WooCommerce will appear.

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

    Field's advanced settings. Set conditional logic in WooCommerce checkout.
    WooCommerce order custom fields - set conditional logic for fields.

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

    WooCommerce checkout custom fields based on conditions

    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!

💡  See the current list of the free/PRO custom fields you can add to the checkout page in the description of Flexible Checkout Fields free and the plugin documentation.

Single Line Text

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

 text field - woocommerce custom input fields example
Custom fields WooCommerce: Text field

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

Checkbox

There is a checkbox field too!

WooCommerce Checkout Custom fields - Checkbox
WooCommerce custom input fields - Checkbox

Headline

Add a heading to organize your checkout fields.

WooCommerce Checkout Custom fields - Headline field
WooCommerce custom order fields - Headline

Paragraph Text

You may also add a custom message to the form.

custom text input woocommerce checkout
WooCommerce Checkout Custom input - Paragraph

HTML or plain text

custom fields woocommerce checkout page html example
Custom fields WooCommerce - HTML

Color picker

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

color picker woocommerce checkout
WooCommerce Checkout fields - Color picker field

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!

radio button field example
WooCommerce custom order fields - Radio button field

Select (Drop down) (PRO)

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

WooCommerce Checkout Custom fields - Select field
Custom fields WooCommerce - Select

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

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

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 →

woocommerce display custom fields on order page
Custom fields example - Date picker

Time picker (PRO)

WooCommerce Checkout Custom fields - Time
WooCommerce custom input fields - Time picker

File Upload (PRO)

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

WooCommerce Checkout Custom fields - File upload field
File Upload is another of the Custom fields WooCommerce available in Flexible Checkout Fields
💡 I have also created another article about this plugin. Check out my guide on How to Create Custom Fields in the WooCommerce Checkout →

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.

💡 This Youtube playlist includes Flexible Checkout Fields video tutorials. Save it for later!

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

Related to custom fields in the WooCommerce checkout

  • Woo address validation

    woocommerce address validation
    Validate emails in WC checkout. Find out how to customize any type of WooCommerce input validation with this guide.

  • WooCommerce checkout CSS

    css woocommerce checkout
    Personalize custom fields. The easiest way to add CSS styling to your custom fields.

Tweet

4 minutes read4733 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Checkout › Simple Guide to Configure Custom Fields in WooCommerce Checkout

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk