Customize Checkout Fields Safely (WooCommerce)
WooCommerce checkout field customization is one of the fastest ways to improve conversions. But it’s also an area where “quick tweaks” can easily break validation, shipping logic, or payment flows if done incorrectly.
This guide shows safe, practical ways to customize checkout fields using WooCommerce hooks — including renaming labels, changing required status, reordering fields, adding new fields, and saving the values.
Before You Start (Safety Checklist)
- Test on staging first.
- Add one snippet at a time.
- Prefer WooCommerce hooks over editing templates.
- Keep checkout fields aligned with payment/shipping requirements.
- Always sanitize, validate, and escape output for custom fields.
1) Rename Labels and Placeholders
This is the safest and most common customization. Use woocommerce_checkout_fields to adjust labels, placeholders, and field classes.
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
// Change label
$fields['billing']['billing_phone']['label'] = 'Phone number';
// Change placeholder
$fields['billing']['billing_phone']['placeholder'] = 'e.g. +1 555 123 4567';
// Add a CSS class for styling
$fields['billing']['billing_phone']['class'] = array( 'form-row-wide' );
return $fields;
} );2) Make a Field Optional (or Required)
Be careful with this. Some gateways and shipping setups expect specific fields (especially phone and address fields).
Make phone optional
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
$fields['billing']['billing_phone']['required'] = false;
return $fields;
} );Make company required
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
$fields['billing']['billing_company']['required'] = true;
return $fields;
} );3) Remove Fields (Safely)
Removing checkout fields is safe if you remove only what you truly don’t need. Avoid removing address fields if you ship physical products.
Remove company + second address line
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
unset( $fields['billing']['billing_company'] );
unset( $fields['billing']['billing_address_2'] );
return $fields;
}, 20 );Tip: If you use WooCommerce Blocks checkout, some customizations may require block-specific approaches. Classic checkout (shortcode-based) is the most compatible with snippets.
4) Reorder Checkout Fields
WooCommerce uses a priority value for ordering. Lower numbers appear first.
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
// Billing: move email above phone
$fields['billing']['billing_email']['priority'] = 20;
$fields['billing']['billing_phone']['priority'] = 30;
// Put first/last name first
$fields['billing']['billing_first_name']['priority'] = 5;
$fields['billing']['billing_last_name']['priority'] = 10;
return $fields;
}, 20 );5) Add a Custom Checkout Field (With Save + Display)
If you add a field, you must handle:
- Rendering (field definition)
- Validation (if required)
- Saving to order meta
- Displaying in admin + emails (optional)
Add a “Delivery instructions” field
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
$fields['order']['delivery_instructions'] = array(
'type' => 'textarea',
'label' => 'Delivery instructions',
'placeholder' => 'e.g. Leave at the front door',
'required' => false,
'class' => array( 'form-row-wide' ),
'priority' => 999,
);
return $fields;
}, 20 );Save the field value to the order
add_action( 'woocommerce_checkout_create_order', function( $order, $data ) {
if ( isset( $_POST['delivery_instructions'] ) ) {
$value = sanitize_textarea_field( wp_unslash( $_POST['delivery_instructions'] ) );
if ( $value !== '' ) {
$order->update_meta_data( '_delivery_instructions', $value );
}
}
}, 10, 2 );Show it in the admin order screen
add_action( 'woocommerce_admin_order_data_after_billing_address', function( $order ) {
$value = $order->get_meta( '_delivery_instructions' );
if ( $value ) {
echo '<p><strong>Delivery instructions:</strong><br>' . esc_html( $value ) . '</p>';
}
} );Add it to customer emails (optional)
add_action( 'woocommerce_email_after_order_table', function( $order, $sent_to_admin, $plain_text ) {
$value = $order->get_meta( '_delivery_instructions' );
if ( ! $value ) {
return;
}
if ( $plain_text ) {
echo "\nDelivery instructions: " . $value . "\n";
} else {
echo '<p><strong>Delivery instructions:</strong> ' . esc_html( $value ) . '</p>';
}
}, 10, 3 );6) Add Validation for Custom Fields
If you add a required field, validate it during checkout.
add_action( 'woocommerce_checkout_process', function() {
if ( isset( $_POST['delivery_instructions'] ) ) {
// example validation: limit length
$value = sanitize_textarea_field( wp_unslash( $_POST['delivery_instructions'] ) );
if ( mb_strlen( $value ) > 300 ) {
wc_add_notice( 'Delivery instructions must be 300 characters or less.', 'error' );
}
}
} );7) Common Mistakes to Avoid
- Removing required shipping fields on physical product stores
- Forgetting to save custom fields (field appears but value is lost)
- Not sanitizing user input before saving to order meta
- Breaking checkout layout by using invalid
classvalues - Conflicts with checkout blocks (block checkout requires different customization methods)
Where to Add This Code
- Best option: Code Snippets plugin (easy enable/disable per snippet)
- Alternative: Child theme
functions.php - Best for many customizations: a small custom plugin
Conclusion
Customizing WooCommerce checkout fields is safe and stable when you do it through hooks and handle the full flow: field definition → validation → saving → display. Start with small changes (labels, required status, ordering) and only then add new fields with proper sanitization.
If you tell me what fields you want to remove/add (and whether you use Checkout Blocks or Classic Checkout), I can generate a minimal, conflict-free snippet set for your exact setup.
🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.
