This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

✨ Vultr and Linode are back on Cloudways! VIEW PLANS→

How to Customize WooCommerce Checkout Page and Add Additional Fields

Updated on October 18, 2023

6 Min Read
woocommerce custom fields for checkout page

So, you’re using WooCommerce, but you’ve probably noticed that the default checkout page isn’t always the best at boosting your sales. The good news is you can replace it with a custom one, which can make a world of difference in your conversion rates.

But, hey, we get it – adding custom fields to a WooCommerce checkout page might sound daunting.

That’s why I’ve put together a handy tutorial to walk you through the process. I’ll show you how to add those custom fields to your WooCommerce checkout page step by step.

Now, when it comes to tweaking your WooCommerce checkout pages, you’ve got some choices. You can use third-party WooCommerce extensions or even roll up your sleeves and do some custom coding.

In this article, I’ll explain why it is important to customize WooCommerce checkout page and how to add custom fields to your WooCommerce checkout page using either plugins or your own coding skills.

Why Is WooCommerce Checkout Field Important?

Did you know that the average cart abandonment rate is 69.99%, according to Baymard Institute?

It’s a harsh reality in the world of online shopping.

That’s why you should pull out all the stops to nudge your visitors toward completing a transaction. But here’s the hitch – the default WooCommerce checkout isn’t exactly optimized for high conversions.

The regular WooCommerce checkout page looks like this:

regular WooCommerce checkout page

Very basic, right?

Fear not!

To improve your conversion rates, you can swap the default one for a custom WooCommerce checkout page.

For instance, you can add trust-building elements like customer reviews and 5-star ratings. Even if they’re new to your business, this can make potential buyers feel more confident. You can also show off related products that your visitors can buy together.

Here’s an example of a customized WooCommerce checkout page:

example of a customized WooCommerce checkout page

The customization possibilities are endless.

Now that you’re excited about customizing your checkout page let me tell you that in this guide, I’ve explained how you can dynamically customize additional fields to remove billing addresses, add or edit custom checkout fields, and save these custom fields to the database.

Unlock Peak Performance with Cloudways Managed WooCommerce Hosting

Leverage SSD storage, advanced caching, optimized stack, and PHP 8-ready servers for lightning-fast performance and more with Cloudways Managed WooCommerce Hosting.

Customize WooCommerce Checkout Fields via Plugin

  • First, download the WooCommerce Checkout Manager plugin and Install and Activate it.
  • Then, go to the WordPress Admin Dashboard → WooCommerce → Checkout tab.

wordpress admin dashboard woocommerce tab

  • Now go through all the different sub-tabs like Billing, Shipping, Additional, or others in which you wish to add a custom field.
  • Click on the Add New Field Section, as shown below.

Add New Field Section

  • Once done, hit the Save Changes button.

Customize WooCommerce Checkout Fields via Coding

This method adds the custom field to the checkout page using the code given. To start with coding, we should do the subsequent steps declared below.

  • First, we need to act as our functions.php file, and then we will use this code to start customizing the checkout page:
