How to Customize WooCommerce Checkout Fields Without Plugin

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;
 }

 

Leave a comment

Your email address will not be published. Required fields are marked *