How to Add a Custom Field in WooCommerce Checkout Page Without a Plugin

Adding custom fields to your WooCommerce checkout page can help you collect additional information from your customers, such as special delivery instructions, company details, or custom preferences.

While plugins make this process easier, some store owners prefer to make these changes manually to avoid adding extra plugins to their site.

This guide will show you how to add a custom field to the WooCommerce checkout page without using a plugin.

Let’s get started with step-by-step instructions.

---

Why Add Custom Fields to the Checkout Page?

Before diving into the code, let’s briefly discuss why custom fields can be valuable:

1. Enhance User Experience: Collect extra details to improve the buying process or tailor your service.
2. Personalization: Offer options like gift messages or personalized preferences.
3. Custom Data Collection: Get essential data that standard fields don’t cover.

By customizing your checkout page, you can make your store more user-friendly and aligned with your specific needs.

---

Pre-Requisites

To follow this guide, you’ll need:

• Basic Understanding of Code: Familiarity with PHP and WordPress hooks will be helpful.
• Child Theme Installed: Ensure you’re working on a child theme to avoid losing your changes when updating your theme.
• Backup Your Site: Always back up your website before making any code changes.

---

Steps to Add a Custom Field in WooCommerce Checkout Page

We’ll use WooCommerce hooks to add and manage the custom field. Follow the steps below:

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

1. Log in to your WordPress dashboard.
2. Navigate to Appearance > Theme File Editor.
3. Select your active child theme from the right-hand dropdown.
4. Open the functions.php file. This is where you’ll add your custom code.

---

Step 2: Add the Custom Field

WooCommerce uses hooks to manage checkout fields. We’ll use the woocommerce_checkout_fields hook to add a new field.

Here’s an example of how to add a custom text field for “Order Notes”:

add_filter('woocommerce_checkout_fields', 'add_custom_checkout_field');

function add_custom_checkout_field($fields) {
    $fields['billing']['custom_order_note'] = array(
        'type'        => 'text',
        'label'       => __('Order Note', 'woocommerce'),
        'placeholder' => __('Add a note for your order', 'woocommerce'),
        'required'    => false,
        'class'       => array('form-row-wide'),
        'priority'    => 22,
    );

    return $fields;
}

• type: Defines the field type (e.g., text, checkbox, select).
• label: The text displayed above the field.
• placeholder: The hint text inside the field.
• required: Set to true if you want the field to be mandatory.
• class: Specifies the field’s CSS class for styling.
• priority: Determines the position of the field in the checkout form.

Save the file once you’ve added this code.

---

Step 3: Display the Field on the Checkout Page

After adding the custom field, test your checkout page to ensure the field appears. If everything is done correctly, you’ll see the new field under the billing section.

---

Step 4: Save the Field Data

To save the information entered into your custom field, use the woocommerce_checkout_update_order_meta hook.

Add the following code to your functions.php file:

add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');

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

This code ensures that the custom field data is saved as metadata for the order.

---

Step 5: Display Custom Field Data in the Admin Panel

To view the custom field data in the WooCommerce admin panel, use the woocommerce_admin_order_data_after_billing_address hook.

Add this code to your functions.php file:

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

function display_custom_field_admin_order($order) {
    $custom_note = get_post_meta($order->get_id(), '_custom_order_note', true);
    if ($custom_note) {
        echo '<p><strong>' . __('Order Note', 'woocommerce') . ':</strong> ' . $custom_note . '</p>';
    }
}

Now, when you view an order in the admin area, the custom field data will be visible under the billing address.

---

Step 6: Display Custom Field Data in Emails (Optional)

If you want the custom field data to appear in order confirmation emails, use the woocommerce_email_order_meta_fields filter:

add_filter('woocommerce_email_order_meta_fields', 'add_custom_field_to_emails', 10, 3);

function add_custom_field_to_emails($fields, $sent_to_admin, $order) {
    $custom_note = get_post_meta($order->get_id(), '_custom_order_note', true);
    if ($custom_note) {
        $fields['custom_order_note'] = array(
            'label' => __('Order Note', 'woocommerce'),
            'value' => $custom_note,
        );
    }
    return $fields;
}

---

Testing Your Custom Field

After completing these steps, test your checkout page thoroughly:

1. Add a product to your cart and proceed to checkout.
2. Fill in the custom field and place an order.
3. Check the custom field data in the WooCommerce admin panel and emails.

---

Troubleshooting Tips

• Field Not Showing: Double-check the hook (woocommerce_checkout_fields) and the placement of your code.
• Data Not Saving: Ensure the field name in the $_POST array matches the key used in the woocommerce_checkout_fields hook.
• Styling Issues: Use CSS to adjust the layout of your custom field.

---

Final Thoughts

Adding custom fields to your WooCommerce checkout page without a plugin gives you more control and flexibility while keeping your site lightweight. By following this guide, you can tailor your checkout process to meet your store’s unique needs.

If you’re comfortable with code, this method is a great way to extend WooCommerce functionality without relying on additional tools. Remember to always test your changes and maintain backups to ensure a smooth shopping experience for your customers.

Happy customizing!

About The Author