Use the coupon code WORDPRESS and save 30% OFF! Buy Now

Add custom fields to your WooCommerce checkout page

Last Updated On
Add custom fields to your WooCommerce checkout page WordPress template

The WooCommerce checkout page comes with most of the required fields to allow you to get all the required information in order to dispatch an order to a client. What if something is missing? You might need a couple of extra fields, a checkbox, a drop-down or another text input field, how can you get them? You can always add new fields programmatically as described in WooCommerce’s documentation here, but there is an easier way by using a plugin.

Flexible WooCommerce Checkout Field Editor

Once you install and activate the plugin you will find its options page under the WooCommerce options tab in the dashboard as Checkout field editor.

The plugin allows you to modify billing, shipping, account and checkout fields.

In this example we’ll take a look at the billing fields editor since all of them work in basically the same way.

Above you can see all the default WooCommerce billing fields. You can reorder the default fields if you wish via drag n drop, then save to apply the new field order on the checkout page. You can also modify default fields, for example, let’s say that you want to make the company name on the billing fields mandatory. Start by clicking the edit button next to the billing_company field.

You will be presented with the screen above, here you can check the Required checkbox and save, that’s it, the field is not mandatory.

Adding a new field

To add a new field you can click the Add new field button in the main screen above. Once you do the new field will appear as shown below.

To customize the field click the edit button. You will be presented with the option box shown below.

Here things are pretty straight forward. You can change the fields label which will appear in the checkout page, set a placeholder, mainly for input fields, select whether you want it to show on the order page and/or email, make it a required field, change its size and position, set a type and a default value. There are seven editor types available to you which are shown below.

So for example, to add a checkbox on the checkout page for your clients to request a callback verification of their order you’ll have to add a new field and configure it like so.

Once done save the fields and have a look at your checkout page!

As you can see our new field has been added, that was easier than adding it programmatically, right?

Price: FREE

3 responses to “Add custom fields to your WooCommerce checkout page”

  1. Nikos Kavvadas says:

    Thanks for this!

  2. Alexamedia says:

    I would like to my Checkout page WooComerce a form with 2 radio buttons.Each radio button when is click it to open different form.Can I make it?Thanks!

    • Nik Vourvachis says:

      Hello there!

      Unfortunately the plugin we used in the demo does not support radio buttons. I found this plugin which offers a pro version that allows you to create radio buttons. You can contact the plugin’s author and describe what you are trying to achieve, they’ll let you know if it’s feasible and if so, you can buy their plugin and do it.

Leave a Reply

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

Get access to all WordPress themes & plugins

24/7 Support Included. Join 115,000+ satisfied customers.

Pricing & Sign Up

30-day money-back guarantee. Not satisfied? Your money back, no questions asked.

Back to top