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

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.

Custom Code 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.

https://gist.github.com/cryptexvinci/3ac68fa2642e3e8df191ddee656250b1

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:

Install the plugin Code Snippets Now Go to Dashboard -> Snippets -> Add New To remove the checkout fields from WooCommerce, copy and paste the below code into the code field.

https://gist.github.com/cryptexvinci/75ba823a824b29e04a08ee7893fc0ee5

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:

https://gist.github.com/cryptexvinci/60413e92d6305e27559a1828b14d5490

Change The Label & Placeholder Text of Checkout Fields

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

Install the plugin Code Snippets Now Go to Dashboard -> Snippets -> Add New To change the labels and placeholder of the checkout fields, insert this in code field”

https://gist.github.com/cryptexvinci/acfffd317ea6593d85f87191f92528c6

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

https://gist.github.com/cryptexvinci/5b11715998ad08720c25a43cf2382dd2

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

https://gist.github.com/cryptexvinci/2182728ba74c3c4693c294c3d70bac34

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

https://gist.github.com/mikejolley/1604009

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.

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. 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.

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.

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.

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 is developed by WooCommerce. A plugin for adding custom fields to the checkout page and modifying default checkout fields.

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

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.

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

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.

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

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.

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.