How to Add Custom WooCommerce Checkout Fields Without a Plugin (Code Tutorial)

Introduction

If you run a WooCommerce store and want to customize the checkout experience, you’ve likely come across plugins that help you do it. But what if you don’t want to use a plugin?

In this guide, you’ll learn how to add custom fields to the WooCommerce checkout page using code, giving you full control with minimal overhead.

Why Add Custom Checkout Fields?

Custom checkout fields can help you:

• Collect extra information (e.g., delivery notes, gift messages, consent checkboxes)
• Tailor the checkout flow to your business model
• Reduce reliance on third-party plugins

Where to Add the Code

You’ll need to add this code to your theme’s functions.php file or in a custom plugin.

Step 1: Display a Custom Field on the Checkout Page

add_action('woocommerce_after_order_notes', 'add_custom_checkout_field');

function add_custom_checkout_field($checkout) {
    echo '<div id="custom_checkout_field"><h3>' . __('Extra Information') . '</h3>';

    woocommerce_form_field('custom_field_note', array(
        'type'        => 'text',
        'class'       => array('form-row-wide'),
        'label'       => __('Please enter any special instructions'),
        'required'    => false,
    ), $checkout->get_value('custom_field_note'));

    echo '</div>';
}

Step 2: Validate the Field (Optional)

add_action('woocommerce_checkout_process', 'validate_custom_checkout_field');

function validate_custom_checkout_field() {
    if (!$_POST['custom_field_note']) {
        // Uncomment if required
        // wc_add_notice(__('Please fill in the custom field.'), 'error');
    }
}

Step 3: Save the Field Data

add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');

function save_custom_checkout_field($order_id) {
    if (!empty($_POST['custom_field_note'])) {
        update_post_meta($order_id, 'custom_field_note', sanitize_text_field($_POST['custom_field_note']));
    }
}

Step 4: Display the Field in Admin Order Page

add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_field_in_admin', 10, 1);

function display_custom_field_in_admin($order) {
    $note = get_post_meta($order->get_id(), 'custom_field_note', true);
    if ($note) {
        echo '<p><strong>' . __('Special Instructions') . ':</strong> ' . esc_html($note) . '</p>';
    }
}

Optional: Display in Emails

add_filter('woocommerce_email_order_meta_fields', 'add_custom_field_to_emails');

function add_custom_field_to_emails($fields) {
    $fields['custom_field_note'] = __('Special Instructions');
    return $fields;
}

Final Thoughts

Adding custom checkout fields with code gives you clean, performant control over your checkout experience without relying on plugins. Perfect for developers or store owners who want a lightweight, flexible solution.

Need more advanced features like conditionally showing fields or integrating with APIs? This method is a solid foundation to build on.

Need Help?

If you’d like a version tailored to your use case (like checkboxes, date pickers, or dropdowns), feel free to reach out or check the WooCommerce documentation.