How to Add a Custom Field to WooCommerce Checkout Page

Editorial Team
February 1, 2024
How to Add a Custom Field to WooCommerce Checkout Page

Are you looking to add a custom field to the WooCommerce checkout page? 

While the default WooCommerce checkout page is functional, it needs more flexibility to collect the extra data your business may require. 

It does have an 'Order Notes' field to collect additional data, but it's not specific, and customers aren't required to fill it out. 

If you require specific data from your customers that they must fill out, the default setup isn't sufficient enough. 

Not being able to collect specific or additional information from your shoppers may hinder your goal of providing a personalized shopping experience to them. This way, you'll miss out on the option to provide an optimized shopping experience to your users.

Luckily, you can solve such issues by adding custom fields to your WooCommerce checkout form.

In this blog, we'll show you a step-by-step guide on how to add custom checkout fields to your WooCommerce checkout page. We will share two processes:

What Are WooCommerce Checkout Fields?

WooCommerce checkout fields are the form fields that customers fill out during the checkout process when making a purchase on a WooCommerce-powered e-commerce website. 

These fields are essential for collecting the necessary information from customers to complete their orders and provide a smooth shopping experience.

Let’s take a good look at the default woocommerce checkout and form fields it offers.

Deault WooCommerce checkout page  how to add fields to woocommerce checkout

Default WooCommerce checkout fields include:

  • Coupon code: If the “Enable the use of coupon codes” option is enabled from the WooCommerce settings, then the checkout will offer a coupon code field where users can apply the coupon code to get discounts. 
  • Billing Information: This includes the customer's name (first name and last name), company name (optional), address (country, town, state, zip code, etc.), email, and phone number. It's used for billing purposes and shipping addresses if people don’t choose to give a different shipping address. 
  • Shipping Information: If the shipping address differs from the billing address, customers need to provide this information, including name, address, company name (optional), and contact address.
  • Order Notes: A field where customers can leave comments related to their order.
  • Payment Information: Customers enter their payment details, such as credit card information, cash on delivery, or alternative payment methods.

As you can see, these are extremely basic fields. You may need extra fields on your checkout page for various reasons, like collecting special instructions or additional details about the order.

Why Add Extra Fields to Your WooCommerce Checkout Page?

Adding extra fields to your WooCommerce checkout page can provide several benefits and enhance the overall shopping experience for both the store owner and your customers. 

Here are some compelling reasons why you should consider adding custom fields:

  • Collecting specific customer information: Custom checkout fields allow you to gather unique data essential for your business, such as product preferences or customization details.
  • Product customization: Custom fields are invaluable for businesses offering customizable products, allowing customers to specify their preferences accurately.
  • Special instructions: Customers may have special delivery requests or important instructions for their orders. For example, they may want the product to be gift-wrapped. You can collect such information with a custom field.
  • Membership or subscription Data: For businesses offering membership or subscription services, custom fields can collect data necessary for onboarding, billing, or other membership-specific information.
  • Enhanced product recommendations: By collecting data on customer preferences, you can provide more accurate product recommendations, increasing the likelihood of upselling and cross-selling revenue.

Method 1: How to Add an Extra Field to the WooCommerce Checkout Page? [With Code]

Here, we will share how to add a custom field in the checkout page WooCommerce programmatically. 

We will also validate the form field and update the data so store owners can view the information from the backend. 

Note: You need to add custom code to your theme's function.php file.

Step 1: Navigate to the function.php file

First, navigate to Appearance ⇒ Theme File Editor and select the file functions.php. 

navigate to function.php

You’ll need to add your custom code here. 

Step 2: Insert the code to add a custom field 

To add a custom field, you need to add the code provided below to the functions.php file. You can change the label, placeholder, and other details as per your needs. 

If you want to make the field required, make sure to add the line ‘required' => 'true' otherwise, skip it.

/**

* Add a 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"><h3>' . __('Please Provide The Custom Data') . '</h3>';

woocommerce_form_field('custom_field_name', array(

'type' => 'text',
	'required' => 'true',

'class' => array(

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

) ,

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

'placeholder' => __('Enter Custom Data') ,

) 			   ,

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

echo '</div>';

}

Add the above code at the end of the file and click on the ‘Update File’ button. 

add code to function php file add a field to checkout woocommerce

Here, we have added one custom field that is required. 

added a new custom field WooCommerce

Step 3: Add validation message 

Making your custom WooCommerce checkout field required isn’t enough. To make the checkout process user-friendly, you need to show a message to users telling them the field is required. 

To show an error message, add the following code to your function.php file. 

/**

* Validate Checkout field

*/

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['custom_field_name']) wc_add_notice(__('Custom Field is a Required Field!') , 'error');

}

