Docs: Flexible Checkout Fields WooCommerce

Key Plugin Features

Flexible Checkout Fields PRO extends the free Flexible Checkout Fields plugin and lets you edit the WooCommerce checkout form. Use it when you want to change the default checkout fields, add your own fields, or collect additional information from the customer that is needed to process the order.

The plugin's key features:

• editing checkout form fields, including labels, CSS classes, default values, and field requirements,
• adding custom fields in different checkout sections, for example before customer details, before the payment form, before shipping, before the order button, or after the order review,
• support for many field types, including text, textarea, number, email, phone, URL, checkbox, multi-checkbox, select, multi-select, radio, radio with images, radio with colors, color, date, time, file upload, heading, paragraph, image, HTML, and hidden field,
• displaying field data in the order, emails, the My Account page, and the thank you page, depending on the field configuration,
• editing additional fields in the order details in the admin panel,
• conditional logic, which lets you show, hide, or set a field as required based on WooCommerce fields, Flexible Checkout Fields fields, Flexible Product Fields fields in the cart, cart contents, cart value, user role, shipping method, payment method, or date,
• assigning prices to custom checkout fields, for example a fixed amount or a percentage of the subtotal or order total,
• field validation, including settings for dates, times, the number of selected options, and uploaded files,
• compatibility with WPML and Polylang for translating additional section titles.

The plugin is especially useful when your store needs additional information from the customer, such as an identification number, preferred fulfillment date, consent, order instructions, a file for product personalization, or the choice of an additional paid service.

Remember: the plugin works with the classic WooCommerce checkout based on the [woocommerce_ checkout] shortcode. It does not support checkout built with WooCommerce blocks. If you use block checkout, check our plugin designed specifically for that checkout type - WooCommerce Checkout Fields Blocks.

Demo

On the demo page, you can check how the PRO versions of our plugins work before purchase. You only need a valid email address to create a test account.

Installation

Installation guide →

Subscription activation

Activation guide →

Requirements

The plugin requires the page set in WooCommerce as Checkout to contain the shortcode:
[woocommerce_ checkout].
The plugin will not work if the Checkout page is built with so-called blocks, introduced in WooCommerce 8.3.0.

✅ Plugin FAQ →

Editing Checkout Form Fields

Expand the selected field to edit it. You can change the field order. Drag and drop the selected field to change its position.

General Settings

Enable field - uncheck if you want to hide the field.

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Default value PRO - the field can be automatically filled with a default value.

For a field with options, for example Radio, enter the Value of one of the options.

Meta name - the field name in the database. You cannot edit it after adding the field.

Adding custom fields

You can add multiple fields to sections of WooCommerce checkout.

1. Go to Add new field box.
2. Select field type.
3. Enter the field's label.
4. Change the field's name (optional for developers)
5. Click the Add Field button.
6. Click the Save Changes button.

The field will be added to Edit Section. Now you can edit the field. Remember to save changes.

Advanced Settings

Validation - use any WooCommerce validation if needed.

Appearance Settings

Placeholder text - add or change the field content.

CSS class - add or change the CSS class.

Display Settings

In this tab, you can choose where and how a given field should be displayed. All options are enabled by default.

Pages/emails - choose where data from a completed field should additionally be displayed.

Formatting on pages/in emails

Display field on a new line - the field will be displayed on a new line, overriding the default WooCommerce settings.

Display field label - the field label will appear before the completed value. This option is available only for additional fields.

State / Province formatting

Display state code - for the State / Province field. Displays the state code instead of its full name.

Display a comma before the field when the field is on a new line - for the State / Province field. Displays a comma before the State field value.

Additional Checkout Form Fields

You can add new fields independently in each section.

1. Go to the Add new field section.
2. Select the field type.
3. Complete the field label.
4. Enter your own field name (optional).
5. Click the Add field button.
6. Click the Save changes button.

The field will be added to Section editing. You can now expand the field and edit its settings. Finally, do not forget to save your changes with the Save changes button.

 

Editing Additional Fields in an Order

