How to Add Extra Field to WooCommerce Checkout Page

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.

Imagine that this is your default checkout page.

WooCommerce checkout page

There is two completely different approach that will help you in adding custom fields to checkout page such as using –

    • custom coding (for coders)
  • plugin (for non-coders)

Through Coding

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') ,

) ,


echo '</div>';


After adding this code, the checkout page should appear as :

extra field on WooCommerce checkout page

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



Tutorial for non-coders (using plugin)

With the above lines of codes, we have added custom fields to our WooCommerce web store!

If you are a non-coder, you also can use a plugin to add a new field to the checkout page. There are many plugins that can be used for this purpose. Some are as follows-

By using these plugins anyone with zero coding knowledge can add extra custom fields to the WooCommerce checkout page. Let's see how to add a field with WooCommerce Checkout Manager.

Simply install and activate the plugin. You will find a new menu ‘WooCheckout'. Navigate to WooCheckout → Additional.

Now, click on the Add New Field button.

Add your field name, position, placeholder, type and finally save changes.

You will find the new field added to your checkout page. Easy, right?

From now on, you know how to add an extra field and it's not too hard at all.

Now, whatever the reason is like- a mandatory client request or your own needs, you are ready to customize checkout page!

If you have any questions, don't hesitate to comment. We promise we will get back to you.

Happy WordPressing 🙂


  • Philippe


    Hello Sir,

    Please, How to Add Extra Field to WooCommerce Checkout Page to apply to certain products only ?

    • Nayem


      Hello Philippe,

      This post will help you to add a field on the checkout but if you need to add depending on a product then you may need to customize in more places but we are unable to provide any instruction on that custom development process!


  • deon


    Adding the WooCommerce Checkout Manager plugin does not display the information on the order page.

  • jigar


    if you want custom field value in order then you can write code like
    * Display field value on the order edit page
    add_action( ‘woocommerce_admin_order_data_after_billing_address’, ‘my_custom_checkout_field_display_admin_order_meta’, 10, 1 );

    function my_custom_checkout_field_display_admin_order_meta($order){
    echo ‘‘.__(‘customised_field_name’).’: ‘ . get_post_meta( $order->get_id(), ‘customised_field_name’, true ) . ”;

    • Kshitiz Mishra

      Kshitiz Mishra

      Hi jigar I have used your code and it works great. I can now perfectly view the input value on admin order details. Plz tell me now how do I display the same data on customer order details page (my account) on front end? Plz help me I realy need help

  • Jerome Short

    Jerome Short

    This worked GREAT! I’ve got a new field in my Checkout page. Now I’m wondering how to view the information that people put in the field.


  • Pingback: Hook Reference trong Woocommerce - TinVn.TOP

  • Pingback: Custom field kartra checkout | Techolaty

  • Kristian


    The first information that’s available will provide you with a concept concerning how
    generally that you’ll be able to expect to
    be worked a hand that’s within a particular array
    of prices.

  • Anup


    Hello, I want to add the different options on my checkout section.
    Like when my visitors like my product/service and when they click on buy now button which is on my page.
    then in the new window, I want the custom fields there. the information that I want.
    Fields like website address, which package they like, The quantity and then they can be redirected to the payment option. How to do this.?

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.