Here is how the error message will be displayed:

custom checkout field validaion with code WooCOmmerce

Step 4: Save the custom data

Now it’s time to make sure the details entered into the custom field by the client are being saved.

You can do this by adding this 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['custom_field_name'])) {

update_post_meta($order_id, 'Custom Field',sanitize_text_field($_POST['custom_field_name']));

}

}

Now place a test order with some random value for the custom checkout field. 

add custom data and place order add a field to checkout woocommerce

After placing the order successfully, check its details by navigating to WooCommerce ⇒ Orders. You will find the custom field with the entered value here. 

custom field on order page

This is how you can add a custom checkout field to the WooCommerce checkout page with coding. 

Note: FunnelKit allows you to create a VAT number field on the checkout page. Learn more on our blog on how to add an EU VAT Number Field to WooCommerce Checkout

Why Adding a Custom Field to Your WooCommerce Checkout with Coding isn’t a Good Idea? 

While adding a custom field using code isn’t the worst idea, it’s not the best option either. 

Here are some of the reasons why you shouldn’t use raw coding to add a custom field to the checkout page:

  • PHP expertise required: Adding custom fields through raw coding demands a professional level of PHP knowledge.
  • Ongoing code monitoring: Even for those skilled in coding, constant code monitoring is necessary to ensure compatibility with the latest WooCommerce versions, themes, and plugins.
  • Code conflict risk: Incorporating code directly into theme files can lead to conflicts. Updates to your theme or WooCommerce may render custom code incompatible, potentially causing functionality issues.
  • Only partial solution with child themes: While creating a child theme can help with some customization issues, it doesn't resolve all potential problems when adding custom code to your WooCommerce checkout.

That’s why we suggest you use a renowned WooCommerce plugin to add a custom field to your WooCommerce checkout page. 

In the next section, we will show you how to add a custom field in the WooCommerce checkout page without a plugin.

Method 2: How to Add a Custom Field to a WooCommerce Checkout Page using FunnelKit Funnel Builder? [Without Coding]

To add an extra custom checkout field to the WooCommerce checkout page, we will use FunnelKit Funnel Builder. This is a highly popular plugin that powers over 20,000 WooCommerce websites around the globe.  

We chose this plugin because it allows you to add a custom field to your WooCommerce checkout form by simply dragging and dropping the fields without any coding. Along with adding, you can also control the order of your checkout form fields. 

FunnelKit Funnel Builder is not just a WooCommerce checkout field editor; it helps you to create a multi-step checkout page and optimize your checkout page for a frictionless checkout process. 

To follow along with the process, you need to install and activate both:

After activating the plugins, follow these steps: 

Step 1: Create a store checkout 

Firstly, we need to create a store checkout that will replace the default WooCommerce checkout page. For that, navigate to FunnelKit ⇒ Store Checkout and click on the ‘Create Store Checkout’ button.

click on create store checkout

FunnelKit offers many pre-built templates for sales funnels and checkout pages. Choose your favorite page builder. After that, hover over the template you want for your Global checkout and click on Preview. We are going with Shoppe here.

Now, choose whether you want a  single-page checkout or a multi-page checkout. After that, click on “Import This Funnel,” provide a name, and click on Add to import this funnel as your default store checkout.

We are choosing a two-step checkout here.

Import Shoppee two step checkout

This will import a store checkout with two steps: Checkout, Upsell, and Thank you page. 

Step 2: Create a custom checkout field

Now, to edit the WooCommerce checkout page and add a field, click on the “Checkout” step. 

click on edit checkout page

On the design tab, you can customize the design and content of the checkout page. 

Edit shoppe with Elementor

After customizing, scroll down to the "Checkout Form Fields" to create an extra field. You will find the default form fields are already added to the checkout form. 

To add a custom field, click on “Add New Field” under the Advanced section.

Note: Along with the default fields, FunnelKit also allows you to add a Date of Birth field to your checkout field so you can use their birthdate to send automated birthday emails to customers. 

click on Add new field to WooCOmmerce checkout

