How to Add/Edit Custom Fields in WooCommerce Checkout Page?

To start adding custom fields, head to your WordPress dashboard, go to WooCommerce, and click Checkout Form to open the editor.

Here, you can see both Classic Checkout and Block Checkout Editors. By default, the editor opens in Classic mode. The editor is organized into three default sections – Billing, Shipping, and Additional Details. Also, create custom sections. For more details about the section, navigate to the Manage Sections page.

Please note we are discussing the fields in classic checkout.

Checkout Field Editor for WooCommerce plugin lets you add custom fields apart from the default ones. You can choose from over 24+ field types to your checkout form:

Follow the steps below to add a new field to the checkout form.

Navigate to:

WooCommerce → Checkout Form → Checkout Fields

Click the Add Field button.

Enter the field details.

For this example, we’ll create an Organization Name field.

• Field Type: Text Field
• Name: organization_name
• Label: Organization Name

You can also fill in other settings as required.

Below is a detailed explanation of each option available in the Basic Info/Basic Details section.

This tab includes all the essential settings required to configure a checkout field. The properties available under the Basic Details section are listed below.
Please note that the available options may vary depending on the selected field type. Some settings appear only for specific field types.

This defines the type of input field you want to create.

The plugin supports 24 field types, including Text, Password, Text Area, Select, Checkbox, Radio, Paragraph, URL, and others (as listed earlier on this page).

Choose the field type based on the type of information you want to collect from customers.

The unique identifier of the field. Each field must have a unique name. No two fields can share the same name. It is used internally by WooCommerce and WordPress to save, retrieve, and process the field value.

⚠️ Note: Removing default WooCommerce fields (such as Billing Email or Country) may cause unexpected errors in the checkout process. Also, The field names prefixed with billing_ or shipping_ will automatically prefill with previous order field values. Some field names are reserved & usage will create unexpected errors.

Example:

For a Organization Name field, use: organization_name

Use lowercase letters and underscores instead of spaces.

The visible title displayed above the field on the checkout page. It helps customers understand what information they need to provide.

Example: Organization Name

Additional information displayed below the field label.

Example:
Enter your organization name here (if applicable)

Allows you to prefill the field with a value that appears automatically when the checkout page loads. Customers can modify or replace this value as needed.

A short hint displayed inside the input field before the user enters a value. The placeholder disappears once the user starts typing.

Example:
For an email field, you may show: name@example.com

Specifies the maximum number of characters allowed in the field. For instance, if set to 30, the user cannot enter more than 30 characters.

Example:
Full Name (e.g., max 30)

Specifies the minimum number of characters required in the field. For instance, if set to 3, the user must enter at least 3 characters.

Example:
Full Name (e.g., min 3)

Allows you to apply validation rules to the field. During order placement, the entered value is validated against the defined validation rule or regular expression.

Built-in validators include: Email, Phone, Postcode, State, Number, Url

You can also create custom validation rules in the Advanced Settings section. Any custom validation rule defined there will appear in this dropdown.

Example : Field to enter a logo name which starts with capital letter only

To learn more, see Custom Validators documentation.

If enabled, the field becomes mandatory. Customers must fill in this field to complete the checkout.

Example : License Agreement / Terms & Conditions

Uncheck this option to temporarily disable the field without deleting it.

Example : Enable a field in a particular season only

Stores the field value as part of the order data. To create an order-specific field, enable the Order Meta Data checkbox.

This means:

• The value is specific to each order.
• It is saved in the wp_postmeta table as order metadata.

Example:
A Delivery Date field can be saved as Order Meta Data because it changes for every purchase.

The user metadata is the information directly related to the user and will be the same for every order to a probability of 90%. Data. To create a user-level field, enable the User Meta Data checkbox.

This means:

• The value remains the same across multiple orders.
• It can be edited from the user profile page.
• It is saved in the wp_usermeta table.

Example:
Date of Birth.

Refer the detailed page for more info on Order meta data and User meta data.

If User Meta Data is enabled,

• Custom fields added under Billing or Shipping will appear in:
  My Account → Addresses → Billing/Shipping Address
• Custom fields created in Additional Info or Custom Sections will appear in:
  My Account → Account Details

The following setting is available only for Text and Telephone field types.

Input Masking allows you to restrict the format in which customers enter data.
Instead of allowing free text, you can define a specific pattern that the input must follow. This helps ensure consistent formatting and reduces invalid entries.

The following properties apply only to Select, Multiselect, Radio, and Checkbox Group field types.

Properties Specific to Select and Multiselect Fields

The following properties apply only to Select and Multiselect field types.

Configure default values, minimum, and maximum limits for date, time, month, week, and datetime local field types. These properties control what values are pre-filled and what range is selectable on the checkout form.

