Add custom fields to your WooCommerce checkout page

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
Source: https://wordpress.org/plugins/flexible-woocommerce-checkout-field-editor/