Customize woocommerce checkout fields and make it easy for your customers. Checkout page plays an enormous role in your eCommerce success. it’s one among the foremost important a part of your conversion funnel. this is often the page that brings revenue.

It doesn’t matter what percentage people are visiting your website if nobody makes any purchase. Complicated checkout process is one among the most reason of high handcart abandonment.

You should always search for ways to form your checkout process as simple as possible. If you’re using WooCommerce as your eCommerce solution you’ll easily change the checkout page design, remove or change the prevailing checkout fields order.

WooCommerce Checkout Page Default Fields

By default, WooCommerce requires below information from the customers.

• First name
• Last name
• Company name
• Country
• Address line 1
• Address line 2
• Town/City
• Province/County/District
• Postcode / ZIP
• Phone
• Email address
• Order notes

Customize woocommerce checkout fields

You can customize your WooCommerce checkout fields with either custom code or WooCommerce extensions. we’ll cover both of these here.

1. Custom Code

Just for the reference, here’s a full list of fields within the array passed to woocommerce_checkout_fields. it’ll assist you map & understand within the future.

/**

* Billing Checkout Fields

*/

      billing_first_name

      billing_last_name

      billing_company

      billing_address_1

      billing_address_2

      billing_city

      billing_postcode

      billing_country

      billing_state

      billing_email

      billing_phone




/**

* Shipping Checkout Fields

*/

      shipping_first_name

      shipping_last_name

      shipping_company

      shipping_address_1

      shipping_address_2

      shipping_city

      shipping_postcode

      shipping_country

      shipping_state




/**

* Account Checkout Fields

*/

      account_username

      account_password

      account_password-2




/**

* Order Checkout Fields

*/

      order_comments

To Customize woocommerce checkout fields Each field that get passed to woocommerce_checkout_fields contains an array of below properties:

• type – type of field (text, textarea, password, select)
• label – label for the input field
• placeholder – placeholder for the input
• class – class for the input
• required – true or false, whether or not the field is require
• clear – true or false, applies a clear fix to the field/label
• label_class – class for the label element
• options – for select boxes, array of options (key => value pairs)

Remove Checkout Fields

Now to get rid of the fields you don’t want in your WooCommerce checkout page, use this snippet and alter the array keys accordingly to the list above. Using following code you can easily Customize woocommerce checkout fields.

add_filter( 'woocommerce_checkout_fields', 'xtreamwebsite_remove_woo_checkout_fields' );

function xtreamwebsite_remove_woo_checkout_fields( $fields ) {

    unset( $fields['billing']['billing_first_name'] );

    return $fields;

}

Change The Label & Placeholder Text of Checkout Fields

If you would like to vary the labels and placeholder of the checkout fields, use this snippet:

add_filter( 'woocommerce_checkout_fields', 'xtreamwebsite_rename_woo_checkout_fields' );

function xtreamwebsite_rename_woo_checkout_fields( $fields ) {

    $fields['billing']['billing_first_name']['placeholder'] = 'New placeholder';

    $fields['billing']['billing_first_name']['label'] = 'New label';

    return $fields;

}

Make The Required Checkout Fields Optional

By default certain fields of the checkout page are required. there’s no way a user can complete the acquisition without filling those correctly. If you would like to form those field optional and not mandatory, use this PHP:

add_filter( 'woocommerce_checkout_fields', 'xtreamwebsite_required_woo_checkout_fields' );

function xtreamwebsite_required_woo_checkout_fields( $fields ) {

    $fields['billing']['billing_first_name']['required'] = false;

    return $fields;

}

2. Plugins For Customizing WooCommerce Checkout:

If you don’t want to mess your hand with code but want more robust control, there are many great plugin out there which will assist you customize the checkout process easily. Using plugins you can customize your woocommerce checkout fields in very easy way.

WooCommerce Checkout Field Editor (Manager) Pro

WooCommerce Checkout Field Editor (Manager) Pro is that the hottest free plugin for customizing WooCommerce checkout fields. Using this plugin you’ll easily add custom fields, edit, delete, and re-order the prevailing checkout fields. Developer of this plugin features a paid version also , which supply more flexibility in editing checkout process.

WooCommerce Checkout Manager

Using WooCommerce Checkout Manager you’ll add various custom fields (Text Input, Text Area, Password, Radio Button, Check Box, Select Options, Date Picker, Time Picker, Color Picker, Heading, Multi-Select, Multi-Checkbox, Country, State, File Picker) to your checkout page.

WooCommerce Direct Checkout

As stated earlier simplifying checkout process is that the low hanging fruit. Every store owner should search for thanks to declutter their checkout process. This plugin will assist you do exactly that. This plugin allows users to skip the handcart page and directly attend the checkout page.