Customise WooCommerce checkout fields

Clients are often looking to customise the checkout field on their WooCommerce shop. This can be done using the “woocommerce_checkout_fields” filter.

Modify labels, placeholder or add custom class

The following example shows you how to rename field attributes such as the label, the placeholder, the priority or how to add a custom class of your WooCommerce checkout fields:

function wpharvest_override_checkout_fields( $fields ) {
    $fields['billing']['billing_company'] = array(
        'label' => __('Institute Name', 'woocommerce'), // Rename label
        'placeholder' => _x('', 'placeholder', 'woocommerce'), // Rename placeholder
        'required'    => true, // Set as required
    );
    $fields['billing']['job_title'] = array(
        'label'       => __('Job Title', 'woocommerce'),
        'placeholder' => _x('', 'placeholder', 'woocommerce'),
        'required'    => true,
        'priority'    => 31,
        'class'       => array('form-row-wide'),
        'clear'       => true
    );
    $fields['billing']['billing_phone']['required'] = true;
    $fields['billing']['billing_phone']['maxlength'] = 15;
    $fields['billing']['billing_phone']['custom_attributes'] = array( "min-length" => "9" );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'wpharvest_override_checkout_fields' );
Code language: PHP (php)

Set or remove the WooCommerce checkout field as required

function wpharvest_override_checkout_fields( $fields ) {
    $fields['billing']['billing_phone']['required'] = true;
    $fields['billing']['billing_state']['required'] = false;
    $fields['shipping']['shipping_state']['required'] = false;

    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'wpharvest_override_checkout_fields' );
Code language: PHP (php)

Change the countries order in the countries dropdown list

United States and United Kingdom being some of the most popular countries, you might want to set those as first in your WooCommerce checkout countries dropdown. You can change the countries order by unsetting the specific countries first, creating a new array with just them, and then appending the rest of the countries.

function wpharvest_change_country_order_in_checkout_form($countries)
{
    $usa = $countries['US']; // Store the data for "US" key
    unset($countries["US"]); // Remove "US" entry from the array
    $gb = $countries['GB']; // Store the data for "GB" key
    unset($countries["GB"]); // Remove "GB" entry from the array

    // Return "US" first in the countries array
    return array('US' => $usa, 'GB' => $gb ) + $countries;
}
add_filter( 'woocommerce_countries', 'wpharvest_change_country_order_in_checkout_form' );
Code language: PHP (php)

Did you find this tutorial useful, or are you looking for something slightly different? Feel free to leave a comment below and we will do our best to help you!