• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Essential Premium WooCommerce Plugins - WP Desk

  • Premium Plugins
  • Support
  • Blog
  • My Account
  • 0
Bartosz Gajewski

How to add custom fields in WooCommerce checkout?

Updated: November 24, 2020 / Checkout, Guides

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

There are various ways in which you can use checkout custom fields in your WooCommerce store. You can add a VAT number field for B2B, collect some marketing information with a simple select query or even add GDPR consent. Of course, these are just basic examples. There are hundreds of different store types with various checkout page requirements, but most of them can be fulfilled with one WooCommerce plugin.

Flexible Checkout Fields

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

Flexible Checkout Fields WooCommerce

Edit, add new or hide unnecessary fields from the checkout form. It's all about conversions and better user experience.

Download for free or Go to WordPress.org
WP Desk
50,000+ Active Installations
Last Updated: 2021-03-03
Works with WooCommerce 4.7.0 - 5.0.x

The free version lets you create:

  • Single Line Text
  • Paragraph Text

With the PRO version you can create:

  • Checkbox
  • Radio button
  • Select (Drop Down)
  • Date
  • Time
  • Color Picker
  • Headline
  • HTML or plain text
  • File Upload

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

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.

Flexible checkout Fields configuration screen

You can customize default billing, shipping and order fields in Billing, Shipping or Order tabs. 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 custom fields to WooCommerce checkout, select the field type in Add New Field section, enter a label name and click on Add Field.

Add new field in Flexible Chekout Fields

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

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 field, or set up validation. 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 fields validation to get more information.

Appearance settings

Appearance settings in Flexible Checkout Fields plugin

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 own CSS class to a custom field.

Display On

Display on setting in Flexible Checkout Fields Plugin

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.

Advanced settings

Field's advanced settings
Field's advanced settings

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.

Summary

In this article, you have learned how to add custom fields in 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!

Tweet

3 minutes read18949 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 →
WP Desk › Checkout › How to add custom fields in 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
  • FAQ
  • Docs
  • Get Support

Legal

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

© 2021 WP Desk