How to Add Custom Field to WooCommerce Checkout Page?

This tutorial will help you understand easily how to add custom field to a checkout page. However, if you are not knowledgeable of actions and functions, this article may not be for you.

A custom field is necessary in collecting any additional information from the purchasers before they can complete an order.

To add custom field to the checkout page,we will follow different approaches such as:

  • WooCommerce “Checkout Field Editor” extension (single site license $45)
  • WooCommerce Checkout Manager
  • Code

Here’s what these approaches look like:

1- “Checkout Field Editor” extension:

2- WooCommerce Checkout Manager :

And then, make sure to download this plugin and install. Here’s how:

Go to Admin Panel > Settings >WooCommerce Checkout Manager

The result will show a list of all the fields from billing page to cart page. Scroll through the page and down to the bottom.

You should then find this section = Add New Field Section =

Fill out the values and hit “Save Changes” button on the right upper corner.

Now if you go to the Checkout page, you will see the new field in the form of;

This part is where we would like to add the custom field to the checkout page. To start with coding, we will need to do the following steps stated below.

3- Code:

First and foremost, we need to add a function and action to our functions.php file. And then we can use this code to begin customizing the checkout page:


* Add the field to the checkout page


add_action( 'woocommerce_after_order_notes', 'some_custom_checkout_field' );

functionsome_custom_checkout_field( $checkout ) {

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

woocommerce_form_field( 'some_field_name', array(

'type'         => 'text',

'class'         => array('my-field-class form-row-wide'),

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

'placeholder'   => __('Some hint'),

'required'     => true,

), $checkout->get_value( 'some_field_name' ));

echo '</div>';


So after adding this text to the custom field, the checkout page should look like this:


* Process the checkout


add_action(‘woocommerce_checkout_process’, ‘some_custom_checkout_field_process’);

functionsome_custom_checkout_field_process() {

// if the field is set, if not then show an error message.

if ( ! $_POST[‘some_field_name’] )

wc_add_notice( __( ‘Please enter value.’ ), ‘error’ );


Now we have added a new field to the checkout page, and we would like to ensure that all additional information, including the check-out detail, entered into the custom field by the customer is saved.

We can do this by adding the following code:


* Update the order meta with field value


add_action( ‘woocommerce_checkout_update_order_meta’, ‘some_custom_checkout_field_update_order_meta’ );

functionsome_custom_checkout_field_update_order_meta( $order_id ) {

if ( ! empty( $_POST[‘some_field_name’] ) ) {

update_post_meta( $order_id, ‘Some Field’, sanitize_text_field( $_POST[‘some_field_name’] ) );



With this code, the customer’s additional information will be now saved.

We are hoping that this tutorial answers your questions regarding the customization of your WooCommerce checkout page. And if there is anything we can help you with, do not hesitate to leave your comments below.

Editorial Staff

ThemeLocation Provides Wordpress & Woocommerce development & Customization services. Have a Project? Contact To discuss

2 thoughts on “How to Add Custom Field to WooCommerce Checkout Page?

  1. Excellent tutorial. Thank you for the information and even providing the code. My question is how can I show the custom field in the WP User manager? After a customer has been added to the database and/or made a purchase I can see their billing and shipping info in the user manager section. But I need to display the new custom field in this area.

    Basically I am adding a custom field to the check out. I need to be able to edit the field data to the existing users. How can I do this?

    Any help is greatly appreciated!

    Thank you!

Leave a Reply

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