Add Custom WooCommerce Checkout Field

Add Custom WooCommerce Checkout Field

This snippet adds a custom field to the WooCommerce checkout page, validates it, saves it to order meta, and displays it in order details.

// Add custom field to checkout
function add_custom_checkout_field($checkout) {
    echo '<div id="custom_checkout_field"><h3>' . __('Additional Information') . '</h3>';

    woocommerce_form_field('gift_message', array(
        'type'          => 'textarea',
        'class'         => array('form-row-wide'),
        'label'         => __('Gift Message (Optional)'),
        'placeholder'   => __('Enter your gift message here...'),
        'required'      => false,
        'rows'          => 4,
    ), $checkout->get_value('gift_message'));

    echo '</div>';
}
add_action('woocommerce_after_order_notes', 'add_custom_checkout_field');

// Validate the field (if required)
function validate_custom_checkout_field() {
    if (isset($_POST['gift_message']) && empty($_POST['gift_message'])) {
        // Uncomment below to make it required
        // wc_add_notice(__('Please enter a gift message.'), 'error');
    }
}
add_action('woocommerce_checkout_process', 'validate_custom_checkout_field');

// Save the custom field to order meta
function save_custom_checkout_field($order_id) {
    if (!empty($_POST['gift_message'])) {
        update_post_meta($order_id, '_gift_message', sanitize_textarea_field($_POST['gift_message']));
    }
}
add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');

// Display custom field in order details (Admin)
function display_custom_field_in_admin_order($order) {
    $gift_message = get_post_meta($order->get_id(), '_gift_message', true);

    if ($gift_message) {
        echo '<div class="order_data_column">';
        echo '<h3>' . __('Gift Message') . '</h3>';
        echo '<p><strong>' . esc_html($gift_message) . '</strong></p>';
        echo '</div>';
    }
}
add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_field_in_admin_order');

// Display custom field in order emails
function add_custom_field_to_order_emails($order, $sent_to_admin, $plain_text, $email) {
    $gift_message = get_post_meta($order->get_id(), '_gift_message', true);

    if ($gift_message) {
        if ($plain_text) {
            echo "\n" . __('Gift Message:') . "\n" . $gift_message . "\n";
        } else {
            echo '<h2>' . __('Gift Message') . '</h2>';
            echo '<p>' . esc_html($gift_message) . '</p>';
        }
    }
}
add_action('woocommerce_email_order_meta', 'add_custom_field_to_order_emails', 10, 4);

// Display custom field on thank you page
function display_custom_field_on_thank_you_page($order_id) {
    $gift_message = get_post_meta($order_id, '_gift_message', true);

    if ($gift_message) {
        echo '<section class="woocommerce-gift-message">';
        echo '<h2>' . __('Your Gift Message') . '</h2>';
        echo '<p>' . esc_html($gift_message) . '</p>';
        echo '</section>';
    }
}
add_action('woocommerce_thankyou', 'display_custom_field_on_thank_you_page');

Field Types Available

You can use different field types by changing the type parameter:

• text: Single line text input
• textarea: Multi-line text area
• select: Dropdown select
• checkbox: Single checkbox
• radio: Radio buttons
• password: Password field
• email: Email input with validation
• tel: Phone number input
• number: Numeric input

Example: Dropdown Field

woocommerce_form_field('delivery_time', array(
    'type'     => 'select',
    'label'    => __('Preferred Delivery Time'),
    'required' => true,
    'options'  => array(
        ''           => __('Select...'),
        'morning'    => __('Morning (8am - 12pm)'),
        'afternoon'  => __('Afternoon (12pm - 5pm)'),
        'evening'    => __('Evening (5pm - 8pm)'),
    ),
), $checkout->get_value('delivery_time'));