How to Customize WooCommerce Checkout Fields

Written by Mariah Liszewski on January 9, 2020 Blog.

The checkout process is one of the most important steps in the buyer journey — it’s the last chance you have to convince shoppers to make a purchase. But a whopping 63.23% of eCommerce shopping carts are abandoned. That’s a lot of online shoppers who decide to purchase a product but change their minds at the last second.

There are a variety of factors that impact abandoned carts (like shipping costs and payment options), but the checkout page itself also plays a role. If it’s too complicated, too long, or requires information that’s too personal, customers might leave and purchase a similar product elsewhere.

One way to optimize your checkout page? Customized checkout fields based on your business needs and target audience. For example: If you don’t typically sell to companies, remove the Company Name field. If you send customers birthday surprises, include a Date of Birth field. If you sell pet products, it may make sense to ask for Type of Pet.

In this article, we’ll walk you through how to customize your checkout page to meet the needs of both your target audience and business.

Checkout field modifications

WooCommerce provides all the essential fields for your checkout page. By default, it asks customers for:

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

There are lots of ways to customize the page, including:

  • Editing the design
  • Changing the text on the “Place Order” button 
  • Removing a field
  • Making a field required (or not required)
  • Changing input field labels and placeholder text
  • Collecting customers’ account numbers
  • Verifying a delivery preference
  • Allowing customers to request a delivery date or deadline
  • Setting a preferred contact method

These are just a few of the customizations you can make; WooCommerce provides nearly endless flexibility for every experience level. If you’re comfortable editing code, you can customize with code snippets. If you prefer a little more structure there are a variety of extensions and plugins for editing checkout fields.

Customize checkout fields using code snippets

Note: If you are unfamiliar with code and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our Support Policy.

Code snippets are flexible ways for developers and store owners to customize WooCommerce checkout fields. Here’s a list of primary tags, including classes and IDs, that you can use to customize the visual design of your checkout page. Add the custom CSS to your child theme or the WordPress Customizer.

To see all of the classes and selectors, use your browser’s inspector on your website to find the exact area you’d like to customize.

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order">

For example, if you want to change the background color of text input boxes and give them rounded corners, you would add:

input[type="text"] {
 border-radius: 10px !important;
 background-color: #222 !important;
}

Remove a checkout field:

This is fairly straightforward, but be careful, as this change could cause conflicts with other extensions and plugins.

Add the following code to your child theme’s functions.php file. Note that pasting the entire code will remove all fields from the checkout page, so be sure to include only the fields you want to remove. 

 /**
 Remove all possible fields
 **/
function wc_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_email'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_first_name'] );
    unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );

    // Shipping fields
    unset( $fields['shipping']['shipping_company'] );
    unset( $fields['shipping']['shipping_phone'] );
    unset( $fields['shipping']['shipping_state'] );
    unset( $fields['shipping']['shipping_first_name'] );
    unset( $fields['shipping']['shipping_last_name'] );
    unset( $fields['shipping']['shipping_address_1'] );
    unset( $fields['shipping']['shipping_address_2'] );
    unset( $fields['shipping']['shipping_city'] );
    unset( $fields['shipping']['shipping_postcode'] );

    // Order fields
    unset( $fields['order']['order_comments'] );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Note: The Country field is required. If you remove it, orders cannot be completed and your checkout form will give the following error: “Please enter an address to continue.”

Make a required field not required:

In the below example, we’ll edit the Billing Phone field. Add this code to your child theme’s functions.php file.

add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');
function wc_unrequire_wc_phone_field( $fields ) {
$fields['billing_phone']['required'] = false;
return $fields;
}

Alternatively, if you’d like to make a field required, change the “false” text to “true.”

Change input field labels and placeholders:

Add the following code to your child theme’s functions.php file and customize it to fit your needs.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
 {
 unset($fields['billing']['billing_address_2']);
 $fields['billing']['billing_company']['placeholder'] = 'Business Name';
 $fields['billing']['billing_company']['label'] = 'Business Name';
 $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; 
 $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name';
 $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name';
 $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; 
 $fields['billing']['billing_last_name']['placeholder'] = 'Last Name';
 $fields['billing']['billing_email']['placeholder'] = 'Email Address ';
 $fields['billing']['billing_phone']['placeholder'] = 'Phone ';
 return $fields;
 }

