One of the things that WooCommerce excels at is customization. With other platforms, the checkout experience is completely locked down. There's no way you can ask for more information from the customer and no way to remove unnecessary fields. With WooCommerce, we give that power to the store owners and instead prevent them from deleting the essential fields.
As a store owner, you may want to know how people found your site. Did they do a Google search, were they referred by a friend, or did they find you through social media? Those answers could affect how you choose to market your business. Adding a How did you hear about us? field to the checkout is pretty painless with the Checkout Field Editor plugin.
You'll need the Checkout Field Editor plugin (available on WooThemes.com) installed and activated on your site.
The Checkout Field Editor plugin gives us additional settings we can tweak to change checkout fields and how they behave. We need to navigate to the right-hand side checkout field area and then add our field. Let's take a look at the following steps:
- From the WordPress admin, go to WooCommerce | Checkout Fields.
At this point, you'll see the list of billing fields, and a set of tabs along the top of the page. You can choose to put the field under the Billing section, the Shipping section, or the Additional Fields section. For most use cases, I suggest putting the additional fields in the Additional Fields section. That way, if there's another plugin that modifies the billing or shipping fields, your custom field should be unaffected.
- Click on Additional Fields.
- Click on + Add field.
- Enter a name for the field. The name is only used in the code and won't be displayed to the end user. I'll name my field
hear_about_us. - Now select the type of field you want to add. In our case, we want to give the user a list of options and we're going to choose the Select type.
Note
If you want to give a user a set of options, it's best to use either the Select, Multiselect, or Radio option. The Radio option works well enough, but needs a bit of fiddling to make it look like it fits into the checkout experience. If you don't mind tinkering with CSS, use radio buttons. If you don't want to touch the CSS, the Select or Multiselect option is your best bet. The Select field is a drop-down that allows the user to select one option. The Multiselect field is the same thing but allows them to select multiple options.
- Now enter a label for the field. This is visible to the user. We'll enter
How did you hear about us?. - Now we need to enter the possible values a user can select. Put those values in the Placeholder / Option Values field. Each value should be separated by a pipe character ( | ).
- To make the field look as good as possible, I recommend setting the Position setting to Full-width.
- You can optionally make the field Required by selecting that option from the Validation Rules field.
- Click on Save Changes.
Your saved field settings should look something like this:
And, on the frontend, your field should look something like this, depending on your theme:
You can, of course, also use this plugin to remove or edit existing fields. The plugin will prevent you from editing anything critical, but it's always a good idea to test your checkout after any changes to make sure that it still works smoothly.
You can use more than just radio buttons and select boxes. You can also add text boxes, text areas, checkboxes, password fields, and date pickers.