Customise your Checkout Fields via your admin panel

The checkout field editor provides you with an interface to add, edit and remove fields shown on your WooCommerce checkout page. Fields can be added and removed from the billing and shipping sections, as well as inserted after these sections next to the standard ‘order notes’.
The checkout field editor supports several types for custom fields including text, select, checkboxes and datepickers.
Checkout Field Editor: Add custom fields to your checkout process!
Add custom fields to your checkout process!

Core fields can also be moved around giving you more control over your checkout without touching the code.

Field sections
There are 3 sets of fields which you can edit:
Billing – The billing section on the checkout
Shipping – The shipping section on the checkout (must be enabled)
Additional Fields – Appear after the billing and shipping sections on your checkout next to order notes (order notes must be enabled)
Choose a tab at the top of the page to edit a section’s fields.

Adding and editing custom fields
At the bottom of the fields table you will see an “add field” button.

Columns

Name – Choose a name for your field. This will be used as the meta key (for saving the field) and will be sanitized. This name needs to be unique.
Type – Choose a field type. See ‘types’ below.
Label – Label for the input shown on the checkout page.
Placeholder / Option values – Placeholder text for inputs OR the options for select boxes, radios etc. Values should be pipe (|) separated. The two scenarios are explained below:
An options list starting with a pipe creates an empty choice. Used in conjunction with a required select field, it will force the user to choose a valid option.
An options list without a pipe as first character will make the first option in the list the default choice whether the field is required or not.
Position – Choose how the box is positioned – left, right, or full width. This gives the field a css class.
Clear row – Useful when aligning fields left and right – clear row stops a field being shown on the same row as the current field.
Validation rules – Choose validation rules to apply; email, number, and required are supported.
Display Options – Option to display fields in thank you emails, thank you pages, or on order detail pages. (CFE 1.1.8+)

Types

The following custom types are supported:

Text – standard text input.
Password – password text input.
Textarea – A textarea field.
Select – A dropdown/select box. Requires options set.
Multi-select – A multiselect box. Requires options set.
Radio – A set of radio inputs. Requires options set.
Checkbox – A checkbox field.
Date picker – A text field with a JavaScript data picker attached.

Editing core fields
Within the Billing and Shipping sections you will see the core fields highlighted in purple.
You’ll notice that for some of the core fields, some options are disabled.
You can’t change the name of core fields
You can’t change the type of special core fields (country and state)
Fields which change dynamically based on the chosen country of the user (address 1, address 2, city, state, postcode) cannot have custom validation rules e.g. required is determined by the locale, not by your settings.
With those limitations in mind, you can however change the labels and position of the fields. You can also ‘disable’ them by checking the checkboxes per-row and clicking the ‘Disable/Remove’ button. Disabled fields will be greyed out.
Use at your own risk.
Re-enable core fields by checking the rows and pressing the ‘enable’ button.

Resetting the checkout fields
To reset your fields back to the originals, go to WooCommerce > System Status > Tools and look for the “Checkout Fields” section. Click the ‘reset’ buttons and any customisations to your fields will be removed.

Field display and checking values
Consider the following date picker field:
On the checkout this will be displayed.
After placing an order, the field will be visible from the admin section ‘Custom Fields’ panel.