Add Custom Field to Checkout Woocomerce

If you are doing online business, you already know about the significance of a checkout page. Sometimes you might need to do customization on your eCommerce website due to specific requirements. In this tutorial, we will show you how to customize WooCommerce checkout page and add extra fields to it.

Before jumping to the tutorial, let's find out what a checkout page is.

What is checkout page?

A checkout page is an eCommerce term that refers to a page shown to a customer during the step-by-step checkout process. Generally, it is the most important page for both seller and customer. Customers have to provide important pieces of information like addresses, billing details, payment method on this page. And if somehow this page produces an error, no customer will be able to make any purchase! So we can imagine how important this page is to the sellers.

When you are using WordPress for powering your website and WooCommerce as your eCommerce solution, you also get your own checkout page. However, being a free solution, WooCommerce does not give you the opportunity of customizing your checkout page from settings. So, how are you going to do that?

Add extra field to Woo Checkout page

Sometimes you barely need to add  WooCommerce custom fields on a checkout page according to our requirements and this can be a real hefty job. This tutorial will guide you through on how to do this. After reading this blog you will be ready to add a custom field to the checkout page. Let's get going to the point.

For the people who know how to code or who has basic coding knowledge can follow this approach. This method adds the custom field to the checkout page using the code given below. To start out with coding, we are ought to do the subsequent steps given below.

First, we need to perform an action to our functions.php file. Copy this entire code to your theme's function.php file.

/**

* Add custom field to the checkout page

*/

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

function custom_checkout_field($checkout)

{

echo '<div id="custom_checkout_field"><h2>' . __('New Heading') . '</h2>';

woocommerce_form_field('custom_field_name', array(

'type' => 'text',

'class' => array(

'my-field-class form-row-wide'

) ,

'label' => __('Custom Additional Field') ,

'placeholder' => __('New Custom Field') ,

) ,

$checkout->get_value('custom_field_name'));

echo '</div>';

}

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

/**

* Checkout Process

*/

add_action('woocommerce_checkout_process', 'customised_checkout_field_process');

function customised_checkout_field_process()

{

// Show an error message if the field is not set.

if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value!') , 'error');

}

So we’ve added a replacement field to the checkout page along with the validation check! Great!

Let's confirm that the details entered into the custom field by the client, is being saved or not.

This can be done by using the code below:

/**

* Update the value given in custom field

*/

add_action('woocommerce_checkout_update_order_meta','custom_checkout_field_update_order_meta');

function custom_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']));

}

}