WooCommerce Checkout Fields Customization Guide

Checkout page plays a huge role in your eCommerce success. It is one of the most important part of your conversion funnel. This is the page that brings revenue.

It doesn’t matter how many people are visiting your website if no one makes any purchase. Complicated checkout process is one of the main reason of high shopping cart abandonment.

You should always look for ways to make your checkout process as simple as possible. If you are using WooCommerce as your eCommerce solution you can easily change the checkout page design, remove or change the existing 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

Customizing The Checkout Fields

You can customize your WooCommerce checkout fields with either custom code or WooCommerce extensions. We will cover both of those here.

1. Custom Code

Just for the reference, here’s a full list of fields in the array passed to woocommerce_checkout_fields. It will help you map out & understand in 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

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 remove the fields you don’t want in your WooCommerce checkout page, use this snippet and change the array keys accordingly to the list above:

add_filter( 'woocommerce_checkout_fields', 'tutoraspire_remove_woo_checkout_fields' );
 
function tutoraspire_remove_woo_checkout_fields( $fields ) {
    unset( $fields['billing']['billing_first_name'] ); 
    return $fields;
}

Change The Label & Placeholder Text of Checkout Fields

If you want to change the labels and placeholder of the checkout fields, use this snippet:

add_filter( 'woocommerce_checkout_fields', 'tutoraspire_rename_woo_checkout_fields' );
 
function tutoraspire_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 is no way a user can complete the purchase without filling those correctly. If you want to make those field optional and not mandatory, use this PHP:

add_filter( 'woocommerce_checkout_fields', 'tutoraspire_required_woo_checkout_fields' );
 
function tutoraspire_required_woo_checkout_fields( $fields ) {
    $fields['billing']['billing_first_name']['required'] = false;
    return $fields;
}

Moving or re-ordering Fields

You can change the default order of checkout fields using the tutorial. For example, you could display the email field first instead of first name.

Add Custom Checkout Fields

You can add your own WooCommerce custom checkout fields and use this data in various ways.

2. Plugins For Customizing WooCommerce Checkout:

If you don’t want to mess your hand with code but want more robust control, there are lots of great plugin out there that will help you customize the checkout process easily.

WooCommerce Checkout Field Editor (Manager) Pro

WooCommerce Checkout Field Editor (Manager) Pro is the most popular free plugin for customizing WooCommerce checkout fields. Using this plugin you can easily add custom fields, edit, delete, and re-order the existing checkout fields. Developer of this plugin has a paid version as well, which offer more flexibility in editing checkout process.

WooCommerce Checkout Manager

Using WooCommerce Checkout Manager you can 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 the low hanging fruit. Every store owner should look for way to declutter their checkout process. This plugin will help you do exactly that. This plugin allows users to skip the shopping cart page and directly go to the checkout page.

YITH WooCommerce Multi-step Checkout

Long Checkout pages are annoying and cumbersome. Fairly a large number of people drops out when they see how many fields they have to fill to buy the product. This plugin makes the checkout process digestible to users by splitting the default WooCommerce checkout page into multiple consecutive steps.

WooCommerce One Page Checkout

Would it be great if your customer could make the purchase without jumping through all the pages? Your dream came true! WooCommerce One Page Checkout help your customers to carry out entire purchase process on a single page.

Checkout Field Editor

Checkout Field Editor is developed by WooCommerce. A plugin for adding custom fields to the checkout page and modifying default checkout fields.

WooCommerce Smart Checkout

WooCommerce Smart Checkout optimizes the mobile checkout experiences by adding multi-page checkout, progress bars, address autocomplete, and much more.

Advanced Checkout Fields for WooCommerce

This useful plugin is developed by Jeroen Sormani. It is a must use plugin if you have plans to show different checkout fields based on the user role. It allows you to show different checkout fields based on the conditions you’ve setup.

WooCommerce Checkout Field Modifier

Add, edit or delete various fields of your WooCommerce checkout page easily using WooCommerce checkout field modifier.

Conditional Woo Checkout Field Pro

Create a personalized checkout experience based on what’s in your buyer’s shopping cart. Using this plugin you can add conditional fields based on the quantity of products being purchased and many more.

Woocommerce Easy Checkout Field Editor

Add, edit, delete & reorder the checkout fields of WooCommerce using the easy to use Drag and Drop Admin interface.

WooCommerce MultiStep Checkout Wizard

Why squeeze all the information you need on a single checkout page and scare your potential customer? Simplify the complex WooCommerce checkout process and make it less frightening by breaking it down to different sections.

Quick Checkout

Typically a customer has click through lot of pages to complete the purchase. Quick Checkout by WordImpress is the exact solution to this problem. It optimizes the checkout process by cutting downs all the page hoping. This plugin lets your customer complete the purchase on a single page.