Customize the date picker’s display format, default date, selectable date range, year dropdown, disabled days/dates, and more. These settings apply exclusively when the jQuery UI Date Picker is enabled.

Set up time slots with configurable minimum/maximum times, step intervals, time format, preparation time (start time), linked date fields, and disabled time ranges. These settings apply only to the jQuery UI Time Picker field type.

The following properties apply only to the File Upload field type.

Note:
The uploaded file will be displayed as a clickable link on the Thank You page, Order Details page, and so on. So you can view the uploaded file by just clicking on the link, which will open in a new window

The following properties apply to the Heading, Label, and Paragraph field types.

Note:
To display the heading/label field in emails, ensure that the option “Enable Heading/Label field display in emails” is enabled. You can find this option under Other Settings in the Plugin’s Advanced Settings tab.

This section allows you to control the appearance of the field and where it should be displayed after checkout.

Note:
Use these settings to manage the visibility of custom fields across different areas of the store. You can choose to display a field in admin emails, customer emails, order details, or the thank you page. For instance, an Age Verification field can be shown only in admin emails for internal verification, while remaining hidden from customer-facing emails.

This section allows you to apply additional charges based on the value selected or entered in the field.

To learn more about price fields and their configuration, refer to the Price Fields article.

Use this tab to configure conditional display logic for the field. You can define rules to control when the field should be shown or hidden based on specific conditions. To learn more about setting up and configuring display conditions, refer to the Set Display Rules article.

Use this tab to configure repeat settings for the field. Repeat rules allow you to define how many times a field can be repeated or dynamically added by the user with certain rules. To learn more about configuring repeat behavior and available options, refer to the Repeat Rules article.

Edit Field
You can modify the properties of any field, including the default WooCommerce checkout fields.

To Edit a Field

1. Navigate to WooCommerce → Checkout Form → Checkout Fields.
2. Locate the field you want to edit.
3. Click the edit icon next to the field.
4. A popup window will appear displaying the field settings.
5. Update the required properties.
6. Click Save & Close to apply your changes.

Note:
Be cautious when editing default fields (such as Billing Email or Country). Removing or misconfiguring essential fields may affect the checkout process.

Delete Fields

To Delete a Field

1. Navigate to WooCommerce → Checkout Form → Checkout Fields.
2. Select the field(s) you want to delete by checking the box on the left side of each field.
3. Click the Remove button in the action bar.
4. The selected fields will be highlighted with a red background.
5. Click Save Changes to permanently delete the selected fields.

Note:
Be careful when deleting default fields (such as Billing Email or Country). Removing essential checkout fields may cause unexpected issues in the checkout process.

Rearranging Fields

You can change the order of fields to control how they appear on the checkout page.

To Rearrange Fields

1. Navigate to WooCommerce → Checkout Form → Checkout Fields.
2. Drag and move the field using the handle on the left side of each row.
3. Position the field in the desired location.
4. Click Save Changes to apply the new order.

Copy a Field (Duplicate Field)

The Duplicate Field option allows you to quickly create a new field by copying the settings of an existing field. This is useful when you need a similar field with only minor changes.

To Duplicate a Field

1. Navigate to WooCommerce → Checkout Form → Checkout Fields.
2. Click the copy icon next to the field you want to duplicate.
3. A popup window will appear with all properties pre-filled, except for the Field Name.
4. Enter a unique Field Name for the new field.
5. Click Save & Close the field to create the duplicated field.

Note:
The Field Name must be unique. If you use an existing field name, the field cannot be saved.

You can revert your checkout fields to the original WooCommerce defaults using the reset options in the Checkout Fields editor. These options are accessible from the Actions dropdown within any section. To reset a field, you can either reset a specific section individually or reset all sections at once if required.

1. Navigate to WooCommerce → Checkout Form → Checkout Fields.
2. Open the required section in the editor.
3. Click the Actions dropdown.
4. Choose either Reset This Section or Reset All Sections.
5. Click the Apply button.
   

Warning
Use the reset options carefully based on your requirements. If a required default field (for example, Billing Country) is accidentally deleted from a section, you can use Reset This Section to restore only that specific section to its default WooCommerce fields. If you want to remove all customizations and start fresh, use Reset All Sections to revert all checkout field sections to their default configuration.

Please note that all custom fields and changes made will be permanently removed once a reset is applied. This action cannot be undone.

You can import or export checkout fields and sections to reuse configurations across different stores or environments.

• Import / Export Fields – Export or import individual checkout fields.
• Import / Export Sections – Export or import entire checkout sections with all included fields.

Refer to the Import / Export Checkout Fields or Managing Sections (Import / Export sections) documentation for detailed instructions.

Warning: Overriding a Default Field

When you create a new field with the field name of a default field, the existing field gets replaced by the custom field. All properties of the default field will also get replaced with new properties assigned.