WooCommerce Checkout Fields: The Ultimate 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. According to the study of Baymard Institute, typical shopping cart abandonment rate for online retailers varies between 60% and 80%, with an average of 67.91%.

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

WooCommerce Checkout page
Example: WooCommerce Checkout page

By default, WooCommerce requires below information from the customers.

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

 

Customizing The Checkout Fields

You can customize your WooCommerce checkout fields with either by Custom Code or WooCommerce extensions. We will cover both of those here.

  1. Custom Code
  2. WooCommerce Extensions or Plugins

 

1. Custom Code

Most tutorials tell you to add custom code to your theme functions.php, but this is not a recommended way of customization. Drawback of saving custom code to functions.php is, it will be removed automatically if you update the theme. Because of this in this tutorial we will use a custom code plugin to save and manage our custom codes. It will make sure your custom code stay intact even if you update your WordPress theme.

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.

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, follow these steps:

    1. Install the plugin Code Snippets
    2. Now Go to Dashboard -> Snippets -> Add New
    3. To remove the checkout fields from WooCommerce, copy and paste the below code into the code field.
  1. Click on Save Changes & Activate

Just for demonstration, above code removes almost all checkout fields. If you would like to display any checkout fields that have been removed, simply delete the line of code that represents the specific field.

For example if you only want to Billing phone number, just insert below code:

Change The Label & Placeholder Text of Checkout Fields

If you want to change the labels and placeholder of the checkout fields, follow these steps:

    1. Install the plugin Code Snippets
    2. Now Go to Dashboard -> Snippets -> Add New
    3. To change the labels and placeholder of the checkout fields, insert this in code field”
  1. Click on Save Changes & Activate

 

Make The Required Checkout Fields Optional

By default certain fields of the checkout page are made 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, follow these steps:

1. Install the plugin Code Snippets
2. Now Go to Dashboard -> Snippets -> Add New
3. To change required fields to optional, insert below code in code field

4. Click on Save Changes & Activate

 

Moving or re-ordering Fields

You can change the default order of checkout fields using below. For example lets display the email field first instead of first name.

1. Install the plugin Code Snippets
2. Now Go to Dashboard -> Snippets -> Add New
3. To re-order the fields, insert below code in code field

4. Click on Save Changes & Activate

Add Custom Checkout Fields

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

1. Install the plugin Code Snippets
2. Now Go to Dashboard -> Snippets -> Add New
3. To add a custom checkout fields, insert below code in code field

4. Click on Save Changes & Activate

 

Additional Resources:

 

2. Plugins For Customizing WooCommerce Checkout:

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

  1. WooCommerce Checkout Field Editor (Manager) Pro (Free)

    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.

  2. WooCommerce Checkout Manager (Free)

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.

3. WooCommerce Direct Checkout (Free)

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.

4. YITH WooCommerce Multi-step Checkout (Free)

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.

5. WooCommerce One Page Checkout ($79)

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.

6. Checkout Field Editor ($49)

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

7. WooCommerce Smart Checkout ($99)

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

8. Advanced Checkout Fields for WooCommerce ($49)

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.

9. WooCommerce Checkout Field Modifier ($29)

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

10. Conditional Woo Checkout Field Pro ($49)

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.

11. Woocommerce Easy Checkout Field Editor ($19)

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

12. WooCommerce MultiStep Checkout Wizard ($19)

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.

13. Quick Checkout ($76)

Typically a customer has click through lot of pages to complete the purchase. And It’s been known ( Baymard’s E-Commerce Checkout Usability Study ) that in every step small percentage of people drops off from the process. 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.

2 Comments

  1. Pingback: Weekly Roundup: March 31, 2017 – Sell with WP

  2. Pingback: What is WooCommerce? A Comprehensive Overview | Atlantis Themes

Leave a Reply