• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

How to add custom fields to the WooCommerce checkout?

Updated: January 13, 2023 / Plugin Tutorials

I don’t have to convince you that the checkout page is one of the most important parts of every WooCommerce store. The possibility to fully adjust it is a must for most store owners. Let’s found out what are the additional possibilities, and how to add custom fields to the WooCommerce checkout page.

There are various ways in which you can use additional custom fields in your WooCommerce checkout. You can add a VAT number field for B2B, collect some marketing information with a simple select query, or even add a GDPR consent checkbox. Of course, these are just basic examples.

There are hundreds of different store types with various page requirements, but most of them can be fulfilled with one WooCommerce plugin to customize all checkout fields. Let's begin!

Table of contents

  1. Flexible Checkout Fields
  2. Download the free plugin
  3. Use additional fields in the WooCommerce checkout

Flexible Checkout Fields

When it comes to adding custom fields to the WooCommerce checkout page, there is no better solution than the Flexible Checkout Fields plugin. It’s a very popular (1,478,246 downloads) and well-rated (4.6 average rating) plugin with lots of great features.

See this video to check its features available in the free version of the plugin:

Download Flexible Checkout Fields

Start customizing your checkout page with the free plugin!

Flexible Checkout Fields WooCommerce

Add field to WooCommerce checkout! It's easy, it's fast, it's free! Download this WooCommerce checkout editor and customize checkout.

Download for free or Go to WordPress.org
WP Desk
80,000+ Active Installations
Last Updated: 2022-11-24
Works with WooCommerce 6.7 - 7.1.x
Here is a link to one of our Youtube playlists, which contains all video tutorials concerning the Flexible Checkout Fields plugin.

The free version lets you add these additional fields to the WooCommerce checkout form:

  • Single Line Text
  • Paragraph Text
  • Textarea
  • E-mail
  • Number
  • Phone
  • URL
  • Checkbox
  • Color Picker
  • Headline
  • Image
  • HTML or plain text

With the PRO version you can create:

all the above and additionally:

  • Radio button
  • Select (Drop Down)
  • Multi-Checkbox
  • Date
  • Time
  • Multi-Select
  • Radio with images
  • Radio with colors
  • File Upload
  • Hidden

Using Flexible Checkout Fields you can also edit, rearrange or even disable default checkout fields in WooCommerce!

How to add custom fields in WooCommerce checkout?

You already know why you should add custom fields, and what tool is recommended to do that. Now it’s finally time to guide you through actually adding these fields in your store.

Of course, first, you have to install and activate the plugin.

When it’s done, go to WooCommerce → Checkout Fields.

woocommerce checkout fields
Add field to WooCommerce Checkout - Step 1

👉🏼You can customize default billing, shipping, and order fields in the Billing, Shipping, or Order tabs. The Custom Sections tab has more options so you can add any custom field after or before:

  • Customer Details
  • Billing Form
  • Shipping Form
  • Registration Form
  • Order Notes
  • Submit Button.

To add a custom field to the WooCommerce checkout, select the field type in the Add New Field section, enter a label name and click on Add Field.

Add a custom field to the WooCommerce checkout page
WooCommerce checkout fields - Add a new field. Step 2.

🎉And it’s done! But, it’s just a start. Now you can adjust your brand new field to your needs!

Let’s see what are the options.

General settings

General settings in custom checkout field configuration
WooCommerce custom checkout fields general settings

👉🏼Here you can enable or disable a field (even the WooCommerce default ones), or set it as required. In this section, you can also change the label of the custom field you add to the WooCommerce checkout or set up validation. A validation check is a great way to make sure that your customers enter their data in the right format.

👉🏼In Flexible Checkout Fields, you can set a phone, email or postcode validation. Check out our article about checkout field validation to get more information.

Appearance settings

Appearance settings in Flexible Checkout Fields plugin
Change WooCommerce checkout fields settings - Appearance

👉🏼In the Appearance tab, you can set Placeholder and CSS Class. With it, you can use the magic of CSS and style it the way you want. Check out our article on how to set your CSS class after you add a custom field to the WooCommerce checkout.

Display On

woocommerce add custom field to checkout
Custom checkout fields settings - Dispay On tab

In this section, you can configure where the field should be displayed. There are four options: Thank You Page, My Account - address, My Account - order, and Emails.

Conditional Logic

woocommerce checkout fields conditional logic
WooCommerce additional fields - Conditional Logic tab

👉🏼In this tab, you can configure the conditional logic of the fields. There are three really useful options. You can enable fields, product/category, or shipping methods conditional logic. That means that one field will be displayed only when another is present or active. The most common use of that is showing the text field after the user checks a checkbox.

Pricing

WooCommerce Additional fields - Pricing settings
WooCommerce custom checkout fields - Pricing tab

The fields added using our plugin also have a Pricing tab with available options for assigning a price. The impact on the total purchase amount depends on the set price type and its value. Check out our article about field pricing to get more information.

WooCommerce checkout fields with prices using Flexible Checkout Fields

💡 If you wish to add conditional logic and pricing options to your custom checkout fields, you can do it with the Flexible Checkout Fields PRO plugin.

Flexible Checkout Fields PRO WooCommerce £59

Add field to WooCommerce checkout! It's easy, it's fast, it's free! Download this WooCommerce checkout editor and customize checkout.

Add to cart or View Details
WP Desk
80,000+ Active Installations
Last Updated: 2022-11-22
Works with WooCommerce 6.7 - 7.1.x

Summary

In this article, you have learned how to add custom fields to the WooCommerce checkout page. I hope that it’ll help you to adjust your store to customers' demands. They can get a better customer experience, and you’ll sell more. Good luck!

More about WooCommerce custom fields

  • Add date picker custom field in checkout

    date picker woocommerce checkout
    Add date picker field. Find out how add date picker field to WooCommerce checkout with Flexible Checkout Fields

  • Add the EU VAT number in checkout

    add vat eu to woocommerce checkout
    How to add EU VAT field to checkout. The easiest way to add the EU VAT number field with a plugin.

  • Add the EU VAT number in checkout

    add radio buttons woocommerce checkout
    Add radio buttons. The easiest way to add WooCommerce radio buttons custom fields.

  • Shipping and billing in checkout

    shipping and billing address woocommerce
    Shipping and billing in WooCommerce checkout. Everything you need to know about adding shipping and billing fields to checkout.

 

Tweet

4 minutes read85243 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Plugin Tutorials › How to add custom fields to the WooCommerce checkout?

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk