How To Add Custom Fields to the WooCommerce Checkout Process

Looking to add custom fields to WooCommerce checkout?

Along with your product pages, it’s enormously important to get the WooCommerce checkout page right. It can be vital in securing sales! The standard WooCommerce checkout field editor provides a range of standard fields to cover the basics. But what if you need more customization?

That’s where a WooCommerce custom fields checkout experience comes in! Custom fields let you collect additional data at checkout.

This guide will introduce you to WooCommerce custom checkout fields and show you how the Profile Builder Pro plugin — along with its WooCommerce Sync add-on — can help you create and manage those fields.

The Benefits of Customizing the WooCommerce Checkout Page with Custom Fields

The standard WooCommerce checkout fields cannot fit every situation. There’s often a range of extra information that you need to collect. The checkout page is often the place to collect it! The customer is already expecting to fill out a form, so this is the perfect time to ensure you get any necessary additional information. This also avoids having to get it from them at a less convenient moment.

For example, need a VAT number at checkout? Add it with a custom checkout field. Want to add custom shipping options? Use a custom field. Want to add a section for custom order notes or order details? Use a custom text field. Need to include GDPR consent or special instructions? You guessed it, all you need to do is add a custom WooCommerce checkout field.

You’ll want to use a plugin to add your WooCommerce custom checkout fields. It is possible to create a DIY solution, but this involves some complex coding using PHP and CSS and is highly likely to be less reliable unless you’re a very confident coder. Your WooCommerce checkout is where you or your client makes their money, so it’s not worth taking any risks here. 

That’s where Profile Builder Pro and WooCommerce Sync come in. You can use them to add any type of custom fields to WooCommerce checkout, including conditional or repeater fields (more on this below). An example is below. Let’s get to it!

Screenshot of a WooCommerce checkout with custom fields

Installing Profile Builder and the WooCommerce Sync Addon

To get started with adding Custom Fields to the WooCommerce Checkout, you’ll first need to install Profile Builder Pro. This is the all-in-one user registration and management plugin for WordPress sites, giving you the power to 

  • Create front-end login, registration and profile forms by using shortcodes
  • Add a wide variety of custom fields to your registration and profile forms
  • Enable user email registration confirmations, as well as admin approval
  • Allow users to login with their email and username, or social accounts
  • Enforce password length and strength
  • Add custom fields to WooCommerce checkout plus manage & display customer fields directly from Profile Builder forms

…and much more! What’s more, it requires absolutely no coding skills. Profile Builder Pro comes with multiple advanced add-ons and user modules, dramatically extending the base feature set. To add custom fields to the WooCommerce Checkout form, we’ll use the WooCommerce Sync add-on. 

Profile Builder installs and activates just like any other WordPress plugin. After purchasing a Pro license from our site, you’ll get an email containing links to your purchased downloads along with the additional info you’ll need to access your account. 

Installation step-by-step

Simply go to Plugins from your WordPress admin interface, choose Add New->Upload – browse and upload your .zip file. Then just hit Install Now. After the installation completes, just press Activate Plugin and Profile Builder will be ready for use!

WordPress Add Plugins screen

 

After you’ve got Profile Builder Pro set up, we can start on WooCommerce Sync. This add-on has a range of powerful features integrating Profile Builder with WooCommerce, but for the time being we’re concerned with how it makes it easy to add custom fields created with Profile Builder straight onto the WooCommerce checkout page. 

Posts Builder Pro Addon Downloads Page

The .zip file will be available for download under your account page by clicking the “Add-ons Download” button. Once downloaded, you can install the add-on as a standard WordPress plugin by uploading the .zip file in WordPress Admin -> Plugins -> Add New -> Upload Plugin.

If you’re not using WooCommerce, you can use Profile Builder Pro to create a custom registration form instead!

Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Get the plugin

Adding Custom Fields to the WooCommerce Checkout Page

Let’s look at how we can use WooCommerce Sync to customize the WooCommerce checkout page by adding custom fields. 

Profile Builder is, at its heart, a plugin that simplifies and automates the processes behind creating advanced User Profiles for use across your WordPress site. It makes the process of user registration, login, and profile editing swift and easy for you and your users.

We can use Profile Builder’s Default and Extra Fields Types to add all kinds of extra information to the “Create an Account” WooCommerce section. All field types are supported except certain default fields that are already taken into account by WooCommerce (email and username in particular).

As you can see below, the “add field” option opens up loads of new possibilities: 

Posts Builder Add Field Screen

 

The WooCommerce Sync Add-on therefore takes this functionality and links it up with WooCommerce, allowing you to automatically add customer billing fields and shipping address fields into Profile Builder’s Registration and Edit Profile forms. Once you install the addon, you’ll see new options under Field Properties:

Posts Builder Field Properties WooCommerce Billing

You can choose how the additional fields appear on the frontend, edit their headings, remove and re-add them on the Manage Fields interface:

Posts Builder Manage Fields Interface

Here’s the complete range of extra field types supported by Profile Builder that can be hugely useful on the WooCommerce Checkout

  • Heading – Used by the Admin for breaking the front-end forms into sections
  • Input – Used by the User for custom information inputs
  • Number – Used by the User to add numbers
  • Input (Hidden) – Used by the Admin for saving information that’s not visible by the logged in user
  • Textarea – Used by the User for consistent information
  • WYSIWYG – Used by the User for adding and editing information with html
  • Phone – Used by the User for adding a phone number
  • Select – Used by the User to choose data from a predefined list
  • Select (Multiple) – Used by the User to choose multiple selections from a predefined list
  • Select (Country) – Used by the User to choose a Country
  • Select (Timezone) – Used by the User to choose a Timezone
  • Select (User Role) – Used by the User to choose a User Role
  • Select (Currency) – Used by the User to choose a Currency
  • Select (CPT) – Used by the User to select a Custom Post Type (Page, Post or Custom Post Type)
  • Checkbox – Used by the User to check an option from a list
  • Checkbox (Terms and Conditions) – Used by the User to accept the Terms and Conditions
  • Checkbox (GDPR) – Used by the User to consent to the collecting of personal data
  • Radio – Used by the User to select an option from a radio button group
  • Upload – Used by the User to upload files
  • Avatar Upload – Used by the User to upload an Avatar
  • Datepicker – Used by the User to choose a Date
  • Timepicker – Used by the User to choose the Time
  • Colorpicker – Used by the User to choose a Color
  • reCAPTCHA – Used by the Admin to protect against spam
  • Validation – Used by the Admin to implement Custom Validation Inputs
  • Map – Used by the User to pin his location
  • HTML – Used by the Admin to add HTML content
  • Email – Used by the User to add an Email address
  • URL – Used by the User to add a website URL

To add a custom field in the WooCommerce checkout page, you have to go to Manage Fields -> Add New / Edit Field -> Display on WooCommerce Checkout: Yes.
You can see this near the bottom of the screenshot below. We’ll use the date of birth / birthday field value as the example here, which would appear as a datepicker in the final form. 

Posts Builder Example Extra Field Screen

In order to let users register on the WooCommerce Checkout page, you will need to check the Enable registration on the “Checkout” page checkbox found in WooCommerce -> Settings -> Accounts -> Accounts Pages -> Enable Registration.

WooComerce Sync Enable Registration on Checkout

Inside WooCommerce -> Settings -> Checkout -> Checkout Options -> Checkout Process we have an option called “Enable guest checkout”. If it is checked, it will allow customers to checkout without creating an account. By leaving it unchecked, you can ensure that anyone purchasing your product is forced to create an account on checkout if they haven’t already logged in. This requires the previous setting we discussed – Enable registration on the “Checkout” – to be checked to work.

WooCommerce Sync Enable Guest Checkout

If your store already has existing customers, you don’t need to worry. You’ll still be able to collect extra info at the checkout when they place a new order and their user profiles will be updated automatically. Here’s what this looks like for customers checking out:

Screenshot of a WooCommerce checkout with custom fields

Adding Conditional Logic and Repeater Fields to the WooCommerce Checkout

Many field entries in Profile Builder Pro give you the option of using conditional logic. The fields that appear on the WooCommerce checkout with WooCommerce Sync are no exception.

Posts Builder enable conditional logic checkbox

Conditional logic allows you to show or hide form fields depending on what the user has already entered. For example, if you have a ‘subscribe to our newsletter’ entry on your checkout page, you can tell conditional logic to add an email box and opt-in consent as required fields of the form that only appears if they select the option.

Or if your customer enters a country in the EU, you could then display postcode instead of zip code, VAT, or other conditions depending on how they complete the form. 

You can see our conditional logic at work below. If a user doesn’t have any dietary restrictions, then they can move straight onto the next field. If they mark that they do, then a new field appears allowing their dietary preference to be entered.

You can select the conditional logic checkbox for individual elements of pages, giving you full control over how your forms look and feel.

WooCommerce Sync also allows you to add repeater fields or groups of fields, directly to the WooCommerce checkout page. Repeater fields can be used when you need your users to insert things like: multiple phone numbers, upload multiple pdf, images or another type of files.

Adding Customer Billing & Shipping Fields in Profile Builder forms

You’re able to rename and reorder each individual Billing and Shipping field from the Manage Fields UI after picking it from the dropdown. You can also choose which individual fields to display in the front-end, as well as which should be marked as required.

Also, you can simply drag & drop to reorder the individual fields within both Billing Address and Shipping Address display fields. When first added, the default names, their order, and ‘required’ values are taken automatically from WooCommerce.

Managing WooCommerce Address Fields in Posts Builder Interface

The benefit of all this is that when a new user registers or logs in to their profile, you can give them access to add or modify the WooCommerce customer fields along with their other profile info. 

Start creating a great WooCommerce custom fields checkout experience

As you can see, while the idea of customizing the WooCommerce checkout page may seem intimidating, it isn’t! With the help of Profile Builder Pro and its WooCommerce Sync addon, you can add any type of WooCommerce custom fields to checkout, with no coding whatsoever. You can even make some of the fields conditional, or repeating.

You’ll also be able to manage the WooCommerce customer billing and shipping fields directly from the front-end profile forms created with Profile Builder.

A little patience and this guide is all you need to fully customize your custom checkout fields however you like. Get started today!

Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Get the plugin

Subscribe to get early access

to new plugins, discounts and brief updates about what's new with Cozmoslabs!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.