Overview
Checkout Fields Manager is a powerful WordPress plugin that allows you to customize WooCommerce checkout fields with ease. Whether you're using Classic Checkout or Block Checkout, you have full control over your checkout form.
Store owners who need to collect custom information during checkout, customize field order, or simplify the checkout experience.
Key Features
Add unlimited custom fields to your checkout page with various field types.
Modify WooCommerce default fields - labels, placeholders, widths, and more.
Easily reorder fields with intuitive drag and drop interface.
Toggle field visibility without deleting them.
Backup and restore your field configurations easily.
Works with both Classic and Block Checkout seamlessly.
What You Can Do
- Add Custom Fields: Text, email, phone, select, textarea, checkbox, radio, date, time, and more
- Modify Default Fields: Change labels, placeholders, help text, and field widths
- Control Field Order: Drag and drop to reorder any field on the checkout page
- Show/Hide Fields: Enable or disable fields without deleting them
- Set Required Fields: Make any field required or optional
- Duplicate Fields: Clone existing fields to save time
- Filter & Search: Quickly find fields with built-in filters and search
This documentation is for Checkout Fields Manager FREE version. For PRO features, please upgrade to the PRO version.
Installation
Installing Checkout Fields Manager is quick and easy. Follow these steps to get started.
Method 1: WordPress Dashboard
In your WordPress admin panel, navigate to Plugins → Add New
Search for "Checkout Fields Manager For Woocommerce" in the search bar
Click the "Install Now" button next to the plugin
Once installed, click "Activate" to enable the plugin
Method 2: Manual Upload
Download the plugin ZIP file from WordPress.org or your purchase location
Go to Plugins → Add New → Upload Plugin
Click "Choose File" and select the downloaded ZIP file
Click "Install Now" and then "Activate Plugin"
- WordPress 5.0 or higher
- WooCommerce 5.0 or higher
- PHP 7.4 or higher
After Installation
Once activated, you'll find the plugin in your WordPress admin menu:
WooCommerce → Checkout Fields Manager
You'll see two main tabs:
- Classic Checkout: For traditional WooCommerce checkout
- Block Checkout: For WooCommerce Block-based checkout (NEW badge)
Quick Start Guide
Get up and running in 5 minutes with this quick start guide.
Your First Custom Field
Go to WooCommerce → Checkout Fields Manager
Select either Classic Checkout or Block Checkout tab depending on your store's setup
Click the purple "+ Add Custom Field" button
A modal will appear. Fill in:
- Label: "Delivery Instructions"
- Field Type: Textarea
- Section: Billing
- Placeholder: "Enter special delivery instructions..."
Click "Save Field" button
Visit your checkout page and see your new field!
After adding fields, you can drag and drop them to reorder. Your changes apply to the live checkout page immediately!
Classic Checkout
The Classic Checkout tab manages fields for WooCommerce's traditional shortcode-based checkout page [woocommerce_checkout].
Interface Overview
The Classic Checkout interface includes:
- Fields Tab: View and manage all checkout fields
- Classic Templates: Pre-made field templates (coming soon)
- Settings: Plugin configuration and backup/restore
Field Sections
Fields are organized into three sections:
| Section | Description | Default Fields |
|---|---|---|
| Billing | Billing information fields | First Name, Last Name, Email, Phone, Address, etc. |
| Shipping | Shipping address fields | First Name, Last Name, Address, City, State, etc. |
| Order | Additional order information | Order Notes |
Filter Options
Use filters to quickly find fields:
- Section Filter: View fields from specific section (All / Billing / Shipping / Order)
- Origin Filter: Filter by field origin (All / WooCommerce / Custom)
- Search Bar: Search by field label or field key
WooCommerce default fields are marked with a yellow badge. These can be edited but not deleted.
Block Checkout (NEW)
The Block Checkout tab manages fields for WooCommerce's new Gutenberg Block-based checkout.
WooCommerce Block Checkout is the modern checkout experience built with Gutenberg blocks. It's faster, more customizable, and recommended for new stores.
Block-Specific Features
- Location-Based Organization: Fields organized by block locations (Contact, Address, etc.)
- Separate Management: Block fields are managed independently from Classic Checkout
- Future-Proof: WooCommerce is moving toward Block Checkout as the default
Available Locations
| Location | Description | Example Fields |
|---|---|---|
| Contact Information | Customer contact details | Email, Phone |
| Shipping Address | Where to ship the order | Name, Address, City, State |
| Billing Address | Billing information | Name, Address, City, State |
| Additional Information | Extra order details | Order Notes, Custom Fields |
Classic Checkout and Block Checkout fields are separate! If you switch between checkout types, you'll need to configure fields for each separately.
Field Types
Checkout Fields Manager supports multiple field types to collect different kinds of information.
Available Field Types
| Field Type | Description | Best For |
|---|---|---|
| Text | Single-line text input | Names, short answers |
| Textarea | Multi-line text input | Comments, instructions, long text |
| Email address with validation | Email addresses | |
| Phone | Phone number input | Phone numbers |
| Select | Dropdown selection | Multiple choice (single selection) |
| Radio | Radio button selection | Multiple choice (visible options) |
| Checkbox | Single checkbox | Yes/No, agreements, opt-ins |
| Date | Date picker | Delivery dates, birthdays |
| Time | Time picker | Delivery times, appointments |
| Number | Numeric input only | Quantities, ages, numbers |
Select & Radio Options
For Select and Radio field types, you can add multiple options:
Select "Select" or "Radio" as the field type
In the "Options" section, enter each option on a new line:
Click "Save Field" - options will appear in the dropdown/radio buttons
Field Management
Learn how to manage fields with the built-in actions.
Field Actions
Each field has several action buttons in the Actions column:
| Icon | Action | Description |
|---|---|---|
| ✏️ | Edit | Open field editor to modify all field properties |
| 👁️ | Show/Hide | Toggle field visibility on checkout page |
| 📋 | Duplicate | Create a copy of the field with same settings |
| 🗑️ | Delete | Remove custom field (WooCommerce fields can't be deleted) |
Editing Fields
Click the Edit (✏️) icon to open the field editor modal. You can modify:
- Label: The field label shown to customers
- Placeholder: Placeholder text inside the input field
- Description: Help text shown below the field
- Field Type: The type of input field
- Section: Where the field appears (Billing/Shipping/Order)
- Field Width: Full width or half width
- Required: Make the field mandatory or optional
- Options: For select/radio fields, add/edit options
Changes save immediately! No need to refresh the page - your changes apply to the live checkout instantly.
Show/Hide Fields
The eye icon (👁️) toggles field visibility:
- Eye Open: Field is visible on checkout
- Eye Closed: Field is hidden (but not deleted)
This is useful when you want to temporarily hide a field without losing its configuration.
Duplicating Fields
The duplicate icon (📋) creates an exact copy of a field. This is useful when:
- You need similar fields with slight variations
- You want to create a template field to modify
- You're testing different field configurations
WooCommerce default fields (marked with yellow badge) cannot be deleted. You can only hide them or modify their properties.
How to Add Custom Fields
Follow this guide to add custom fields to your checkout page.
Go to WooCommerce → Checkout Fields Manager
Choose Classic Checkout or Block Checkout tab
Click the purple "+ Add Custom Field" button at the top
Fill in the field details:
- Label: What customers see (e.g., "Company Name")
- Field Type: Choose from text, select, textarea, etc.
- Section: Choose Billing, Shipping, or Order
- Placeholder: Optional hint text
- Description: Optional help text
- Required: Check to make field mandatory
- Field Width: Full width or half width
For Select or Radio fields, add options (one per line)
Click "Save Field" button
Visit your checkout page to see the new field!
Example: Adding a Company Field
After adding a field, you can drag it to change its position on the checkout page. The field will appear exactly where you drop it!
How to Edit Default Fields
WooCommerce default fields (like First Name, Email, etc.) can be customized without coding.
What Can You Edit?
- Label: Change "First name" to "Given Name"
- Placeholder: Add helpful placeholder text
- Description: Add instructions below the field
- Field Width: Make fields full width or half width
- Required: Make optional fields required or vice versa
- Visibility: Show or hide fields
Step-by-Step Guide
Locate the WooCommerce default field (marked with yellow "WooCom" badge)
Click the Edit icon (✏️) in the Actions column
Change the label, placeholder, width, or any other property
Click "Save Field"
Your changes appear immediately on the checkout page!
Example: Customizing Email Field
WooCommerce default fields cannot be deleted (for checkout functionality). You can only hide them if not needed.
Common Use Cases
- Hide Optional Fields: Hide "Company" or "Address Line 2" to simplify checkout
- Change Labels: Use your brand's terminology (e.g., "Mobile" instead of "Phone")
- Add Placeholders: Guide customers with example formats
- Adjust Width: Make email field full width for better mobile experience
How to Reorder Fields
Change the order fields appear on your checkout page using drag and drop.
Drag & Drop Reordering
Find the field you want to move in the fields table
Click and hold the drag handle (☰ icon) on the left of the field row
Drag the field to the desired position and release
The new order saves automatically! Check your checkout page to see changes
Field order changes apply immediately to your live checkout page. No need to save or refresh!
Section Boundaries
Fields can only be reordered within their section:
- Billing fields can be reordered among billing fields
- Shipping fields can be reordered among shipping fields
- Order fields can be reordered among order fields
To move a field to a different section, edit the field and change the "Section" property.
Best Practices
- Most Important First: Put critical fields at the top
- Logical Flow: Group related fields together
- Mobile-Friendly: Put shorter fields before longer ones for better mobile layout
- Test After Changes: Always check the checkout page after reordering
Use filters to show only specific sections when reordering. This makes it easier to work with large numbers of fields.
Import & Export (Backup/Restore)
Backup your field configurations and restore them on the same or different site.
Why Use Backup/Restore?
- Site Migration: Move field configurations to a new site
- Backup Before Changes: Save a backup before making major changes
- Testing: Test field configurations on staging before production
- Duplicate Sites: Copy field setup across multiple stores
How to Export (Backup)
Click the Settings tab in either Classic or Block Checkout
In the "Export (Backup)" section, click "Download Backup"
A file downloads automatically:
- Classic: classic-checkout-backup.txt
- Block: block-checkout-backup.txt
Save this file in a safe location (Google Drive, Dropbox, etc.)
How to Import (Restore)
Open the backup .txt file in Notepad or any text editor
Select all content (Ctrl+A) and copy (Ctrl+C)
In the plugin, click the Settings tab
In the "Import (Restore)" section, click "Import Backup"
A textarea appears - paste the copied content (Ctrl+V)
Click the "Import" button
Your fields are restored! Check the Fields tab to see them
- Separate Backups: Classic and Block checkouts have separate backup files
- Don't Mix: Don't import a Classic backup into Block checkout (or vice versa)
- Overwrites: Import will add to existing fields (not replace)
Backup File Format
The backup file is in JSON format and contains:
Create backups regularly, especially before major changes or WooCommerce updates!
Field Width & Layout
Control the visual layout of your checkout fields with width options.
Available Width Options
| Width | Description | Use Case |
|---|---|---|
| Full Width | Field spans entire width of form | Email, Address, Textarea fields |
| Half Width (First) | Field takes left half of row | First Name, City (first in row) |
| Half Width (Last) | Field takes right half of row | Last Name, State (second in row) |
How to Change Field Width
Click the Edit icon (✏️) for the field
Look for the "Field Width" dropdown in the modal
Select your preferred width option
Click "Save Field" to apply changes
Creating Two-Column Layout
To place two fields side-by-side:
Set the first field to "Half Width (First)"
Set the next field to "Half Width (Last)"
Make sure these fields are consecutive in the field order
Example Layout
Half-width fields automatically stack vertically on mobile devices for better user experience.
Best Practices
- Related Fields: Put related fields side-by-side (First/Last Name, City/State)
- Full Width for Long Text: Use full width for email, address, textarea
- Consistent Spacing: Maintain visual balance with proper width choices
- Test on Mobile: Always check how layout looks on mobile devices
Field Validation
Ensure customers enter correct information with field validation.
Built-in Validation
The plugin automatically validates fields based on their type:
| Field Type | Validation | Example |
|---|---|---|
| Valid email format | [email protected] | |
| Phone | Phone number format | Numbers and common separators |
| Number | Numeric only | 123, 45.67 |
| Date | Valid date format | MM/DD/YYYY |
| Required | Cannot be empty | All required fields |
Making Fields Required
To make a field mandatory:
Click Edit (✏️) on the field
Check the "Required" checkbox
Click "Save Field"
Required fields will show a red asterisk (*) on the checkout page.
Don't make too many fields required! This can lead to cart abandonment. Only require essential information.
Validation Messages
When validation fails, WooCommerce displays error messages:
- Required Field: "[Field Label] is a required field"
- Email Format: "Please enter a valid email address"
- Phone Format: "Please enter a valid phone number"
Advanced custom validation rules are available in the PRO version of the plugin.
Plugin Settings
Configure global plugin behavior in the Settings tab.
General Settings
| Setting | Description | Default |
|---|---|---|
| Save to order meta | Store field values in order metadata (Always enabled) | ✓ Enabled |
| Show in order emails | Include custom field values in order confirmation emails | ✓ Enabled |
Show in Order Emails
This setting controls whether custom field values appear in:
- Order confirmation emails to customers
- New order notification emails to admins
- Order processing/completed emails
When Enabled: Field values display in a clean table format in all order emails
When Disabled: Field values are saved but not included in emails
Field values are always saved to orders and visible in the admin panel, regardless of this setting.
Backup & Restore
Settings tab also includes Import/Export functionality. See the Import/Export guide for details.
Common Issues & Solutions
Solutions to frequently encountered issues.
Fields Not Appearing on Checkout
Custom fields don't show on the checkout page
Solutions:
- Check if Field is Enabled: Click the eye icon (👁️) - it should be open, not crossed out
- Verify Checkout Type: Make sure you're editing the correct checkout (Classic vs Block)
- Clear Cache: Clear your site cache and browser cache
- Check Section: Verify the field is in the correct section (Billing/Shipping/Order)
- Theme Conflict: Try switching to a default WooCommerce theme temporarily
Field Width Not Working
Changing field width doesn't affect the checkout layout
Solutions:
- Clear Cache: Clear all caches (server, WordPress, browser)
- Check Theme CSS: Your theme may override field widths with custom CSS
- Test on Default Theme: Switch to Storefront theme to verify it's not a theme conflict
- Inspect Element: Use browser DevTools to check if CSS class is applied
Fields Not Reordering
Drag and drop reordering doesn't work or doesn't persist
Solutions:
- Clear Cache: Server and browser cache must be cleared
- Hard Refresh: Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Check Section: You can only reorder within the same section
- Wait for Save: Wait for "Fields reordered!" notification before leaving page
Import Not Working
Backup import fails or shows errors
Solutions:
- Check File Format: Make sure you copied the ENTIRE content from the .txt file
- No Extra Characters: Don't add or remove any characters from the backup file
- Correct Checkout Type: Don't import Classic backup into Block checkout
- Valid JSON: Paste the content into a JSON validator to check format
Plugin Conflicts
Plugin doesn't work after installation or updating
Solutions:
- Deactivate Other Checkout Plugins: Deactivate other checkout field editor plugins
- Check WooCommerce Version: Ensure WooCommerce 5.0+ is installed
- PHP Version: Verify you're running PHP 7.4 or higher
- JavaScript Errors: Check browser console for JavaScript errors
Frequently Asked Questions
Can I delete WooCommerce default fields?
No, WooCommerce default fields (like First Name, Email) cannot be deleted as they're required for checkout functionality. However, you can hide them using the eye icon (👁️) if they're not needed.
How many custom fields can I add?
There's no hard limit on the number of custom fields you can add. However, for best user experience, we recommend keeping checkout forms as short as possible to avoid cart abandonment.
Will field values appear in order admin?
Yes! All custom field values are automatically saved to orders and displayed in the WooCommerce admin order page under "Custom Fields" section.
Do changes require page refresh?
No! Most changes (adding, editing, reordering fields) apply instantly without page refresh. However, you should always clear cache and test on the live checkout page.
Can I use different fields for Classic and Block checkout?
Yes! Classic Checkout and Block Checkout fields are managed separately. You can have completely different field configurations for each checkout type.
What happens to field data if I deactivate the plugin?
Field values saved in orders remain in the database even if you deactivate the plugin. However, you won't be able to collect new custom field data until you reactivate the plugin.
Is the plugin translation-ready?
Yes! The plugin is fully translation-ready and supports WPML, Polylang, and other translation plugins.
Can I export fields from one site and import to another?
Absolutely! Use the Export/Import feature in Settings to backup fields from one site and restore them on another. Perfect for staging to production migrations.
Will this slow down my checkout page?
No! The plugin is optimized for performance and adds minimal overhead. Fields are rendered using native WooCommerce methods for maximum compatibility.
Can I change the order of WooCommerce default fields?
Yes! You can reorder WooCommerce default fields the same way as custom fields - just drag and drop them to your desired position.
Field Actions Explained
Every field in your checkout has action buttons. Here's what each one does in detail.
The Actions Column
When you look at your fields table, you'll see an "Actions" column on the right side of each row. This column contains several icons that let you perform different actions on the field.
☰ Drag Handle (Reorder)
What it looks like: Three horizontal lines (hamburger icon) on the far left of each row
What it does: Lets you click and drag the field to a new position
How to use it:
Click on the ☰ icon and keep your mouse button pressed down
While holding the button, move your mouse up or down to drag the row
Release the mouse button when you're at the desired position
The new order saves automatically - you'll see a "Fields reordered!" message
You can only drag fields within the same section (Billing, Shipping, or Order). To move a field to a different section, edit the field and change its "Section" setting.
✏️ Edit Button
What it does: Opens a popup window (modal) where you can change all the field's properties
What you can edit:
- Label: The text that appears above the field
- Placeholder: Gray text inside the empty field as a hint
- Description: Help text that appears below the field
- Field Type: Text, email, select, etc.
- Section: Which part of checkout (Billing/Shipping/Order)
- Field Width: Full width or half width
- Required: Whether customers must fill it in
- Options: Choices for select/radio fields
How to use it:
- Click the ✏️ icon
- A popup window appears with all field settings
- Make your changes
- Click "Save Field" button at the bottom
- Changes apply immediately to your checkout!
WooCommerce default fields (marked with yellow "WooCom" badge) can be edited but have some restrictions. You cannot change their field type or delete them, but you can modify labels, placeholders, widths, and visibility.
👁️ Show/Hide Toggle
What it looks like: An eye icon that can be open or crossed out
What it does: Controls whether the field appears on your checkout page
The two states:
- 👁️ Eye Open: Field is visible on checkout (enabled)
- 👁️ Eye Crossed: Field is hidden from checkout (disabled)
When to use it:
- You want to temporarily hide a field without deleting it
- You're testing different checkout configurations
- You want to hide unnecessary WooCommerce default fields (like "Company" if you don't need it)
- You're preparing fields for seasonal use (show/hide as needed)
How to use it:
- Click the 👁️ icon once
- The eye changes to crossed-out (field is now hidden)
- Check your checkout page - the field won't appear
- Click again to show it back
Hidden fields are NOT deleted. All your settings are preserved. You can show the field again anytime by clicking the eye icon again.
📋 Duplicate Button
What it does: Creates an exact copy of the field with all the same settings
When to use it:
- You need multiple similar fields (e.g., "Alternate Phone Number")
- You want to create a template field and modify copies
- You're testing different versions of the same field
- You want to save time by copying instead of creating from scratch
How to use it:
- Click the 📋 icon
- A new field appears immediately with "(Copy)" added to the label
- The duplicated field has the exact same settings as the original
- Edit the duplicate to customize it
Example:
🗑️ Delete Button
What it does: Permanently removes a custom field
Important restrictions:
- ❌ WooCommerce default fields CANNOT be deleted (you can only hide them)
- ✅ Custom fields you created CAN be deleted
How to tell if a field can be deleted:
- If it has a yellow "WooCom" badge → Cannot delete (Delete button will be grayed out or not clickable)
- If it has no badge or says "Custom" → Can delete
How to use it:
- Click the 🗑️ icon on a custom field
- A confirmation popup appears: "Are you sure you want to delete this field?"
- Click "OK" to confirm deletion
- The field is permanently removed from your database
Deletion is permanent! The field and all its settings are removed from the database. If you might need it later, use the Hide (👁️) button instead of Delete.
Quick Reference Table
| Icon | Action | Reversible? | Works on Default Fields? |
|---|---|---|---|
| ☰ | Drag to reorder | ✅ Yes | ✅ Yes |
| ✏️ | Edit settings | ✅ Yes | ✅ Yes (limited) |
| 👁️ | Show/Hide | ✅ Yes | ✅ Yes |
| 📋 | Duplicate | ✅ Yes (delete copy) | ✅ Yes |
| 🗑️ | Delete | ❌ No | ❌ No |
How to Hide Unwanted Fields
Learn how to hide fields you don't need without deleting them.
Why Hide Instead of Delete?
- WooCommerce Default Fields: Cannot be deleted, only hidden
- Preserve Settings: Hidden fields keep all their settings if you need them later
- Temporary Removal: Easy to show again with one click
- Seasonal Use: Hide/show fields based on seasons or promotions
Step-by-Step: Hide a Field
Locate the field you want to hide in the fields table
In the Actions column, click the 👁️ (eye) icon
The eye icon becomes crossed out 👁️, indicating the field is now hidden
Visit your checkout page - the field will not appear
Step-by-Step: Show a Hidden Field
Look for fields with a crossed-out eye icon 👁️
Click the crossed-out eye icon
The eye becomes open 👁️, indicating the field is now visible
The field now appears on your checkout page again
Common Fields to Hide
| Field | When to Hide | Impact |
|---|---|---|
| Company | If you sell to individuals only | Simplifies checkout for B2C stores |
| Address Line 2 | If most customers don't need it | Cleaner, shorter checkout form |
| Order Notes | If you don't need customer notes | Removes optional text area |
| Phone | If you only communicate via email | Fewer required fields |
| State/County | If shipping to single-state region | Less input required |
Hide fields to create a streamlined checkout! Studies show that shorter checkout forms lead to higher conversion rates and fewer abandoned carts.
Filter to See Only Hidden Fields
To find all hidden fields quickly:
- Look at the fields table
- Hidden fields show a crossed-out eye icon 👁️
- You can also use the search bar to search for specific field names
Hidden fields are marked as "Disabled" in the database but are not deleted. They can be re-enabled instantly by clicking the eye icon again.
How to Duplicate Fields
Save time by duplicating existing fields instead of creating them from scratch.
When to Use Duplicate
- Similar Fields: Need multiple phone numbers, email addresses, or addresses
- Field Templates: Create a template field and duplicate it for consistency
- Testing Variations: Test different field configurations
- Save Time: Faster than creating new fields from scratch
How to Duplicate a Field
Locate the field you want to duplicate in the fields table
In the Actions column, click the 📋 (clipboard) icon
A new field appears immediately with "(Copy)" added to the label
Click the ✏️ (edit) icon on the new field to customize it
Change the label, placeholder, or any other settings as needed
Click "Save Field" - your customized duplicate is ready!
What Gets Duplicated?
When you duplicate a field, ALL of these settings are copied:
- Field Type (text, email, select, etc.)
- Label (with "(Copy)" added)
- Placeholder text
- Description/Help text
- Section (Billing/Shipping/Order)
- Field Width (Full/Half)
- Required setting (Yes/No)
- Options (for select/radio fields)
- Validation rules
The duplicate gets a NEW unique field key (ID). This ensures each field is separate in the database.
Example Use Cases
Example 1: Alternate Phone Number
Example 2: Multiple Delivery Addresses
Example 3: Product-Specific Questions
Tips for Using Duplicate
- Start with a Template: Create one perfect field, then duplicate it
- Consistent Settings: Duplicates maintain the same width, type, and style
- Quick Modifications: Only change what's different (like the label)
- Test Safely: Duplicate a field to test changes without affecting the original
After duplicating, immediately edit the field and change the label to avoid confusion. Fields with "(Copy)" in the label can confuse customers on the checkout page!
Bug Reports
When Reporting Issues
Please include the following information:
- WordPress Version: Your WordPress version number
- WooCommerce Version: Your WooCommerce version number
- Plugin Version: Checkout Fields Manager version
- PHP Version: Server PHP version
- Checkout Type: Classic or Block Checkout
- Browser: Which browser you're using
- Steps to Reproduce: Detailed steps to recreate the issue
- Screenshots: Screenshots of the issue (if applicable)
- Error Messages: Any error messages you see
The more details you provide, the faster we can help resolve your issue!
Bug Reports
Found a bug? Please report it to [email protected] with:
- Clear description of the bug
- Steps to reproduce
- Expected vs actual behavior
- System information (versions, browser, etc.)
We appreciate your feedback and bug reports - they help make the plugin better for everyone!