WooCommerce: Add Custom Checkout Inputs (2025 Guide)

WooCommerce provides a flexible checkout system that can be customized according to your business needs. If you want to collect additional customer information during the checkout process, adding custom form fields is a great solution.

In this article, we’ll guide you through how to create WooCommerce checkout custom form fields using code—no plugin required.

Step 1: Delete the Existing Checkout Page

1. Log in to your WordPress admin dashboard.
2. Go to Pages > All Pages.
3. Find the page named Checkout.
4. Hover over it and click Trash to delete it.

Step 2: Create a New Checkout Page

• Go to Pages > Add New.
• Name the page something like Checkout.
• In the content editor, add the following shortcode:

[woocommerce_checkout]

• Click Publish to save the new page.

Step 3: Update WooCommerce Settings

1. Go to WooCommerce > Settings.
2. Click on the Advanced tab.
3. Under the Checkout Page section, choose your newly created page from the dropdown.
4. Click Save Changes.

Now you can add custom checkout inputs to WooCommerce using the steps above.

 

How to Add a Custom Checkout Field in WooCommerce

You can add custom fields by hooking into WooCommerce’s woocommerce_checkout_fields filter. Here's how.

Step 1: Edit Your Theme’s functions.php File

Go to:

WordPress Dashboard → Appearance → Theme File Editor → functions.php

⚠️ Tip: Always use a child theme to avoid losing changes after theme updates.

Step 2: Add the Custom Field Code

Here's a sample code to add a custom "Delivery Date" field to the WooCommerce checkout form.

// Add custom field to checkout
add_filter('woocommerce_checkout_fields', 'custom_checkout_field');

function custom_checkout_field($fields) {
    $fields['billing']['delivery_date'] = array(
        'type'        => 'date',
        'label'       => __('Preferred Delivery Date'),
        'placeholder' => __('Select delivery date'),
        'required'    => false,
        'class'       => array('form-row-wide'),
        'priority'    => 25,
    );
    return $fields;
}

Step 3: Display Field Value in Order Admin Panel

// Save the custom field
add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');
function save_custom_checkout_field($order_id) {
    if (!empty($_POST['delivery_date'])) {
        update_post_meta($order_id, 'delivery_date', sanitize_text_field($_POST['delivery_date']));
    }
}

// Show custom field in the admin order details
add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin_order', 10, 1);
function display_custom_field_admin_order($order) {
    $delivery_date = get_post_meta($order->get_id(), 'delivery_date', true);
    if ($delivery_date) {
        echo '<p><strong>' . __('Delivery Date') . ':</strong> ' . esc_html($delivery_date) . '</p>';
    }
}

Step 4: Show the Field in Customer’s Email

// Add custom field to the order email
add_filter('woocommerce_email_order_meta_fields', 'custom_email_order_meta_fields', 10, 3);

function custom_email_order_meta_fields($fields, $sent_to_admin, $order) {
    $fields['delivery_date'] = array(
        'label' => __('Delivery Date'),
        'value' => get_post_meta($order->get_id(), 'delivery_date', true),
    );
    return $fields;
}

Result

Now when customers check out, they will see a “Preferred Delivery Date” field. The value will:

• Appear in the admin order page
• Be saved in order metadata
• Be included in customer and admin emails

Tips and Customization Ideas

You can change:

• type to 'text', 'select', 'checkbox', 'radio', 'textarea', etc.
• 'billing' to 'shipping' or 'order' for different sections
• required to true to make it mandatory

Example of a Select Field:

$fields['billing']['source'] = array(
    'type'    => 'select',
    'label'   => __('How did you hear about us?'),
    'options' => array(
        ''           => __('Select an option'),
        'google'     => __('Google'),
        'friend'     => __('Friend'),
        'social'     => __('Social Media'),
    ),
);

Conclusion

Adding custom checkout fields in WooCommerce can improve your store’s functionality and customer experience. With a few lines of code, you can tailor the checkout page to better match your business needs.

For advanced setups like conditional logic or multi-step forms, using a plugin or custom development may be required.