How to re-order Billing details fields in Checkout page WooCommerce

Have you ever wanted to present your customers with a customized checkout form? WooCommerce’s standard billing form will be sufficient for most purposes, as it includes most of the most common necessary details in order to complete an order:

WooCommerce checkout form screenshot - before

However, it is possible to re-arrange fields, completely remove fields or add new fields. WooCommerce, using WP Plugin API, allows you to use actions and filters in order to customize your forms to best match your needs.

In this example, we will simply re-order a few fields; we will switch the position of the “Company name” field and the “First” and “Last name” fields.

We will put the following snippet in our child theme’s functions.php file:


add_filter( 'woocommerce_checkout_fields', 'tl_reorder_billing_fields');

function tl_reorder_billing_fields($fields) {

    $order = array(
        'billing_company',
        'billing_first_name',
        'billing_last_name',
        'billing_address_1',
        'billing_email',
        'billing_phone'

    );
    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields['billing'][$field];
    }

    $fields['billing'] = $ordered_fields;
    return $fields;

}

And here is the result:

WooCommerce checkout form screenshot - after

Using our example as a model, you can re-arrange your fields in any way you wish.

Waqas

I hope you enjoy reading this blog post. If you want my team to do WooCommerce Maintenance for you, click here.

Leave a Comment

Your email address will not be published. Required fields are marked *