Adding Custom Fields And Modifying Existing Fields in WooCommerce Checkout page

The checkout page in WooCommerce serves as the last step in the buying journey, where customers provide their shipping and payment information.

By default, WooCommerce offers standard fields such as name, address, email, and payment details.

However, in many cases, businesses require additional information from customers during the checkout process to tailor the purchasing experience or gather specific details for order fulfillment.

1. Adding Custom Fields to the Checkout Page

To add custom fields to the checkout form, we can use the woocommerce_checkout_fields hook.

function add_custom_fields_to_checkout( $fields ) {

    $fields['billing']['billing_custom_field'] = array(
        'label'         => __('Custom Field', 'text-domain'),
        'placeholder'   => _x('Custom Field', 'placeholder', 'text-domain'),
        'required'      => false,
        'class'         => array('form-row-wide'),
        'priority'      => 1
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_custom_fields_to_checkout' );

In this example, I have implemented an enhancement to the billing form by introducing a custom field. This field is optional but has been assigned a priority level of 1, ensuring that it appears prominently at the top of the form.

For adding a custom field to the shipping form, you need to make a modification by replacing $fields['billing'] with $fields['shipping'].

You have the flexibility to adjust the priority based on your personal preference. Additionally, you can make the field mandatory by setting the required attribute to true.

2. Saving Custom Fields in the Checkout Page

The woocommerce_checkout_update_user_meta hook is triggered whenever the customer’s billing address is updated during the checkout process. This hook provides us with an opportunity to save our custom fields to the user’s meta data.

function save_custom_fields( $customer_id, $posted ) {

    if ( isset( $posted['billing_custom_field'] ) ) {

        $billing_custom_field = sanitize_text_field( $posted['billing_custom_field'] );
        update_user_meta( $customer_id, 'billing_custom_field', $billing_custom_field );
    }
}
add_action( 'woocommerce_checkout_update_user_meta', 'save_custom_fields', 10, 2 );

3. Modifying Existing Fields in the Checkout Page

To enhance the checkout form by modifying existing fields, we can utilize the same hook employed for adding custom fields.

A. Billing Phone

In this example, I demonstrate how to enhance the billing_phone field by modifying its label and making it readonly using custom attributes.

function add_custom_fields_to_checkout( $fields ) {

    $fields['billing']['billing_phone'] = array(
        'label'             => __( 'Custom Phone number', 'text-domain' ),
        'required'          => true,
        'class'             => array(),
        'custom_attributes' => array('readonly'=>'readonly')
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_custom_fields_to_checkout' );

B. Billing Company

In this example, I will demonstrate how to specifically change the priority of the billing_company field.

function add_custom_fields_to_checkout( $fields ) {
    
    $fields['billing']['billing_company']['priority'] = 1;

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_custom_fields_to_checkout' );