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.


  1. ebaru

    Excellent guide. Very well organized and extremely helpful.
    Thanks for sharing
    Greetings from Medellin-Colombia

  2. Michael

    Thanks for the guide. But how to update meta for “radio” or “select” type field and show field values in admin order and email pages? It should be one of the selected values to show. How to do this?

    Code like this one is not enough:
    if ($_POST[‘my_select_field’]) update_post_meta( $order_id, ‘My Select Field’, esc_attr($_POST[‘my_select_field’]));

    And I think it may look more or less like this:
    if ($_POST[‘my_select_field’]) update_post_meta( $order_id, ‘My Select Field’, esc_attr($_POST[‘option’][‘my_select_field’])); or similar if you understand me correctly.

    Tried a lot of codes, some don’t work, some show empty results.

  3. Alexandre


    Thanks for this useful guide.

    I’m looking for a way to add a custom field that would let the user choose between user roles (customer or company).

    Thanks fo any leads on that

  4. Amin

    Thank you very much.

  5. Diederik

    Wat a great and very simple tutorial. I’ve been hustelling with the checkout fields for a month and thought I had it in the bag when Woo Commerce update 3.4.0 messed up my checkout page. Although the country field had been unset and did not appear on the page, I could no longer checkout because a error message kept popping up that the billing country field was required. Using the code snippets plugin to unset the billing country field works ;-). Now I only have to find out how to remove the added text “(optional)” to the field name of custom checkout fields that I made. It was’nt there before update 3.4. Quite annoying but at least the checkout page works again.

    Thank you very much.

  6. Stefan

    Great snippets!
    However, I’m missing one function for this ultimate guide, and that is custom error messages for standard fields.
    Example: If the field “First name” is required but left blank, the error message is “Billing First name is a required field”.
    I would like to change this and have a custom message instead.

    Is there a snippet for changing/edit the error messages for standard fields? (first name, last name, city, etc.)

  7. C1 Dev

    The rename snippet works great! I’m having an issue with it not updating the Postcode label though. The placeholder does update but the label remains as “ZIP”. I know this label updates based on the Country selection so I’m wondering if the hook doesn’t apply to this field specifically. Any thoughts?

    Thank you!


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.