In this guide
Explore the steps and reference sections below.
On this page
Use Checkout Field Editor to edit classic checkout fields and collect additional order details. Free includes basic custom fields and validation; Pro adds advanced types, conditional rules and protected uploads. Checkout Blocks support a smaller set of custom order fields.
Overview
Checkout compatibility: WooCommerce Checkout Blocks supports custom order text, select, and checkbox fields. Changes to core checkout fields, address-only fields, conditional fields, content fields, and file uploads require classic checkout. Check which checkout your store uses before creating fields.
What is the Checkout Field Editor?
On classic checkout, Checkout Field Editor provides these controls:
- Add new fields to collect additional information (delivery instructions, gift messages, custom data)
- Edit existing fields – change labels, placeholders, and validation rules
- Reorder fields using intuitive drag-and-drop
- Hide or disable fields you don’t need
- Organize fields into sections – Billing, Shipping, Additional Information, and Order Notes
Getting Started
- Navigate to Swift Commerce → Checkout Fields in your WordPress admin
- Toggle Enable Field Editor to activate the feature
- Use the Editor tab to manage fields visually
- Use the Settings tab to configure global options
- Click Save Changes when done
Editor Tab
The Editor tab is your visual workspace for managing all checkout fields. It displays fields organized by section with full drag-and-drop support.
Quick Add Fields
Add new fields instantly using the Quick Add toolbar at the top of the editor.
| Field Type | Description | Availability |
|---|---|---|
| Text | Single-line text input | Free |
| Number | Numeric input with validation | Free |
| Email address with format validation | Free | |
| Phone | Telephone number input | Free |
| Password | Password input (masked) | Free |
| Hidden | Hidden field (not visible to customers) | Free |
| URL | Website URL input | Free |
| Textarea | Multi-line text area | Free |
Pro Field Types (requires Swift Commerce Pro):
| Field Type | Description |
|---|---|
| Select | Dropdown menu with options |
| Multi Select | Select multiple options |
| Radio | Radio button group |
| Checkbox | Single checkbox toggle |
| Checkbox Group | Multiple checkboxes |
| File Upload | Allow customers to upload files |
| Date | Date input field |
| Time | Time input field |
| Date & Time | Combined date and time picker |
| Month | Month selection |
| Week | Week selection |
| Date Picker | Advanced calendar picker |
| Time Picker | Advanced time picker |
| Heading | Section heading (display only) |
| Label | Static label text |
| Paragraph | Descriptive paragraph text |
Checkout Sections
Fields are organized into four sections:
| Section | Description | Default Fields |
|---|---|---|
| Billing | Customer billing address and contact info | First Name, Last Name, Company, Country, Address, City, State, Postcode, Phone, Email |
| Shipping | Shipping destination address | First Name, Last Name, Company, Country, Address, City, State, Postcode |
| Additional Information | Custom fields for extra data collection | Empty by default |
| Order Notes | Customer notes about their order | Order Comments |
Section Controls
Each section card provides:
- Expand/Collapse – Toggle section visibility in the editor
- Enable/Disable – Hide entire sections from checkout
- Field Count – Shows total and enabled field counts
- Add Field – Button to add new fields to the section
Managing Individual Fields
Field Card Display
Each field shows:
- Icon – Visual indicator of field type
- Label – The field’s display name
- Required Badge – Red badge if field is required
- Core Badge – Gray badge for WooCommerce default fields
- Field Type – Text, Email, Select, etc.
- Field Key – The unique identifier (e.g.,
billing_email) - Width – 100%, 50%, or 33%
Field Actions
Hover over any field to reveal action buttons:
| Action | Icon | Description |
|---|---|---|
| Enable/Disable | Eye/EyeOff | Toggle field visibility on checkout |
| Edit | Pencil | Open detailed field editor dialog |
| Duplicate | Copy | Create a copy of the field |
| Delete | Trash | Remove the field (custom fields only) |
Note: Core WooCommerce fields cannot be deleted, but supported fields can be disabled in Free on classic checkout. This does not hide the core address fields in Checkout Blocks.
Drag and Drop Reordering
Reorder fields within a section by dragging the grip handle on the left side of each field card. Fields will automatically update their priority order when dropped.
Field Editor Dialog
Clicking the Edit button opens a comprehensive dialog with four tabs:
General Tab
| Setting | Description |
|---|---|
| Label | The text displayed above or beside the field |
| Field Key | Unique identifier used in code and database |
| Placeholder | Ghost text shown inside empty fields |
| Description | Help text displayed below the field |
| Default Value | Pre-filled value when checkout loads |
| Width | Full (100%), Half (50%), or Third (33%) |
| CSS Class | Custom class names for styling |
| Field Enabled | Toggle to show/hide this field |
Validation Tab
| Setting | Description |
|---|---|
| Required Field | Make this field mandatory |
| Min Length | Minimum character count (text fields) |
| Max Length | Maximum character count (text fields) |
| Min Value | Minimum number (number fields) |
| Max Value | Maximum number (number fields) |
| Validation Pattern | Predefined or custom regex pattern |
| Error Message | Custom message when validation fails |
Available Validation Patterns:
| Pattern | Description |
|---|---|
| None | No pattern validation |
| Letters only | Alphabetic characters only |
| Numbers only | Numeric characters only |
| Alphanumeric | Letters and numbers |
| Canadian postal code | Format: A1A 1A1 |
| US ZIP code | Format: 12345 or 12345-6789 |
| UK postcode | Standard UK format |
| Custom pattern | Define your own regex |
Options Tab (For Select, Radio, Checkbox Group)
Manage the choices available in selection fields:
- Add Option – Create a new choice
- Label – Display text shown to customers
- Value – Internal value stored in the database
- Set as Default – Pre-select this option
- Reorder – Drag to change option order
- Delete – Remove an option
Advanced Tab
| Setting | Description |
|---|---|
| Autocomplete | Browser autocomplete attribute (e.g., given-name, email) |
| Rows | Number of rows for textarea fields |
| Allowed File Types | Comma-separated extensions for file uploads |
| Max File Size | Maximum upload size in MB |
| Min/Max Date | Date range limits for date fields |
| Prefix | Text displayed before the input |
| Suffix | Text displayed after the input |
| Input Mask | Format mask (e.g., (999) 999-9999 for phone) |
Input Mask Syntax:
9= Any digit (0-9)a= Any letter (a-z, A-Z)*= Any character
Settings Tab
The Settings tab contains global configuration options that affect all checkout fields.
General Settings
| Setting | Description | Default |
|---|---|---|
| Enable Field Editor | When disabled, WooCommerce default checkout fields are used | Enabled |
| Enable Conditional Logic | Allow fields to show/hide based on other field values | Enabled (Pro) |
| Enable Custom Validation | Apply supported custom validation patterns and limits (Free) | Enabled |
Display Settings
Configure how fields appear on the checkout page.
| Setting | Description | Default |
|---|---|---|
| Show Field Labels | Display labels above form fields | Enabled |
| Show Placeholders | Display placeholder text inside fields | Enabled |
| Show Field Descriptions | Display help text below fields | Enabled |
| Required Field Indicator | Character to mark required fields | * |
| Indicator Position | Show indicator before or after the label | After |
Validation Settings
Control how field validation behaves during checkout.
| Setting | Description | Default |
|---|---|---|
| Validate on Blur | Validate fields when user leaves them | Enabled |
| Validate on Submit | Validate all fields when form is submitted | Enabled |
| Show Errors Inline | Display error messages next to fields | Enabled |
| Scroll to First Error | Automatically scroll to the first error | Enabled |
| Highlight Error Fields | Add visual highlight to fields with errors | Enabled |
| Error Position | Display errors above or below the field | Below |
Address Override Settings
Configure how address fields interact with saved customer data.
| Setting | Description | Default |
|---|---|---|
| Override Address Fields | Allow checkout fields to override saved address data | Disabled |
| Allow Billing Override | Users can override their saved billing address | Enabled |
| Allow Shipping Override | Users can override their saved shipping address | Enabled |
| Sync Billing & Shipping | Keep billing and shipping addresses synchronized | Disabled |
File Upload Settings (Pro)
Configure file upload behavior for file fields.
| Setting | Description | Default |
|---|---|---|
| Protected upload storage | Managed private checkout files; not ordinary public Media Library links | swift-commerce-private |
| Max Total Upload Size | Maximum total file size per checkout (MB) | 10 MB |
Supported file types are configured per-field in the Pro settings:
- Default allowed:
jpg, jpeg, png, pdf, doc, docx
Import, Export & Reset
| Action | Description |
|---|---|
| Export Settings | Download all field configurations as JSON |
| Import Settings | Upload a previously exported JSON file |
| Reset to Defaults | Restore all fields to WooCommerce defaults |
Warning: Reset cannot be undone. Export your settings first if you want to preserve them.
Conditional Logic (Pro)
Conditional logic allows you to show or hide fields based on the values of other fields.
How It Works
- Edit a field and go to the Conditional Logic section
- Enable conditional logic for the field
- Choose the action: Show or Hide
- Set the logic mode: All rules (AND) or Any rule (OR)
- Add rules based on other field values
Available Operators
| Operator | Description |
|---|---|
| Equals | Field value matches exactly |
| Does not equal | Field value doesn’t match |
| Contains | Field value includes the text |
| Does not contain | Field value excludes the text |
| Is empty | Field has no value |
| Is not empty | Field has a value |
| Greater than | Numeric comparison |
| Less than | Numeric comparison |
Before changing a live checkout
- Identify whether the checkout page uses the classic shortcode or WooCommerce Checkout Block. A field that saves in the editor is not necessarily available in both.
- For Checkout Blocks, test a custom order text, select, or checkbox field through order submission and inspect the order data.
- For classic checkout, test core-field changes, conditional rules, address behavior, content fields and Pro uploads with both valid and invalid submissions.
- Export your field configuration before bulk changes or imports. Importing settings can replace the current configuration; review the result before accepting orders.
Which fields work with Checkout Blocks?
Free registers compatible custom order text fields in Blocks. Text, number, email, phone and URL configurations use the Blocks text input; Pro also allows select and checkbox inputs. Textarea, hidden, date, upload and conditional fields are not registered in Blocks.
- Open Swift Commerce → Checkout Fields → Editor. Add a custom field to Additional Information or Order Notes, not a billing-only or shipping-only section.
- Keep the field and its section enabled. Use a supported type and leave the field’s conditional logic disabled.
- Save the configuration. Open the actual Checkout Block page, complete a test order and inspect the saved answer in WooCommerce.
- If the field is missing, check the section, type, enabled state and checkout type before changing the theme.
Follow the Checkout Blocks custom order field tutorial. For classic checkout, use the separate conditional fields and protected upload tutorials.
Where are custom answers and uploads saved?
Supported custom answers are stored with the WooCommerce order. Classic values can be displayed in the admin order, customer order details and order emails; Blocks use WooCommerce’s additional-field handling. Verify the result in each context you rely on, rather than treating a successful field save as a successful order test.
On classic checkout, Pro uploads are attached to their order. Download authorization checks store-management access, the order’s signed-in customer or a matching order key. Treat order links and keys as private. Test an allowed file, a rejected file type and an oversized file before accepting customer uploads.
For the capability and edition overview, see Checkout Field Editor for WooCommerce.