You can edit added fields below the order. Changing settings and saving the order will update the order details.

 

 

Add this code to the functions.php file if the address fields are not arranged correctly.

add_action( 'admin_head', function() {
?>
<style>
#order_data .order_data_column div.address[style*="display: none"] + div.edit_address {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
</style>
<?php
} );

 

 

Conditional Logic

For any field, you can create rules that determine when the field should be visible or hidden.

Since version 4.0.0, nine configuration types are available for:

• Woo fields,
• Flexible Checkout Fields plugin fields,
• Flexible Products Fields plugin fields,
• cart contains,
• cart has,
• user,
• shipping methods,
• payment methods,
• date.

To configure rules, go to the Advanced tab in field editing and select one of the available options.

Assigning a Price to a Custom Field

Fields added with FCF have an additional "Price" tab with options for assigning a price.

The change in the final purchase amount depends on the selected price type and its rate.

• Fixed amount - net price expressed in the store currency and independent of the cart.
• Percentage of cart subtotal (excl. tax) - percentage amount based on the net cart subtotal (Subtotal ex. VAT).
• Percentage of cart subtotal (incl. tax) - percentage amount based on the gross cart subtotal (Subtotal incl. VAT).
• Percentage of total - percentage amount based on the total amount (Total).

 

The option to add a price is available for the following fields:

• Text
• Textarea
• Number
• Email
• Phone number
• URL
• Checkbox
• Multi-checkbox
• Select
• Multi-select
• Radio
• Radio with images
• Radio with colors
• Color
• Date
• Time
• File upload

How to Add a Price to a Field

1. Add a new field.
2. Add options if the selected field type requires them, for example the "Radio" field.
3. Select the "Price" tab and check the "Enable price" checkbox.
   1. One row with settings will appear if the selected field has no options, for example "Single line (input)".
   2. Separate rows with settings will appear for each option if the selected field has options, for example "Select".

 

4. Assign a price by selecting its type from the "Price type" list:
   1. Fixed amount - enter the net price
   2. Percentage of cart subtotal (excl. tax) - enter the percentage
   3. Percentage of cart subtotal (incl. tax) - enter the percentage
   4. Percentage of total - enter the percentage

 

5. Select the tax class from the "Tax class" list. Save changes.
   This option will appear when the assigned price is positive and the "Enable tax rates and calculations" option is enabled in the WooCommerce > Settings > General settings tab.

 

Showing Prices in the Store

The price assigned to a field will be shown in the store either as a gross total price or as a percentage.

• Checkout page - the price will be visible in parentheses next to the field label or next to the option, and in the "Your order" section.

• Purchase summary - the price will be shown as an amount included in the purchase
• WooCommerce > Orders tab - the fields visible there are editable, which means you can change the label and price and add tax.

Important Information

1. Enable the "Rounding" option in the WooCommerce > Settings > Tax tab. This setting is required when more than one field with a price is added.
2. Do not set the same labels for choice options.
3. Fields added in the "Billing" and "Shipping" sections are cached, which means these fields are saved and automatically filled in during future purchases. Other sections are not cached.

Individual Field Types

Watch our video, where we remove the fields a store does not need, starting with the order notes box. We also explain what happens to the data: hidden fields disappear for the customer but stay visible to you in the order screen.

Text Fields

Text

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - use any WooCommerce validation if needed.

Textarea

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - use any WooCommerce validation if needed.

Number

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Minimum value - values below the minimum value will be rejected by field validation.

Maximum value - values above the maximum value will be rejected by field validation.

Step value - the interval between consecutive acceptable values.

Validation - only default validation is available.

Email

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - only default validation is available.

Phone Number

Field appearance in the store:

 

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation regular expression - enter the number format using regex.

The code [0-9]{3}-[0-9]{3}-[0-9]{3} enforces a number:

• divided into 3 parts
• where each part contains 3 digits
• from 0 to 9
• with a hyphen as the separator

for example 123-456-789.

The code [0-9]{3}\s[0-9]{2}\s[0-9]{2}\s[0-9]{2} enforces a number:

