One feature that we feel WooCommerce really lacks out of the box, is the ability to add additional WooCommerce checkout fields to the checkout page. Having the ability to add these extra fields gives you the opportunity to capture data about your customer or their order that you ordinarily would not be able to capture.
There are many different reasons as to why you would want to capture this data. They include:
- You may need to customize the order based on a customers preference
- Or maybe you want your customer to be able to leave a note for a gift purchase
- Another use for checkout fields is for marketing research, you could ask your customer how they found your website
- And lots more!
Whatever your need is for adding extra WooCommerce checkout fields, in this guide we’re going to take you through the process from start to finish of getting them setup on your store. Let’s get right in to it!
Step 1: Install a WooCommerce checkout fields plugin
We said at the very start of this guide that additional checkout fields do not come standard with WooCommerce. This means that we’re going to have to install a plugin to create the fields. The good news is that there are a ton of different plugins for you to use.
In fact, we here at WP Geeks are busy working on our very own WooCommerce checkout fields plugin. We’re quite excited about it and are anticipating a launch really soon.
Until then, we recommend that you install the Flexible Checkout Fields plugin from the WP.org plugin repository.
Download the plugin and install it to your WordPress/WooCommerce website. Once you’ve activated the plugin, move on to step 2.
Step 2: Add the extra checkout fields to WooCommerce
Great, the plug is now installed and activated. Let’s go ahead and set up the additional fields we require. There are a number of different places where you can add the fields. They are:
- Billing section – underneath the billing form fields
- Shipping section – below the shipping form fields
- Order section – below the order notes field
- Custom – You are also able to define custom sections
Decide on which section is best for your field or fields. Navigate to “WooCommerce” on the WP Admin sidebar and then click on “Checkout Fields”. You’ll now notice a bunch of tabs corresponding to the sections above. Choose the section where you would like to add your field and click the corresponding tab.
Now, you’ll see an interface on the left hand side to add the specific field. Choose the type of field you want to add, specify a label, and give it a name.
For this guide, we’ll add a new text field which allows a customer to add a message for a gift purchase. We’ll add this to the order section.
Step 3: Add additional field specific configurations
Now that the field has been added, you can customize it by clicking the little down arrow next to the field on the right hand side. We’ve made our field required. Go ahead and customize your fields as you see fit.
Step 4: Test the fields on the frontend of the store
Lastly, it’s a good idea to make sure that the fields are both showing up on the frontend of the website when you checkout and that submitting an order captures the data as expected.
That’s all there really is to it. We really hope you found this guide useful and were able to setup the WooCommerce checkout fields on your own store. If you got stuck somewhere, let us know in the comments below and we’ll do our best to help you out.