Adding a WooCommerce checkout custom fields plugin to your store can completely transform how you collect customer information — without paying $49 to $99 for a premium tool. In this guide, you’ll learn exactly how to build a fully working, free WooCommerce checkout custom fields plugin from scratch using Claude AI, in just a few minutes, with no programming experience required.
Whether you’re a WordPress freelancer, store owner, or developer looking to save time and money, this step-by-step tutorial will show you how to use Claude AI to write production-ready plugin code, package it as a .zip file, and install it on any WordPress + WooCommerce site. We also include the complete AI prompt so you can replicate this exact plugin yourself instantly.
Table of Contents
What Is a WooCommerce Checkout Custom Fields Plugin?
A WooCommerce checkout custom fields plugin is a WordPress extension that lets you add, edit, and manage additional input fields on the WooCommerce checkout page beyond the default billing and shipping fields. These extra fields allow you to collect specific customer data that WooCommerce doesn’t capture by default.
What Are Custom Checkout Fields?
Custom checkout fields are additional form inputs — like text boxes, dropdowns, date pickers, or checkboxes — placed at various positions on the WooCommerce checkout form. Store owners use them to gather delivery instructions, gift messages, preferred contact times, business information, and much more.
Why Does WooCommerce Not Include This by Default?
WooCommerce keeps its core checkout form minimal on purpose to support the widest range of store types. Every store has different data requirements, so adding custom fields is deliberately left to plugins and code customization. While developers can use WooCommerce hooks like woocommerce_after_order_notes to add fields manually, non-developers need a plugin to do this without writing PHP.
Why Build Your Own Plugin Instead of Buying One?
Popular checkout field plugins like Checkout Field Editor Pro cost between $49 and $99 per year. While these are solid tools, building your own plugin with Claude AI gives you several meaningful advantages.
Cost Savings
Building with Claude AI is completely free. You get a fully working plugin without any subscription, license, or annual renewal fee.
Full Ownership and Control
When you build your own plugin, you own the code. You can modify it anytime, add features, and deploy it across unlimited client sites without worrying about license limits.
No Bloat
Many commercial plugins include features you’ll never use, adding unnecessary load to your site. A custom-built plugin includes only what you need — nothing more.
Learning by Doing
Using Claude AI to build a plugin is one of the best ways to learn how WordPress plugins work, how WooCommerce hooks function, and how PHP interacts with WordPress databases — all without having to write a single line of code yourself.
Features of the QT WooCommerce Checkout Custom Fields Plugin
The plugin built in this tutorial — called QT WooCommerce Checkout Custom Fields by Quick Tips — includes all the features you’d expect from a commercial plugin, completely free.
Supported Field Types
The plugin supports seven field types to cover virtually every use case:
- Text Input — for short, single-line custom answers
- Textarea — for longer, multi-line responses like special instructions
- Dropdown (Select) — for predefined choice lists
- Radio Buttons — for single-choice selection with visible options
- Checkbox — for binary yes/no opt-in fields (e.g. gift wrapping)
- Number Input — for numeric values like order quantities or reference numbers
- Date Picker — for delivery date selection or appointment booking
Field Placement Positions
You can place each field at six different positions in the checkout form:
- Before Billing Fields
- After Billing Fields
- Before Shipping Fields
- After Shipping Fields
- Before Order Notes
- After Order Notes
Field Configuration Options
Every field supports the following configuration:
- Custom label text
- Placeholder text
- Default value
- Required or optional toggle
- Enable or disable without deleting
- Custom CSS class for styling
- Dropdown/radio/checkbox options list
Admin Panel Features
- Drag-and-drop field ordering via jQuery UI Sortable
- Add, edit, and delete fields from the WooCommerce submenu
- Active/Disabled badge status on each field row
- Clean, native WordPress admin UI with no external dependencies
Order Integration
- Custom field values saved to WooCommerce order meta
- Displayed in the WooCommerce admin order detail page
- Included in WooCommerce customer order confirmation emails
- Shown on the customer-facing order detail and thank-you pages
Benefits of Adding Custom Fields to WooCommerce Checkout
Adding custom checkout fields isn’t just about collecting more data — it delivers real, measurable business benefits for your WooCommerce store.
Collect Business-Critical Information
Different businesses need different data at checkout. A florist might need a delivery date and a gift message. A B2B supplier might need a company VAT number. A food delivery store might need dietary restrictions. Custom fields make this possible without custom development.
Reduce Post-Purchase Communication
When you collect the right information at checkout, you eliminate follow-up emails and phone calls asking for missing details. This streamlines your order fulfillment process and saves your team significant time.
Improve Customer Experience
Customers appreciate a checkout that asks for exactly what’s needed — nothing more, nothing less. A well-designed custom checkout form signals professionalism and builds trust in your brand.
Enable Personalization
Storing custom field data against each order lets you personalize future marketing, customize packaging, and tailor post-purchase communications based on what customers actually told you at checkout.
Power Automation and CRM Workflows
Custom field data saved in order meta can be exported, passed to email marketing tools, or used to trigger automation workflows — turning checkout data into a powerful business asset.
Tools You Need to Get Started
You need almost nothing to build this plugin. Here’s the full list:
Tool | Purpose |
Claude AI (claude.ai) | The AI that writes all the plugin code for you |
WordPress website | A live or local site where you’ll install and test the plugin |
WooCommerce plugin | Must be installed and active — this plugin extends WooCommerce |
Web browser | That’s it — no code editor, no terminal, no programming tools needed |
You do not need to install Node.js, PHP tools, or any code editor. Claude AI handles all the file creation and zip packaging directly inside the chat.
Step-by-Step: How to Create the Plugin Using Claude AI
Follow these steps exactly to build your own WooCommerce checkout custom fields plugin using Claude AI in under 10 minutes.
Step 1: Open Claude AI
Go to claude.ai and sign in (or create a free account). Open a new conversation. Make sure you’re using Claude Sonnet or Claude Opus for best results with complex code generation tasks.
Step 2: Copy and Paste the Prompt
Copy the complete Claude AI prompt from Section 7 of this article. Paste it directly into the Claude chat input field and press Enter. Do not add or remove anything from the prompt — it is carefully engineered to produce the exact plugin described in this guide.
Step 3: Wait for Claude to Build All Files
Claude will systematically create every file needed for the plugin: the main plugin PHP file, four PHP class files, two CSS stylesheets, and one JavaScript file. This usually takes 60 to 90 seconds. Do not interrupt Claude while it is generating.
Step 4: Download the .zip File
Once Claude finishes, it will package all files into a single qt-woo-checkout-fields.zip file and present a download link. Click the link to save the zip file to your computer.
Step 5: Install the Plugin on WordPress
Go to your WordPress admin dashboard. Navigate to Plugins → Add New → Upload Plugin. Choose the zip file you downloaded and click Install Now. Then click Activate Plugin.
Step 6: Go to WooCommerce → Checkout Fields
After activation, navigate to WooCommerce → Checkout Fields in your WordPress admin sidebar. This is where you will add, configure, and manage all your custom checkout fields.
Step 7: Add Your First Custom Field
Click the Add New Field button. Fill in the field label, select the field type, choose a position on the checkout form, set it as required if needed, and click Save. Visit your WooCommerce checkout page to see the field appear immediately.
The Complete Claude AI Prompt to Build This Plugin
This is the exact prompt used to generate the QT WooCommerce Checkout Custom Fields plugin. Copy and paste it into Claude AI exactly as written to reproduce the same plugin.
Create a fully working WordPress plugin called "QT WooCommerce Checkout Custom Fields" as a downloadable .zip file ready to upload via WordPress Admin → Plugins → Add New → Upload Plugin.
Plugin Details:
- Plugin Name: QT WooCommerce Checkout Custom Fields
- Version: 1.0
- Author: Quick Tips
- Author URI: https://www.youtube.com/@ParamFreelance
- Text Domain: qt-woo-checkout-fields
- Requires PHP: 7.4+, WordPress 5.0+, WooCommerce 5.0+
File Structure:
qt-woo-checkout-fields/
├── qt-woo-checkout-fields.php
├── readme.txt
├── admin/class-qtwcf-admin.php
├── includes/class-qtwcf-field-manager.php
├── includes/class-qtwcf-checkout.php
├── includes/class-qtwcf-order.php
├── assets/css/admin.css
├── assets/css/checkout.css
└── assets/js/admin.js
FIELD MANAGER CLASS (class-qtwcf-field-manager.php):
Singleton class with static methods: get_fields(), get_enabled_fields(), save_fields(), field_types() returning [text, textarea, select, radio, checkbox, number, date], positions() returning 6 WooCommerce checkout hooks (before/after billing, shipping, order notes), generate_key() with duplicate prevention, sanitize_field() returning normalized array with keys: field_key, label, type, placeholder, required (bool), enabled (bool), position, options (array), default, css_class.
CHECKOUT CLASS (class-qtwcf-checkout.php):
Singleton. Hook render_fields_at_position() into all 6 position hooks at priority 20. render_field() outputs <p class="form-row form-row-wide qtwcf-field"> containing correct HTML per field type. Select shows blank default option. Radio uses <label class="qtwcf-radio-label">. All fields pre-fill from WC()->session. Required fields add required attribute + abbr asterisk. validate_fields() on woocommerce_checkout_process calls wc_add_notice() for empty required fields. save_fields() on woocommerce_checkout_update_order_meta calls update_post_meta() + WC()->session->set(). Enqueue assets/css/checkout.css only on is_checkout().
ORDER CLASS (class-qtwcf-order.php):
Singleton. display_in_admin() hooks to woocommerce_admin_order_data_after_billing_address — outputs div with h4 + p tags for each field value. display_in_frontend() hooks to woocommerce_order_details_after_order_table — outputs h2 + woocommerce-table. add_to_email() hooks to woocommerce_email_order_meta_fields filter — appends each field as [label][value] array.
ADMIN CLASS (admin/class-qtwcf-admin.php):
Singleton. Add submenu under WooCommerce (slug: qtwcf-fields, capability: manage_woocommerce). Enqueue admin.css + admin.js (with jquery + jquery-ui-sortable) only on qtwcf-fields pages. Three admin-post handlers: qtwcf_save_fields (add/edit with nonce qtwcf_save_fields), qtwcf_delete_field (with nonce qtwcf_delete_field + wp_nonce_url), qtwcf_reorder_fields. render_page() shows ?saved=1 and ?deleted=1 notices, shows render_form() on ?add=1 or ?edit=KEY, else render_table(). render_form() is a form-table with rows for: Label (required), Type (select), Placeholder, Default Value, CSS Class, Options row (hidden unless type is select/radio/checkbox), Position, Required checkbox, Enabled checkbox. Edit mode passes edit_key hidden input. render_table() shows draggable wp-list-table with columns: drag handle (☰ data-key attr), Label, Key (code tag), Type, Position, Required (✅ or —), Status (Active/Disabled badge), Edit + Delete action buttons. Empty state message if no fields.
ADMIN JS (assets/js/admin.js):
jQuery IIFE. Toggle #qtwcf_options_row visibility on #qtwcf_type change (show for select/radio/checkbox only), run on load. #qtwcf_add_option appends new .qtwcf-option-row with input[name="options[]"] and remove button. Delegated click on .qtwcf-remove-option removes .qtwcf-option-row. jQuery UI Sortable on #qtwcf-sortable with handle .qtwcf-drag-handle, axis y; on update collect data-key from each tr and POST reorder via $.post to ajaxurl.
ADMIN CSS (assets/css/admin.css):
.qtwcf-form-card: white, border 1px #c3c4c7, border-radius 4px, padding 20-24px, max-width 800px. .qtwcf-drag-handle: cursor grab, grey, 18px. .ui-sortable-helper: light blue bg + box-shadow. .qtwcf-badge-active: bg #d1fae5 text #065f46. .qtwcf-badge-inactive: bg #f3f4f6 text #6b7280. .qtwcf-delete-btn: red text, red bg on hover. .qtwcf-empty: centered, border, padding 40px.
CHECKOUT CSS (assets/css/checkout.css):
.qtwcf-field margin-top 12px. All inputs/textarea/select 100% width. Textarea min-height 80px. .qtwcf-radio-label inline-flex. .qtwcf-order-table th width 40%.
MAIN FILE (qt-woo-checkout-fields.php):
Define QTWCF_VERSION, QTWCF_PLUGIN_DIR, QTWCF_PLUGIN_URL, QTWCF_OPTION_KEY=qtwcf_fields. On plugins_loaded check WooCommerce is active (show admin_notices error if not). Require all 4 class files. Instantiate all 3 frontend singletons + Admin singleton inside is_admin() check. register_activation_hook creates empty array option if not set.
SECURITY: All handlers use check_admin_referer(). All output uses esc_html/esc_attr/esc_url. All POST/GET input sanitized. Delete URLs use wp_nonce_url().
Build all files, package as qt-woo-checkout-fields.zip, and provide the download link.
How to Install and Activate the Plugin on WordPress
Upload via WordPress Admin
The easiest way to install the plugin is directly through your WordPress admin. Go to Plugins → Add New → Upload Plugin, choose the zip file, and click Install Now.
Install via FTP
If you prefer FTP, unzip the file on your computer first. Then upload the qt-woo-checkout-fields folder to your /wp-content/plugins/ directory using an FTP client like FileZilla. Activate the plugin from the Plugins screen in your WordPress admin.
Verify the Plugin Is Working
After activation, go to WooCommerce → Checkout Fields. If you see the plugin’s admin page with an Add New Field button, the plugin has installed and activated correctly. If you see a WooCommerce dependency error instead, make sure WooCommerce is installed and active first.
How to Add and Configure Your Custom Checkout Fields
Adding a Text Field
Click Add New Field. Set the label to something like “Delivery Instructions”. Leave the type as Text Input. Set the position to After Order Notes. Optionally add a placeholder like “E.g. Leave at front door”. Click Add Field to save.
Adding a Dropdown Field
Set the type to Dropdown. The Options section will appear. Click + Add Option to add each choice — for example: Morning, Afternoon, Evening. Set the position to After Billing Fields. Save the field.
Making a Field Required
Check the Make this field required checkbox when creating or editing any field. When a customer leaves a required field blank, the WooCommerce checkout validation will prevent order placement and display a clear error message.
Reordering Fields
On the fields table page, grab any field by the ☰ drag handle on the left and drag it to the desired position in the list. Click Save Order to confirm the new arrangement.
Disabling a Field Temporarily
Edit any field and uncheck the Show on checkout checkbox. The field will be saved with Disabled status but not deleted, so you can re-enable it anytime without reconfiguring it.
How Custom Fields Appear in Orders and Emails
Admin Order Detail Page
When a customer completes checkout with your custom fields filled in, their responses are automatically saved to the order. In the WooCommerce admin, open any order and scroll down past the billing address. You’ll see a Custom Checkout Fields section showing each field’s label and the customer’s response.
Customer Confirmation Email
Custom field values are automatically appended to the WooCommerce order confirmation email sent to the customer after checkout, as well as the new order notification email sent to the store admin. No extra configuration is required.
Customer Order Page
Customers can also see their custom field responses on their order detail page under WooCommerce My Account → Orders. An “Additional Information” section displays all custom field data in a clean table layout.
Frequently Asked Questions (FAQ)
Is the plugin built with Claude AI compatible with all WooCommerce themes?
Yes. The plugin uses standard WooCommerce hooks and classes (like form-row and input-text) which are supported by all WooCommerce-compatible themes including Storefront, Astra, Flatsome, and OceanWP.
Can I use this plugin on client websites?
Absolutely. Since you own the code, you can install and use it on unlimited client websites at no additional cost. There are no license restrictions.
Does this plugin work with the WooCommerce block checkout?
Version 1.0 is built for the Classic WooCommerce Checkout shortcode. The WooCommerce Block Checkout (introduced in WooCommerce 8.3) uses a different extensibility API. Support for block checkout can be added in a future version.
Can Claude AI update or add features to the plugin in the future?
Yes. You can return to Claude AI at any time, describe the new feature you want, and ask it to update the plugin code. Claude can add conditional logic, pricing add-ons, file upload support, and more.
Will custom field data be lost if I deactivate the plugin?
No. Custom field values are stored in WordPress post meta (order meta) which persists in the database independently. Deactivating the plugin will not delete historical order data.
Do I need a paid Claude AI subscription to build this plugin?
Claude’s free tier can generate the plugin, though Claude Pro (paid) offers faster responses and higher usage limits which is helpful for complex, multi-file code generation tasks.
Can I add more than one field of the same type?
Yes. You can add as many fields as you need, of any type. Each field gets a unique key automatically generated from its label, so there are no conflicts.
Conclusion
Building a free WooCommerce checkout custom fields plugin using Claude AI is one of the most practical demonstrations of what AI-assisted development can do for WordPress store owners and developers today. In less than 10 minutes, Claude generates a production-ready, secure, well-structured plugin that rivals commercial alternatives costing up to $99 per year.
You get full ownership of the code, zero ongoing costs, and a plugin tailored exactly to your needs. The approach scales too — any time you need a new feature, just describe it to Claude and get working code back instantly.
If you found this guide useful, subscribe to the Quick Tips YouTube channel at youtube.com/@ParamFreelance for more WooCommerce, WordPress, and AI tutorials. Try the prompt above, install your plugin, and let us know in the comments what custom fields you added to your checkout!