• divided into 4 parts
• where the first part contains 3 digits and the others contain 2 digits each
• from 0 to 9
• with a space as the separator

for example 123 45 67 89.

Validation error message - enter your own message containing information about the correct phone number format.

Validation - only default validation is available.

URL

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - only default validation is available.

Fields with Options

Checkbox

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Value - this is the value displayed in order editing if the user checks the field.

Add the code below to the active theme's functions.php file so that the field value is also visible on the purchase summary page and other pages when the user does not check the field.

add_filter( 'flexible_checkout_fields_user_meta_display_value', 'flexible_checkout_fields_print_value', 20, 2 );
add_filter( 'flexible_checkout_fields_print_value', 'flexible_checkout_fields_print_value', 20, 2 );
function flexible_checkout_fields_print_value( $meta_value, $field ) {
if (
'' === $meta_value &&
isset( $field['type'] ) &&
\WPDesk\FCF\Free\Field\Type\CheckboxType::FIELD_TYPE === $field['type']
) {
$meta_value = __( 'No' );
}
return $meta_value;
}

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Multi-checkbox

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Option value - enter the value and label for each field option. The value will not be visible in the form.

Option label - enter the value and label for each field option. The label will be visible in the form.

Checked by default - select this option to make the checkbox checked by default.

Meta name - the field name in the database. You cannot edit it after adding the field.

Minimum number to select - set the minimum number of fields required to be checked. Select the "Required field" option in the "General" tab for the setting below to work.

Maximum number to select - set the maximum number of fields allowed to be checked. Select the "Required field" option in the "General" tab for the setting below to work.

Validation - only default validation is available.

Select

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Option value - enter the value and label for each field option. The value will not be visible in the form.

Option label - enter the value and label for each field option. The label will be visible in the form.

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - only default validation is available.

Multi-select

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Option value - enter the value and label for each field option. The value will not be visible in the form.

Option label - enter the value and label for each field option. The label will be visible in the form.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - only default validation is available.

Radio

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Option value - enter the value and label for each field option. The value will not be visible in the form.

Option label - enter the value and label for each field option. The label will be visible in the form.

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - only default validation is available.

Radio with Images

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Option value - enter the value and label for each field option. The value will not be visible in the form.

Option label - enter the value and label for each field option. The label will be visible in the form.

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Element size in pixels - set the size of a single element representing the color.

Hide option labels - check this field to hide color option labels.

Validation - only default validation is available.

Radio with Colors

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Option value - enter the value and label for each field option. The value will not be visible in the form.

Option label - enter the value and label for each field option. The label will be visible in the form.

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Element size in pixels - set the size of a single element representing the color.

Hide option labels - check this field to hide color option labels.

Validation - only default validation is available.

Open Fields

Color

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Default value PRO - the field can be automatically filled with a default value.

Meta name - the field name in the database. You cannot edit it after adding the field.

Validation - only default validation is available.

Date Field

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Date format - enter the WordPress date format.

Days before - enter the range of days available in the calendar before the current date. Leave empty if the choice should not be limited. This setting will not skip weekends or holidays.

 

Days after - enter the range of days available in the calendar after the current date. Leave empty if the choice should not be limited. This setting will not skip weekends or holidays.

Excluded dates - enter specific dates separated by commas. Use the selected date format, for example dd.mm.yyyy or yyyy-mm-dd.

Excluded days of the week - select the weekdays that will not be available in the calendar, for example weekends.

First day of the week - select the weekday shown first in the calendar, for example Monday.

Selected days limit - set the maximum number of days available to select in the calendar.

Closing time - enter a value in HH:MM format. After this time is exceeded, selecting today's date will not be possible.

Validation - only default validation is available.

Time Field

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Use 12-hour clock - check this field to switch the clock to 12-hour mode (AM/PM).

Minute interval - enter a value from 1 to 60 to set the interval between minutes available from the list.

Start time - enter the earliest time that can be entered.

End time - enter the latest time that can be entered.

Validation - only default validation is available.

