Docs: Flexible Checkout Fields PRO – WooCommerce

Installation

Installation Guide →

Manage Checkout Fields

Drag&drop to reorder fields. Click a field to expand it.

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – set your own field’s name (optional). Meta name is the label’s name in the database for developers’ purposes.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Placeholder – enter or edit a placeholder for the field (not available for all fields).

CSS Class – enter or edit CSS class for the field.

Adding Custom Fields

You can add multiple fields to sections of WooCommerce checkout.

Adding New Custom Field

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

Field will be add to Edit Section. Now you can edit field. Remember to save changes.

Under the order, you can edit the added fields. Changing the settings and saving the order will change the details of the order.

Field Types

• Single Line Text
• Paragraph Text
• PRO Checkbox
• PRO Radio button
• PRO Select (Drop Down)
• PRO Multi-select
• PRO Date
• PRO Time
• PRO Color Picker
• PRO Headline
• PRO HTML or plain text
• PRO File Upload

Some of the fields have more options:

Value – for checkboxes. Value displayed in the order details if user checks the checkbox.

Options – for radio buttons and selects. Options which user sees during checkout.

Allowed file types – for upload file. It is required to add allowed file types because of the security reasons. Add file types after comma.

Maximum file size [MB] – for upload file. It is required to add max file size.

Date format – for field type Date you can set custom date format.

Day before / Day after – for field type Date. Set range for date from calendar or leave blank if you won’t limit range. To block range for day before or after just set “0”.

Display On

You can select where the field shoud be displayed in the ‘Display On’ tab:

The checkboxes are marked by default. You can uncheck them if you want to. Below, you can see in-action examples of displaying fields:

Conditional Logic

For any field it is possible to set rules when to show or hide the field.

There are two types of this logic:

• NEW PRO 1.4 Conditional Logic for Fields,
• Conditional Logic for Products and Categories.

Conditional logic for fields

The conditional logic for fields allows showing field based on values from other fields: checkbox, radio and select.

Select action for a field when rules match:

• Show this field if
• Hide this field if

and the required condition:

• All rules match (and)
• One or more rules match (or)

You can add any number of rules. Rules matching is based on a field type (checkbox, radio and select) and field option.

Checkbox will have two options: checked and unchecked.

For radio and select options will be configured manually.

Conditional logic for products and categories

The conditional logic for products and categories allows showing field by selected products or categories.

Select action for the field when rules match:

• Show this field if
• Hide this field if

and the required condition:

• All rules match (and)
• One or more rules match (or)

You can add any number of rules. Rules matching is based on a product or a product category in the cart.

Field types

Single Line Text

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Paragraph Text

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Checkbox

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Radio button

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Options
Provide options line by line:

Value : Name

Value
The entered value is only visible for store admin and displays i.e. in the order edit page if the customer selects that option.

Name
Option label that will be displayed on the product page.

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Select (Drop Down)

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Options
Provide options line by line:

Value : Name

Value
The entered value is only visible for store admin and displays i.e. in the order edit page if the customer selects that option.

Name
Option label that will be displayed on the product page.

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Multi-select

Field on the checkout page:

Works in the same way as Select (Drop Down)

Date

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Date settings

• Date format – default date format dd.mm.yy eg. 14.04.2014,
• Days before – a range of days available in the calendar before the current date,
• Days after – a range of days available in the calendar after the current date.

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Time

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Color Picker

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Headline

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Field Type – you can’t change it, you can select the type of the field while you add a new field.

HTML or plain text

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Field Type – you can’t change it, you can select the type of the field while you add a new field.

File Upload

Field on the checkout page:

Configuration:

Enable Field – check to show a field or uncheck to hide a field.

Required Field – check to make a field required, uncheck to make a field optional.

Label – enter field’s label. You can use HTML here.

Name – you can’t change it, you can set the name of the field while you add a new field.

Validation – select one of WooCommerce’s validations if you need it for the field.

Read an extensive guide about field validation in Flexible Checkout Fields and learn how to create custom validation methods →

Allowed file types – provide file types that will be available to upload

Maximum file size – provide the maximum file size that your customer can upload

Field Type – you can’t change it, you can select the type of the field while you add a new field.

Settings

Go to menu WooCommerce → Checkout Fields → Settings.

CSS jQuery UI – in the plugin’s settings, you can disable loading of the CSS jQuery UI file. The CSS file is used to style some additional fields in the order (i.e. Date field), but it may cause conflicts with other plugins that also make use of jQuery UI (i.e. to create tabs). If you notice any problems when displaying your shop, try to disable this CSS file.

Custom Sections – you can add custom sections to checkout. Check custom sections and click Save changes. New sections will show up in tabs in the plugin menu.

Below you can see all custom sections on Storefront 2.1.1 example. For better presentation, the theme was modified to one column view in checkout by Storefront Checkout Customiser.

Custom Sections

After adding custom section go to it’s tab, add new fields and edit sections. You can set Section Title, Section Titile Tag and CSS Class.

Usage Examples

Additional Agreements at the Checkout

You can add additional checkboxes that will appear directly over the button used to placing an order. Here you can also add options, such as: consent to send a newsletter or other sign ups to which the user should agree. Every added checkbox can be made obligatory or optional.

In plugin settings add custom sections Before Submit. Next:

1. Add field type Checkbox, Save changes and expand field to editing.
2. Check Required Field if you wont to required this option.
3. Enter the content of the checkbox.
4. Enter the value of the checkbox (e.g. Yes, Selected, etc.). The value will be displayed only in the order preview if the checkbox was selected by the user. It’s meant for the administrator only.
5. Optionally, enter the CSS class.
6. Click Save changes.

Information on selecting the checkbox in the order

If the checkbox has been selected by the user, the information appears in the details of the order:

Deleting the changes

To reset sections settings click “Reset Section Settings” button. For standard sections (Billing, Shipping, Order) custom fields will be deleted and standard fields will be reset to their default state, and for additional sections, all fields will be deleted.