<?php/** * Add the field to the checkout page */add_action('woocommerce_after_order_notes', 'customise_checkout_field');function customise_checkout_field($checkout){echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';woocommerce_form_field('customised_field_name', array('type' => 'text','class' => array('my-field-class form-row-wide') ,'label' => __('Customise Additional Field') ,'placeholder' => __('Guidence') ,'required' => true,) , $checkout->get_value('customised_field_name'));echo '</div>';}
  • After adding this code, the checkout page should appear as follows:

after adding the code for the custom field for checkout page

  • For data validation of the custom field, use the code given below:
<?php/** * Checkout Process */add_action('woocommerce_checkout_process', 'customise_checkout_field_process');function customise_checkout_field_process(){// if the field is set, if not then show an error message.if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value.') , 'error');}
  • Now that we’ve added a replacement field to the checkout page along with the validation check, we would like to confirm whether the details entered into the custom field by the client are being saved or not.
  • This can be done by using the code below:
<?php/** * Update value of field */add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');function customise_checkout_field_update_order_meta($order_id){if (!empty($_POST['customised_field_name'])) {update_post_meta($order_id, 'Some Field', sanitize_text_field($_POST['customised_field_name']));}}

With this, we have added custom fields to our WooCommerce web store. You could also edit WooCommerce checkout fields using the Custom WooCommerce Checkout Fields Editor plugin.

Customize the Shipping Form on the Checkout Page

Since the checkout page often doubles as a data collection resource, many store owners often want to customize the checkout page and add custom fields to their WooCommerce checkout page. This usually involves adding and/or removing fields from the page.

To customize the WooCommerce checkout fields, WooCommerce offers several filters dealing with major fields on the page.

In particular, these filters include woocommerce_checkout_fields (for checkout fields), woocommerce_billing_fields (for billing-related fields), and woocommerce_shipping_fields (for shipping-related fields).

Since this article deals with the checkout fields, I will mainly work with the woocommerce_checkout_fields filter.

Remove Fields From the WooCommerce Checkout Page

Let’s start with the following screenshot of the checkout page;

WooCommerce Checkout Page Address

For the purpose of his example, I will demonstrate how to remove the First name and the Last name fields.

Here’s the code snippet:

add_filter( 'woocommerce_checkout_fields' , 'custom_fields_woocommerce' );
 
function custom_fields_woocommerce( $fields ) {
    unset($fields['shipping']['shipping_first_name']);
    unset($fields['shipping']['shipping_last_name']);

    return $fields;
}

In the above code snippet, you can see the function custom_fields_woocommerce. this function takes the argument $fields that take the checkout fields that need to be removed or “unset.” In the snippet, I have unset the first and last names.

Here is how the checkout will look after this snippet:

Custom Fields WooCommerce Checkout Page

Add Fields to the WooCommerce Checkout Page

Similar to removing fields, adding fields to the WooCommerce checkout page is simple. For this, add the following code snippet:

add_filter( 'woocommerce_checkout_fields' , 'woocommerce_checkout_field_editor' );

// Our hooked in function - $fields is passed via the filter!
function woocommerce_checkout_field_editor( $fields ) {
    $fields['shipping']['shipping_field_value'] = array(
        'label'     => __('Field Value', 'woocommerce'),
        'placeholder'   => _x('Field Value', 'placeholder', 'woocommerce'),
        'required'  => true
    );

    return $fields;
}

The above code snippet contains both labels and placeholders for the new fields. Now, there are requirements to set some mandatory fields. This is taken care of by the required argument that is set to TRUE. this will cause a red asterisk to appear at the end of the field’s name.

WooCommerce Checkout Page Field Value

If the required argument is set to FALSE, the field will be set to OPTIONAL:

Edit WooCommerce Checkout Page Field

Display Field Value on the WooCommerce Order Page

The following code snippet displays the field’s value on the order page. For this, use the following code snippet:

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'edit_woocommerce_checkout_page', 10, 1 );

function edit_woocommerce_checkout_page($order){
    global $post_id;
    $order = new WC_Order( $post_id );
    echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}

This code snippet will display the field on the WooCommerce order page.

Display WooCommerce Checkout Field Value

Summary

In conclusion, when you customize WooCommerce checkout page and add/remove custom fields, you can make the entire purchasing process smooth and efficient for your customers, ensuring you don’t miss out on any sales.

As discussed in this blog, you can show your customers product reviews, related products, five-star ratings, and much more to gently push them toward purchasing.

Many WooCommerce store owners also find the checkout page to be an excellent spot for gathering valuable customer data and utilizing landing pages and other data collection strategies. This approach provides access to high-quality customer information.

Q. How do I enable shipping addresses in WooCommerce?

A. Go to WooCommerce → Settings → Shipping → Add Shipping Zone. You can add multiple shipping methods within this zone. Only customers within the zone will see them.

Q. How do I turn off shipping in WooCommerce?

A. Go to WooCommerce → settings → shipping → Select your shipping zone. Next, click on it. Under the shipping zone, you can see the enable/disable option available.

Q. What is the plugin to customize WooCommerce checkout page?

A. WooCommerce Checkout Manager stands out as the ultimate checkout form customizer and editor designed specifically for WooCommerce. With this plugin, you have the power to effortlessly remove, modify, or rearrange WooCommerce checkout fields, and even go further by adding over 20 custom fields within the billing or shipping checkout forms.

Q. Where can I find the WooCommerce checkout template?

A. You can locate the WooCommerce checkout page template at the following directory: \wp-content\plugins\woocommerce\templates\checkout. This template is where you can access and customize the checkout page for your WooCommerce store.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now