File Upload

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Required field - check this if you want the field to be required.

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Selected files limit - set the limit of files available to upload.

Allowed file types - select the allowed file extensions.

Allowed file size in MB - set the allowed size in MB for the uploaded file.

Other Fields

Headline

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Paragraph

Field appearance in the store:

Field configuration:

 

 

Enable field - uncheck if you want to hide the field.

 

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Image

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Label - change the field label. You can use HTML in the content.

Upload image - click this button to select an image.

Image size (in pixels) - set the width of the inserted image.

HTML

Field appearance in the store:

Field configuration:

 

Enable field - uncheck if you want to hide the field.

 

Label - change the field label. You can use HTML in the content.

Meta name - the field name in the database. You cannot edit it after adding the field.

Hidden

This field is hidden in the form and the user does not complete it. The field value is set in the theme's functions.php file using a filter.

The example below shows how to set the default_value value for the _billing_my_field field.

add_filter( 'default_checkout_billing_my_field', function( $value = null ) {
return 'default_value';
} );

If the value should be saved only with the first order, the filter needs to be changed.

add_filter( 'default_checkout_billing_my_field', function( $value = null ) {
if ( $value !== null ) {
return $value;
}
return 'default_value';
} );

Settings

The plugin configuration is available in the WooCommerce -> Checkout Fields -> Settings menu.

 

jQuery UI CSS - in the plugin settings, you can disable loading the jQuery UI CSS file. This CSS file is used to style some additional fields in the form, such as the Date field, but it may cause conflicts with other plugins that also use jQuery UI, for example to create tabs. If you notice page display issues, try disabling this CSS file.

Additional sections - you can add new sections in the checkout form. Select additional sections and click Save changes. The selected sections will appear as tabs in the plugin menu.

 

New section

 

 

Editing Additional Sections

After adding a new section, you can go to the tab and add any fields and customize the section. You can set the section title and heading type and set the CSS class.

 

All fields in the "Billing" and "Shipping" sections are cached, which means that when the next order is placed, they will already be filled in or checked according to the previous order.

Cached sections:

• Before customer details PRO
• Before billing form heading PRO
• Before billing form PRO
• Billing
• After billing form PRO
• Before shipping form heading PRO
• Before shipping form PRO
• Shipping
• After shipping form PRO
• After customer details PRO

Non-cached sections:

• Before order notes PRO
• Order
• After order notes PRO
• Before payment PRO
• Before order confirmation PRO
• After order confirmation PRO
• After payment PRO
• After order review PRO

Use Cases

Additional Checkboxes

 

You can add additional checkboxes that will appear directly above the place order button. For example, you can add consent to receive a newsletter or other terms that the user should agree to. Each added checkbox can be required or optional.

 

In the plugin settings, add the Review order (before) section. Then:

1. Add a Checkbox field, Save changes, and expand the field to edit it.
2. Check Required field if you want the option to be required.
3. Enter the checkbox content.
4. Enter the checkbox value, for example Yes, Checked, etc. The value will appear only in the order preview if the checkbox has been checked by the user. This is only information for the administrator.
5. Optionally enter a CSS class.
6. Click Save changes.

If the checkbox has been checked by the user, the information will appear in the order details:

Removing Changes from the Checkout Form

It is possible to reset section settings using the "Reset section settings" link. For standard sections (Billing, Shipping, Order), the default field settings will be restored, and for additional sections, all added fields will be removed.

 

Options for Advanced Users

Below, we present options for modifying the plugin for advanced users who know the basics of PHP, HTML, and CSS.

Displaying Field Values with PHP Code

If you would like to display the value of a given field entered by the customer placing an order in the store, use the code below:
echo $order->get_meta( 'meta_name');

To find the meta name, meaning the name under which the field is saved in the database, check the field configuration:

 

In this example, to display the value of the VAT ID field with the meta name _billing_nip, use the code below:
echo $order->get_meta( '_billing_nip');

You cannot use this method to retrieve data from Heading, Paragraph, Image, and HTML fields because they do not have values in the database.