Here, you can create an extra custom checkout field. You can create different types of WooCommerce custom fields such as Checkbox, Radio, HTML, Dropdown, Multi-select, and many more. 

WooCommerce checkout custom field types by FunnelKit Funnel Builder

Here, we will share how you can create a custom Radio field “Do You Want To Gift Wrap Your Item(S) For Free?” for your checkout page. 

For that, select the Radio as Field Type and provide the following options: 

  • Label: Provide a level for the custom field.
  • Field ID (Order Meta Key): You need to add a field ID; in case you use multiple words, you can append them using “_”.
  • Options (|) separated: Add the options separated by “|”. We are adding two options: yes and no.
  • Default: Provide the default value for this custom field. However, this is optional. 
  • Show On Thank You Page: Check this option if you want the value passed by this field to be shown on the thank you page.
  • Show In Order Email: If you want to include this field in your order emails, check this option.
  • Required: To make the field required check this option and to make it optional leave it unchecked.

Finally, click on “Add Field” to create the field.

provide into to create custom WooCOmmerce checkout field

Now, in the Advanced section, you should see an extra checkout field that you just added.

preview custom field is added by FunnelKit Funnel Builder

Step 3: Add a custom field to the WooCommerce checkout form

To add the custom field you just added to the checkout form, drag and drop the field there and place it in any section on the checkout form. 

We are going to add it to the “Shipping Address” section here. 

drag and drop custom field to WooCOmmerce checkout

If you want, you can change the order of the extra checkout field as well, just by dragging and dropping. Just hold the field and simply drag and drop in the order you want. 

reorder custom checkout field

After adding the custom field to your WooCommerce checkout page, click on Save Changes. 

Note: You can add any WooCommerce custom fields following the above-mentioned process. 

Step 4: Optimize your checkout form fields for frictionless checkout

FunnelKit Funnel Builder provides many optimization options so your customers can enjoy a frictionless checkout experience. 

To ensure a seamless checkout experience, it's crucial to incorporate inline validation for your checkout fields. This allows users to view error messages as they fill out the form.

To allow inline validation, move to the Optimizations ⇒ Inline Field Validation and enable it. Make sure to click on Save Changes to update the settings. 

enable inline validation

Align with inline validation; you can also make the following optimizations: 

Note: You can add an order bump on the checkout page and also customize the upsell, and  the thank you page with FunnelKit’s Funnel Builder.

Step 5: Activate the store checkout 

After optimizing the checkout forms, you need to activate the store checkout. For that, enable the “Enable Store Checkout” option.

enable store checkout

Here is what the WooCommerce checkout page with a custom extra field looks like 

preview woocommerce custom checkout field

That’s how easily you can add an extra custom field to the WooCommerce checkout page using FunnelKit Funnel Builder. 

You can also read our blog on How to Add a File Upload Field to the WooCommerce Checkout Page?

Ready to Add Custom Field to WooCommerce Checkout Page?

By adding a custom WooCommerce checkout field, you can collect specific information and give your customers a more personalized and smooth buying journey. 

As shown above, you can add an additional field to the WooCommerce checkout page in two ways: programmatically with code or with drag-and-drop using the FunnelKit Funnel Builder plugin.

As per our expert opinion, FunnelKit Funnel Builder is the superior option as a checkout field editor for WooCommerce, offering a more efficient method for incorporating a custom field into your checkout page. 

You can easily include any type of checkout field without worrying about validation, as FunnelKit takes care of that in the background.

Furthermore, there's no need to be concerned about compatibility with WooCommerce. The dedicated plugin team consistently maintains and releases new versions, ensuring seamless compatibility with WooCommerce and essential plugins.

Moreover, with this tool, you can do more than just add an extra field. You can create beautiful checkout pages using pre-designed templates and optimize the checkout process for a seamless shopping experience.

What's more? You can even offer order bumps, and one-click upsells to increase the average order value in your WooCommerce store.

So, start collecting custom data with an extra WooCommerce checkout field and enhance customers' shopping experience with a personalized touch today!

Author: Editorial Team
The Editorial Team at FunnelKit (formerly WooFunnels) is a passionate group of writers and copy editors. We create well-researched posts on topics such as WordPress automation, sales funnels, online course creation, and more. We aim to deliver content that is interesting and actionable.

Increase your sales, starting today.

Grab Our Exclusive Bundle
chevron-down