How to Add and Display WooCommerce Custom Fields on the Checkout & Order Pages

In this article I'll show you how to add and display WooCommerce custom fields on the checkout and order pages. You can add many field types — text inputs, color pickers, uploads and more — and I'll show examples along the way.

Want more fields on checkout because WooCommerce doesn't include them by default? Adding custom code found online can feel risky or time-consuming. And paid solutions may be expensive.

Good news: you can add custom fields to the WooCommerce checkout with a plugin quickly and safely. Below is an easy, practical way to customize your order form using a trusted plugin. Let’s begin.

Why add WooCommerce custom fields to the order form?

There are many practical uses for checkout custom fields:

• Sell services? Add a file upload field so clients attach briefs during checkout — no extra emails.
• Sell B2B? Add a VAT number or company ID text field. Example: add a VAT number field.
• Need marketing data? Use radio buttons or dropdowns to ask how customers found you.

Note: Standard WooCommerce doesn’t show these extra fields on the order page by default.

Best plugin to manage WooCommerce custom fields: Flexible Checkout Fields

Flexible Checkout Fields is a plugin that makes it simple to add, reorder, hide, or validate custom checkout fields.

Key highlights:

• Add fields directly from WooCommerce → Checkout Fields.
• Choose where fields appear (checkout, thank-you page, emails, account pages).
• Support for many field types; PRO adds conditional logic and advanced fields.

Download & info: Flexible Checkout Fields (free) — plugin documentation (PRO features).

Watch a quick demo:

How to display WooCommerce custom fields on the order page

After installing and activating Flexible Checkout Fields, go to WooCommerce → Checkout Fields. From there, add fields and configure where they appear.

Add custom checkout fields directly from the WooCommerce menu

The plugin organizes fields into sections (Billing, Shipping, Customer Details, Registration, Order Notes, Submit Button, and Custom Sections). You can insert custom fields before or after any of these areas.

WooCommerce order custom fields plugin — sections overview

Add a new field

Select a field type, add a label, then click Add Field. The field will appear in the chosen section and can be reordered via drag & drop.

Add custom input fields to the WooCommerce checkout page

Configure WooCommerce custom fields

Each field has settings grouped into tabs. You can quickly set visibility, validation, appearance, and where a field is displayed.

1. General settings

   Enable or disable fields, change labels, and mark fields as required. Both default and custom fields are configurable.

   

2. Validation

   Use built-in validation or add custom validation rules when needed.

   

3. Appearance & CSS

   Set CSS classes in the Appearance tab to match your store’s style.

   

4. Where to display fields

   By default, fields can also appear on:

   • Thank You page
   • My Account — Address tab
   • My Account — Orders tab
   • Order emails

   Uncheck any option to stop showing fields in those places.

5. Conditional logic (PRO)

   The Advanced tab (PRO) adds conditional logic. Show fields only when certain conditions are met — e.g., another field is checked, a specific product is in cart, or a particular shipping method is chosen.

   

WooCommerce custom fields — available field types

Here are common fields you can add with Flexible Checkout Fields. Not all types are free — PRO unlocks advanced ones.

• Single Line Text — standard input for extra info.
• Checkbox — accept terms or add optional items.
• Headline / Paragraph — organize or add instructional text.
• HTML or Plain Text — insert custom content or links.
• Color Picker — useful for product color choices or swatches.
• Radio / Select (PRO) — single-choice fields, with images or colors in PRO.
• Date & Time pickers (PRO) — let customers pick delivery dates/times.
• File Upload (PRO) — customers can attach files at checkout.

File Upload is a powerful custom field — useful for briefs, images, or documents.

For the full feature list and up-to-date info, check:

• Flexible Checkout Fields — WordPress plugin page
• Plugin documentation — field types

Summary

Adding WooCommerce custom fields improves data collection, reduces follow-up emails, and helps tailor the checkout experience. Flexible Checkout Fields (free + PRO) is a practical tool to add and control these fields without custom coding.

Want conditional fields, date pickers, or uploads? Consider the PRO version. For basics, the free plugin covers many common needs.

FAQ — Quick answers

More resources:

• How to Create Custom Fields in the WooCommerce Checkout — guide
• WooCommerce Checkout Hooks Visual Guide
• Video tutorials — Flexible Checkout Fields playlist

Related Articles

Customize the WooCommerce Checkout Page: Top Tips for a Seamless Experience

I don’t have to convince you that the checkout page is one of the most important parts of every WooCommerce store. The possibility to fully adjust it ...

Create Custom Fields in WooCommerce Checkout and Product Pages

Standard WooCommerce doesn't let you create custom fields without writing your code. However, there are situations when you need the custom product or...

Customize the WooCommerce Checkout Page: Tips & Tools for Success

The WooCommerce Checkout Page is simple by default for there is no built-in option to customize the form in the WooCommerce plugin. So, how to edit, c...

Customize WooCommerce Checkout Fields - Free Checkout Field Editor Plugin - Guide

Billing fields fill the default section of the WooCommerce checkout page. Learn how to add, edit, and remove billing address fields in the WooCommerce...

How to customize the WooCommerce checkout page & fields with CSS

There are two types of fields in WooCommerce: product and checkout fields. And you can personalize both of them! In this article, you'll learn how to ...