The default WooCommerce checkout collects standard billing and shipping information. For businesses that need additional data at checkout – a gift message, delivery instructions, a VAT number, or a preferred delivery date – a custom field collects this information without a separate form or support contact.
Method 1: Plugin (No Code)
The “Checkout Field Editor for WooCommerce” plugin (by ThemeHigh, free on WordPress.org) provides a drag-and-drop interface for adding, removing, and reordering checkout fields. Install it and go to WooCommerce -> Checkout Form. Click “Add Field” and configure:
- Field type – text, textarea, select, checkbox, radio
- Label – what the customer sees
- Placeholder – helper text inside the field
- Required – whether the field blocks form submission if empty
- Display on order details – whether the field value shows in the order confirmation email and admin order view
No code needed. The field appears on checkout immediately and the value saves to the order meta automatically.
Need help with your WordPress site? Describe your project and get a free estimate.
Method 2: Code (More Control)
For developers who want precise control without an additional plugin, WooCommerce provides hooks for adding and saving custom fields. Add this to your child theme’s functions.php:
// Display the field on checkout
add_action('woocommerce_after_order_notes', 'add_custom_checkout_field');
function add_custom_checkout_field($checkout) {
woocommerce_form_field('delivery_instructions', array(
'type' => 'textarea',
'class' => array('form-row-wide'),
'label' => 'Delivery Instructions',
'placeholder' => 'Any special delivery instructions?',
'required' => false,
), $checkout->get_value('delivery_instructions'));
}
// Validate (optional - only if required)
add_action('woocommerce_checkout_process', 'validate_custom_field');
function validate_custom_field() {
// Add validation if required:true above
}
// Save the field value to the order
add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');
function save_custom_checkout_field($order_id) {
if (!empty($_POST['delivery_instructions'])) {
update_post_meta($order_id, 'Delivery Instructions',
sanitize_textarea_field($_POST['delivery_instructions']));
}
}
// Display on admin order page
add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_field_in_admin');
function display_custom_field_in_admin($order) {
$value = get_post_meta($order->get_id(), 'Delivery Instructions', true);
if ($value) {
echo '<p><strong>Delivery Instructions:</strong> ' . esc_html($value) . '</p>';
}
}
Including the Custom Field in Order Emails
To include the custom field value in WooCommerce order confirmation emails, add:
add_filter('woocommerce_email_order_meta_fields', 'add_field_to_emails', 10, 3);
function add_field_to_emails($fields, $sent_to_admin, $order) {
$fields['delivery_instructions'] = array(
'label' => 'Delivery Instructions',
'value' => get_post_meta($order->get_id(), 'Delivery Instructions', true),
);
return $fields;
}
Adding a Select Dropdown Field
For fields with predetermined options (preferred delivery time slot, how did you hear about us, gift wrapping choice), use a select field instead of text input. Modify the woocommerce_form_field call:
woocommerce_form_field('preferred_time', array(
'type' => 'select',
'class' => array('form-row-wide'),
'label' => 'Preferred Delivery Time',
'options' => array(
'' => 'Select a time slot...',
'morning' => 'Morning (9am - 12pm)',
'afternoon' => 'Afternoon (12pm - 5pm)',
'evening' => 'Evening (5pm - 8pm)',
),
), $checkout->get_value('preferred_time'));
The save function works identically for select fields – the selected option value is what gets stored in the order meta.