Customize checkout fields with plugins

WooCommerce provides a few excellent extensions for editing checkout fields without touching a line of code. 

Checkout Field Editor

The Checkout Field Editor extension allows you to add and remove checkout fields, or update the type, label, and placeholder value with a few clicks. You can also mark each checkout field as “required” or “not required.”

screenshot of Checkout Field Editor options

When adding a new field, you can choose from the following types:

  • Text – standard text input
  • Password – password text input
  • Textarea – A text area field
  • Select – A dropdown/select box
  • Multi-select – A multi-select box 
  • Radio – A set of radio inputs
  • Checkbox – A checkbox field
  • Date picker – A text field with a date picker attached
  • Heading – A heading, for organizing a longer page

If your products are commonly given as gifts, you might offer several packaging options. You could use radio buttons to allow customers to select between plain packaging, birthday-themed packaging, or anniversary-themed packaging. You could make this field required, set the label to “Choose your package type”, and set the placeholder to “plain.”

To assist with advanced customizations, Checkout Field Editor provides helpful documentation.

WooCommerce Checkout Add-Ons

The WooCommerce Checkout Add-Ons extension gives you the flexibility to offer free or paid add-ons at checkout, like rush fulfillment, gift wrapping, or upsells like stickers or insurance. You can add several field types to your checkout page, including text fields, text areas, dropdowns, multi-selects, radio buttons, checkboxes, multi-checkboxes, and file uploads.

Checkout add-ons shown on a checkout page

In your dashboard, you’ll also be able to sort and filter orders based on the options you’ve created. This might be helpful if you want to prioritize orders by delivery date or show only orders with expedited processing. Or you might want to pack gift-wrapped orders all at the same time.

WooCommerce One Page Checkout

Want to simplify your checkout process even further? The WooCommerce One Page Checkout extension turns any page into a checkout page.

According to a study by the Baymard Institute, one out of four shoppers abandoned a cart in the last quarter due to a long or complicated checkout process. WooCommerce One Page Checkout combats this by allowing customers to add products to their cart and submit payment all on the same page.   

You can even add checkout fields to landing pages, which is particularly helpful if you’re a service-based business. 

WooCommerce Social Login

Forcing a customer to create an account on your website is a potential barrier to purchase. Giving them the ability to use their existing social media profiles to create an account helps break down this barrier. 

WooCommerce Social login prompt on the customer login page

The WooCommerce Social Login extension makes this process as easy and secure as possible. Customers can log into your site using their Facebook, Twitter, Google, Amazon, LinkedIn, PayPal, Instagram, Disqus, Yahoo, or VK accounts instead of creating new login information.

Start customizing

The checkout process can have a significant impact on your conversion rate so you should make changes carefully, with a specific goal in mind.

Thankfully, WooCommerce gives you the flexibility to customize your checkout process to best serve your online customers. Whether you need to make visual changes or add and remove checkout fields, you have lots of solutions to choose from.

Add, edit, and remove fields shown on your store's checkout page with WooCommerce Checkout Field Editor

6 Responses

  1. Ofentse
    January 11, 2020 at 4:22 pm #

    Had trouble doing this and thanks finally I’m doing it like PRO.

    • Mariah Liszewski
      January 16, 2020 at 3:31 am #

      Great to hear, Ofentse! Thanks for reading!

  2. OliviaHoros
    January 21, 2020 at 8:25 pm #

    Remove field(s). You can remove field(s) from displaying in checkout page, order details page and emails. Removing core fields may leads to unexpected results with some plugins. We are not recommending this.

    • Mariah Liszewski
      January 22, 2020 at 7:37 pm #

      Absolutely, Olivia! We mentioned this in the post as well — removing some fields could conflict with plugins/extensions, so you should always be careful and test properly.

  3. Cesar
    February 2, 2020 at 11:47 pm #

    Hi Mariah, do you know if the address fields are required if the user is checking out with paypal or stripe?

  4. itskontact
    February 2, 2020 at 11:50 pm #

    Hi Mariah, do you know if the address fields are required for checking out with Paypal or Stripe? I don’t want to have people filling out a bunch of form fields. I would like to make it fast and easy for them. Also since I sell digital goods I don’t need their address, phone or even name but I am not sure if that would cause a problem with the payment gateways.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment
%d bloggers like this: