Create Custom Fields in WooCommerce Checkout and Product Pages

Standard WooCommerce doesn't let you create custom fields without writing your code. However, there are situations when you need the custom product or checkout fields to handle a WooCommerce order effectively! Don't worry. 2 free plugins will help you add custom fields in your store.

You know it may be necessary to have specific information about the product or the order that WooCommerce doesn't give you!

Attain more details to an order by adding a custom field in WooCommerce. Let me show you two free plugins to do that easily!

Table of contents

• What are custom fields in WooCommerce?
• WooCommerce Product custom fields
• WooCommerce Checkout custom fields

What are custom fields in WooCommerce?

You can think about custom fields as additional pieces of information describing, for example, a product or an order. They will help you show products better and gain more details for processing WooCommerce orders effectively!

Some examples of custom fields

• checkboxes
• text fields
• radio buttons
• date pickers
• color pickers
• etc.

This is how they look like in the order form:

Another example, you can let your customers upload files to the orders or enter the VAT EU number for accounting purposes. It would also be great to change the type of the checkout field or hide some of them!

Let's add custom fields

You will probably want to create two types of custom fields in WooCommerce, e.g.:

• custom fields in the WooCommerce checkout page to get more details about an order,
• and new fields to customize the WooCommerce product page so that products have more options.

I'll show you both of them.

WooCommerce Product custom fields

First of all, you will need a plugin for that. Have a look:

👉🏽 Download it here:

First, take a look at the exemplary set of new custom fields on the product page you can add with the free Flexible Product Fields for WooCommerce plugin:

As you see, you can create a complete wizard. Customers can personalize their computers this way. Also, some of the options need an additional charge. The plugin adds the additional charge to the total price (available in PRO). Customers can make orders for their personalized computers and pay you the whole price upfront.

Getting back to the look. This is the basic configuration. I didn't use any CSS styling and I used a default WooCommerce theme: Storefront. You can customize the look of the fields however you want, of course. There is an option for this purpose in the plugin.

Flexible Product Fields

In short, this plugin lets you create product add-ons. You can add new custom fields to the products in your WooCommerce store. You have already seen an example.

The types of fields you can add to your WooCommerce products

• Text
• Textarea
• Number
• E-mail
• URL
• Multi-checkbox
• Radio with colors
• Time
• Color
• Heading
• Paragraph
• Image
• HTML
• Checkbox
• Radio Button
• Select
• Multi-select
• Radio with images
• Headline
• Date (PRO)
• File Upload (PRO)

You should check out that guide! You will find there are a lot of use cases. We guide users step-by-step through the configuration to implement:

• Simple booking system,
• Gift wrapping feature,
• Catering diet wizard,
• Computer wizard etc.

WooCommerce Checkout custom fields

Now, let me show you how to add custom fields to the WooCommerce order from the checkout page!

You will need this plugin:

👉🏽 Download it here:

Let's see the example of a customized checkout page with the free Flexible Checkout Fields for WooCommerce plugin:

The plugin lets you add, remove, reorder, and effectively customize the WooCommerce checkout page!

Flexible Checkout Fields

✅  So, in short, Flexible Checkout Fields lets you create custom fields in WooCommerce checkout→

✅  Also, with this plugin, you can edit or rearrange default WooCommerce checkout fields!

For example, you can disable some billing address fields for faster checkout.

Over 90,000 stores worldwide use this plugin daily.

Checkout field types in the free version

• Text
• Textarea
• Number
• E-mail
• Phone
• URL
• Checkbox
• Color
• Headline
• Paragraph
• Image
• HTML

Fields in the PRO version

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

Download this free WooCommerce extension to customize your checkout page.

Summary

Add custom product and checkout fields in WooCommerce

In this article, I showed you the plugins that you can use to create custom fields in WooCommerce.

There are two plugins that you can use to create custom fields in WooCommerce:

• Download Flexible Product Fields →
• Download Flexible Checkout Fields →

Both plugins are available to download for free. However, the free version doesn't support all the features.

Let us know if you have any questions about the plugins and creating custom fields!

More about our plugins