Field Editor

The Checkout Field Editor is a powerful tool that allows you to fully customize your WooCommerce checkout form. Add, remove, reorder, and modify fields to create a streamlined checkout experience tailored to your business needs.

---

Overview #

What is the Checkout Field Editor?

The Checkout Field Editor gives you complete control over the checkout fields displayed to your customers. You can:

• 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

1. Navigate to Swift Commerce → Checkout → Field Editor in your WordPress admin
2. Toggle Enable Field Editor to activate the feature
3. Use the Editor tab to manage fields visually
4. Use the Settings tab to configure global options
5. 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	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 they can be hidden. Hiding core fields requires Swift Commerce Pro.

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	Allow custom validation patterns for fields	Enabled (Pro)

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
Upload Directory	Subfolder within wp-content/uploads	checkout-uploads
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

Custom CSS (Pro)

Add custom CSS to style your checkout form. Use your browser’s inspector to find class names.

.woocommerce-checkout .form-row {
  /* Your custom styles */
  margin-bottom: 20px;
}

.woocommerce-checkout .form-row-wide {
  width: 100%;
}

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

1. Edit a field and go to the Conditional Logic section
2. Enable conditional logic for the field
3. Choose the action: Show or Hide
4. Set the logic mode: All rules (AND) or Any rule (OR)
5. 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

Example Use Cases

Show gift message field when “This is a gift” checkbox is checked:

• Target field: Gift Message (textarea)
• Action: Show
• Rule: is_gift equals checked

Show company VAT field only for specific countries:

• Target field: VAT Number (text)
• Action: Show
• Rule: billing_country equals DE OR billing_country equals FR

---

How It Works #

Field Processing Flow

1. Load Settings – Plugin reads saved field configuration on checkout page load
2. Apply Modifications – WooCommerce filters are used to modify the default fields
3. Render Fields – Fields are displayed according to your configuration
4. Validate Input – Field validation runs on blur and/or submit
5. Save Data – Custom field values are saved to order metadata
6. Display in Admin – Custom field data appears in order details

Data Storage

Data Type	Storage Location
Field Configuration	wp_options table (SWIFT_COMMERCE_checkout_field_editor)
Custom Field Values	Order meta (_billing_*, _shipping_*, _custom_*)
File Uploads	wp-content/uploads/checkout-uploads/

WooCommerce Integration

The Checkout Field Editor integrates with WooCommerce using these hooks:

• woocommerce_checkout_fields – Modify checkout field arrays
• woocommerce_billing_fields – Modify billing fields specifically
• woocommerce_shipping_fields – Modify shipping fields specifically
• woocommerce_checkout_process – Validate custom fields
• woocommerce_checkout_update_order_meta – Save custom field data

---

Troubleshooting #

Fields Not Appearing on Checkout

1. Ensure Enable Field Editor is turned on in Settings
2. Check that the field is Enabled (eye icon visible)
3. Verify the field’s Section is enabled
4. Check for conditional logic that may be hiding the field
5. Clear any caching plugins

Validation Not Working

1. Ensure Validate on Blur or Validate on Submit is enabled
2. Check that the field has Required set if it should be mandatory
3. Verify validation patterns are correctly formatted
4. Check browser console for JavaScript errors

File Uploads Failing

1. Check PHP upload_max_filesize and post_max_size limits
2. Verify the upload directory is writable
3. Ensure file type is in the allowed extensions list
4. Check that file size is within configured limits

Core Fields Cannot Be Hidden

Hiding WooCommerce core fields (First Name, Last Name, Email, etc.) requires Swift Commerce Pro. This prevents accidentally breaking checkout for free users.

Changes Not Saving

1. Check for JavaScript errors in browser console
2. Ensure you have manage_woocommerce capability
3. Verify REST API is accessible (/wp-json/swift-commerce/v1/)
4. Check for plugin conflicts

---

Feature Comparison #

Feature	Free	Pro
Edit field labels & placeholders	✅	✅
Reorder fields (drag & drop)	✅	✅
Add basic field types (text, email, phone, etc.)	✅	✅
Validation (required, min/max length)	✅	✅
Export/Import configuration	✅	✅
Reset to defaults	✅	✅
Hide core WooCommerce fields	❌	✅
Advanced field types (select, radio, checkbox)	❌	✅
Date & Time pickers	❌	✅
File upload fields	❌	✅
Content fields (heading, paragraph)	❌	✅
Conditional logic (show/hide rules)	❌	✅
Custom validation patterns	❌	✅
Custom CSS	❌	✅
Input masks	❌	✅
Field prefixes/suffixes	❌	✅

---

Best Practices #

1. Keep checkout simple – Only ask for information you truly need
2. Use descriptive labels – Make it clear what each field requires
3. Add placeholder text – Give examples of expected input
4. Set appropriate widths – Use half-width for short fields like Name
5. Test on mobile – Ensure fields are usable on small screens
6. Export before major changes – Create a backup of your configuration
7. Use conditional logic sparingly – Too many rules can confuse customers
8. Validate thoughtfully – Balance security with user experience