How to Customize WooCommerce Checkout Field
If you run an online store, chances are the default checkout form doesn’t capture everything you need from customers. Learning how to customize WooCommerce checkout field options gives you full control over what information you collect — whether that’s a delivery instruction, a gift message, or a business tax ID. To add a customize WooCommerce checkout field, you can do this by adding some code to your theme’s functions.php file. Here are the steps to achieve this:
Step 1: Add the Customize WooCommerce Checkout Field
Add the following code to your theme’s functions.php file. This example adds a custom text field called “Custom Field”:
// Add the custom field to the checkout form
add_action('woocommerce_after_order_notes','custom_checkout_field');
function custom_checkout_field($checkout) {
echo '<div id="custom_checkout_field"><h2>' . __('Custom Field') . '</h2>';
woocommerce_form_field('custom_field', array(
'type' => 'text',
'class' => array('custom-field-class form-row-wide'),
'label' => __('Enter something here'),
'placeholder' => __('Placeholder text'),
), $checkout->get_value('custom_field'));
echo '</div>';
}
This hook runs after the order notes section, which is a common place to insert a customize WooCommerce checkout field, though you can target other checkout sections using different WooCommerce hooks depending on where you want the field to appear.
Step 2: Validate the Custom Field
Add the following code to validate the custom field so customers can’t submit an order without filling it in:
// Validate the custom field
add_action('woocommerce_checkout_process','custom_checkout_field_process');
function custom_checkout_field_process() {
if (!$_POST['custom_field']) {
wc_add_notice(__('Please enter a value for the custom field.'), 'error');
}
}
If your custom field is optional, simply remove this validation step — not every customize WooCommerce checkout field needs to be required.
Step 3: Save the Custom Field
Add the following code to save the custom field value as order metadata:
// Save the custom field
add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');
function custom_checkout_field_update_order_meta($order_id) {
if (!empty($_POST['custom_field'])) {
update_post_meta($order_id, 'Custom Field', sanitize_text_field($_POST['custom_field']));
}
}
Always sanitize user input with sanitize_text_field() before saving it — this protects your site from malicious data being injected through the checkout form.
Step 4: Display the Custom Field in the Order Admin
Add the following code to display the custom field value in the WooCommerce order admin panel:
// Display the custom field in the order admin
add_action('woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1);
function custom_checkout_field_display_admin_order_meta($order) {
echo '<p><strong>' . __('Custom Field') . ':</strong> ' . get_post_meta($order->get_id(), 'Custom Field', true) . '</p>';
}
This makes it easy for store admins to see the extra information right inside the order screen, without digging through raw metadata.
Step 5: Display the Custom Field in the Order Email
Add the following code to display the custom field value in the WooCommerce order confirmation email:
// Display the custom field in the order email
add_filter('woocommerce_email_order_meta_keys', 'custom_checkout_field_order_meta_keys');
function custom_checkout_field_order_meta_keys($keys) {
$keys[] = 'Custom Field';
return $keys;
}
Once all five steps are complete, this will add a custom field to the WooCommerce checkout form, validate it, save the data, display it in the admin order details, and include it in the order emails — a complete, end-to-end way to customize WooCommerce checkout field behavior across your store.
Additional Notes
- Backup Your Site: Always make a backup of your site before making any changes to the code.
- Child Theme: If possible, use a child theme to add custom code so that your changes are not lost when the parent theme is updated.
- Test Changes: Test the changes on a staging site or local development environment before applying them to your live site.
- Plugin Alternative: If you’d rather avoid editing code directly, plugins like Checkout Field Editor for WooCommerce let you customize WooCommerce checkout field options through a visual interface instead.
Comments