Alphabetical Sorting of Radio and Select/Multi-select Field Options

Added options are not sorted. They are also not reordered by drag & drop. Arranging them alphabetically requires editing the functions.php file and pasting the code below there. Replace billing_metaname with your own metaname for the relevant field.

dd_filter( 'woocommerce_form_field_args', function( $args, $key ) {
$field_names = [ 'billing_metaname' ];
if ( ! in_array( $key, $field_names, true ) || ! ( $options = $args['options'] ?? [] ) ) {
return $args;
}
$options = array_map( function( $option_label ) {
return sanitize_title( $option_label );
}, $options );
asort( $options );
foreach ( $options as $option_value => $option_label ) {
$options[ $option_value ] = $args['options'][ $option_value ];
}
$args['options'] = $options;
return $args;
}, 10, 2 );

Related Solutions and Use Scenarios

Flexible Checkout Fields works well with other plugins when checkout needs to react to customer choices, collect data for further order handling, or work correctly in a multilingual store.

• Flexible Product FieldsConnect these plugins when the customer first selects options on the product page and the checkout form then needs to show an additional field based on those choices. Example: the customer selects product personalization in Flexible Product Fields, and checkout displays a field for an additional instruction, file, or consent required only for that configuration.In Flexible Checkout Fields, you can set conditional logic based on Flexible Product Fields fields located in the cart. Supported fields include choice fields such as checkbox, select, radio, radio with images, and radio with colors.Related documentation: Conditional logic for Flexible Product Fields fields.
• WooCommerce PDF CouponsConnect these plugins when you sell gift cards, vouchers, tickets, or PDF coupons and want to add options selected only at checkout. Flexible Checkout Fields PRO lets you add fields with prices to the checkout form, for example a surcharge for express processing, additional handling, a special coupon delivery variant, or another service related to purchasing a PDF coupon.In this scenario, you can also use conditional logic to show an additional option only when the customer selects a specific coupon product, shipping method, payment method, or meets another condition in the cart. This keeps checkout shorter for standard orders, while additional fields appear only when PDF coupons are purchased.Related article: Personalizing WooCommerce gift cards with additional fields.
• WPML and PolylangUse them together when you run a store in multiple languages and want to translate additional checkout form sections. Flexible Checkout Fields PRO registers additional section titles for WPML and Polylang, so you can prepare different language versions of these checkout elements.This is useful, for example, in an international store where additional checkout fields are used to collect delivery instructions, document details, or information needed to process the order in a given country.

Extra help

💡 How to validate WooCommerce Checkout Fields?

💡 Everything about conditional logic in Flexible Checkout Fields

Free vs. PRO Feature Comparison

To make it even easier for you to see the difference between the free and pro versions of the Flexible Checkout Fields for WooCommerce plugin, we've prepared for you a summary table of all the features. Take a look and decide which version you choose.

Feature	FREE →	PRO →
Custom checkout fields: Text, Textarea, Number, E-mail, Phone, URL, Checkbox, Color, Headline, Paragraph, Image, HTML	✅	✅
Custom checkout fields: Multi-checkbox, Select, Multi-select, Radio, Radio with images, Radio with colors, Date,Time, File Upload, Hidden	❌	✅
Billing, Shipping or Order sections	✅	✅
Extra Field Sections	❌	✅
Enable/Disable checkout fields	✅	✅
Set field as required	✅	✅
Change field label	✅	✅
CSS Class support	✅	✅
Placeholders for fields	✅	✅
Display on Thank you page, My account, E-mails	✅	✅
Conditional logic based on shipping methods	❌	✅
Conditional logic based on payment methods	❌	✅
Conditional logic based on products and categories in cart	❌	✅
Conditional logic based on the cart value	❌	✅
Conditional logic based on the Flexible Checkout Fields plugin fields	❌	✅
Conditional logic based on the default WooCommerce plugin fields	❌	✅
Conditional logic based on the user role	❌	✅
Conditional logic based on date	❌	✅
Pricing per field	❌	✅