How to Add Additional Custom Fields in WooCommerce 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.

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.

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:

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 :

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

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:

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.

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

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.

Summary

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.

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 Connected on: Twitter Community Forum