How to Customize WooCommerce Checkout Fields

The Customize WooCommerce Checkout Fields process is one of the most important steps in the buyer’s journey it’s the last chance you have to convince shoppers to make a purchase. But a whopping 63.23% of eCommerce shopping carts are abandoned. That’s a lot of online shoppers who decide to purchase a product but change their minds at the last second.

There are a variety of factors that impact abandoned carts (like shipping costs and payment options), but the checkout page itself also plays a role. If it’s too complicated, too long, or requires information that’s too personal, customers might leave and purchase a similar product elsewhere.

One way to optimize your checkout page? Customized WooCommerce checkout fields based on your business needs and target audience. For example: If you don’t typically sell to companies, remove the Company Name field. If you send customers birthday surprises, include a Date of Birth field. If you sell pet products, it may make sense to ask for Type of Pet.

In this article, we’ll walk you through how to customize your checkout page to meet the needs of both your target audience and business.

Checkout field modifications

WooCommerce provides all the essential fields for your checkout page. By default, it asks customers for:

• Billing details
• First name
• Last name
• Company name
• Country
• Address
• Town/City
• District
• Postcode/ZIP
• Phone
• Email address
• Order notes

There are lots of ways to customize the page, including:

• Editing the design
• Changing the text on the “Place Order” button
• Company name
• Removing a field
• Making a field required (or not required)
• Changing input field labels and placeholder text
• Collecting customers’ account numbers
• Verifying a delivery preference
• Allowing customers to request a delivery date or deadline
• Setting a preferred contact method

These are just a few of the customizations you can make; WooCommerce provides nearly endless flexibility for every experience level. If you’re comfortable editing code, you can customize with code snippets. If you prefer a little more structure, there are a variety of extensions and plugins for editing checkout fields.

Customize WooCommerce checkout fields using code snippets

 /**
 Remove all possible fields
 **/
function wc_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_email'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_first_name'] );
    unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );

    // Shipping fields
    unset( $fields['shipping']['shipping_company'] );
    unset( $fields['shipping']['shipping_phone'] );
    unset( $fields['shipping']['shipping_state'] );
    unset( $fields['shipping']['shipping_first_name'] );
    unset( $fields['shipping']['shipping_last_name'] );
    unset( $fields['shipping']['shipping_address_1'] );
    unset( $fields['shipping']['shipping_address_2'] );
    unset( $fields['shipping']['shipping_city'] );
    unset( $fields['shipping']['shipping_postcode'] );

    // Order fields
    unset( $fields['order']['order_comments'] );

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

Note: The Country field is required. If you remove it, orders cannot be completed and your checkout form will give the following error: “Please enter an address to continue.”

In the below example, we’ll edit the Billing Phone field. Add this code to your child theme’s functions.php file.

add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');
function wc_unrequire_wc_phone_field( $fields ) {
$fields['billing_phone']['required'] = false;
return $fields;
}
 

Alternatively, if you’d like to make a field required, change the “false” text to “true.”

Change input field labels and placeholders: Add the following code to your child theme’s functions.php file and customize it to fit your needs.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
 {
 unset($fields['billing']['billing_address_2']);
 $fields['billing']['billing_company']['placeholder'] = 'Business Name';
 $fields['billing']['billing_company']['label'] = 'Business Name';
 $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; 
 $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name';
 $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name';
 $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; 
 $fields['billing']['billing_last_name']['placeholder'] = 'Last Name';
 $fields['billing']['billing_email']['placeholder'] = 'Email Address ';
 $fields['billing']['billing_phone']['placeholder'] = 'Phone ';
 return $fields;
 }
 About Us