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.

How to Add Additional Custom Fields in WooCommerce Checkout Page

Updated on March 18, 2022

6 Min Read
woocommerce custom fields for checkout page

There will be times when you really need to add WooCommerce custom checkout fields on a checkout page according to your requirements, and this can be a really hefty job. So, we made up a tutorial to get you going. This tutorial helps you perceive how to add a custom field to a WooCommerce checkout page.

There are many alternatives to edit WooCommerce checkout pages: third-party plugins, WooCommerce extensions, and custom development. I’ll tell you why the WooCommerce checkout page is important and how you can customize it via a plugin and coding.

From launching to customizing your WooCommerce stores, Cloudways is at your service.

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.

Why Is WooCommerce Checkout Field Important?

A WooCommerce custom checkout field is important in assembling to get further data from the purchasers before they complete an order. I have also explained how you dynamically customize additional fields, such as removing the billing address, add/edit custom checkout fields, and saving these custom fields to the database in WooCommerce Custom Checkout Fields: Edit, Delete Fields, and Email.

Customize WooCommerce Checkout Fields via Plugin

First, download the WooCommerce Checkout Manager plugin, and install and activate it. Then, go to Admin Panel →WooCheckout. The result can show a listing of all the fields from the billing to the cart. Scroll through the page all the way down to the bottom. Now find “Add New Field Section,” as shown below.

WooCommerce Checkout Add Fields

Fill out the values and hit the “Save Changes” button in the top right corner. Now, if you go to the Checkout page, you will see the new field:

WooCommerce Check Out Field

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:

 * 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 :

WooCommerce Check Out Page

For data validation of the custom field, use the code given below:

 * 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:

 * 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 WooCommerce Custom Checkout Fields Editor plugin.

Customize Shipping Form on WooCommerce 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 that deal with major groups of 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). Now since this tutorial deals with the checkout fields, I will mainly work with the woocommerce_checkout_fields filter.

The good news is this: It is exceptionally easy to edit WooCommerce checkout pages to ensure that the page fulfills its purpose. In this short tutorial, I will cover both the addition and removal fields.

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 ) {

    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


WooCommerce checkout is a very functional page that asks for essential information and then helps the visitor go through the sale. Since this page is designed to be fast and hassle-free, the fields on the page are very basic.

In many cases, WooCommerce store owners often use the checkout page as an alternate customer data collection location. Combined with the landing pages and other data collection tactics, this allows store owners access to very high-quality customer data.

As you can see, customizing the WooCommerce checkout page is a great way of streamlining the user experience for the visitors. Adding or removing fields from the checkout page is an easy matter of adding code snippets. If you need help with the process, please leave a comment.

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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great performance for the price, and plenty of control”

Sean P [SMB Owner]

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!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Cyber Week

Time Left In Offer
  • 0


  • 0


  • 0


  • 0


40% OFF

On All Plans