fbpx
Checkout Custom Field

Description

The Checkout Custom field is a Booster plugin module for WooCommerce that adds custom fields to your WooCommerce checkout page. 

When enabled, the WooCommerce custom checkout fields plugin allows you to add custom fields such as text field, number, text area, date picker, radio button, checkboxes, password, etc., to your checkout page. 

And you can add them wherever you please: Billing, Shipping, Account, and Order Notes sections. 

By adding custom fields to your checkout page, you increase your chances of making more sales for your store. 

Also, by adding the right fields to your checkout page, you will significantly reduce your online store’s bounce rate. 

In this post, you will learn how to add fields to WooCommerce checkout fields to your store easily. 

Key Features of WooCommerce Checkout Custom Fields module

Here are some WooCommerce Checkout Custom Fields that make it the plugin of choice for online retailers.

  •  Allows you to display custom fields in admin email
  • Allows you to add all fields to customers’ email
  • You can enable the emails field template: before, each, and after the fields
  • Allows you to add custom fields to your “Thank you” and “View order” pages
  • Comes with “Order received” fields template: before, each, and after the fields
  • Allows you to set options for select and radio type fields
  • You can also set options for the checkbox type field
  • Has week-picker and time-picker field type options
  • It has a visibility option that lets you show or hide custom checkout field based on the content of a customer’s cart
  • You can customize the view of your website’s checkout radio buttons via CSS

Adding and removing WooCommerce Checkout Custom Fields

How to add fields to WooCommerce checkout 

Here are the steps to adding custom fields to WooCommerce checkout

Step 1: From your WordPress dashboard, navigate to WooCommerce > Settings > Booster > Cart & Checkout > Checkout Custom Fields.

Step 2: Enable the Checkout Custom Fields option. 

Step 3: Customize the checkout custom fields however you please. For example, you can choose to remove them from specific products and product categories. Alternatively, you can make them hide or show based on a customer’s cart amount. 

And of course, you can choose a format for your date-picker or week-picker. 

To remove the custom fields, disable the Checkout Custom Fields option from the Booster Dashboard. 

Settings of WooCommerce Checkout Custom Fields

The Booster Checkout Custom Fields comes with lots of setting options. For example, it allows you to set your Customs Field Number. Also, you can set the default value of your custom checkbox field without any hassles. 

You can even add a checkout file upload option if you want. 

Email Options

This section allows you to set if you want custom fields to be displayed in emails. Also here you can define how fields should be outputted.

WooCommerce Checkout Custom Fields - Admin Settings - Email Options

Add All Fields to Admin Emails
Enable this if you want all fields to be added to all emails to administrators.
Default: yes
Add All Fields to Customers Emails
Enable this if you want all fields to be added to all emails to customers.
Default: yes
Emails Fields Template: Before the fields
This option sets what should be outputted before the custom fields. For example try: <table>.
Default: None
Emails Fields Template: Each field
This option sets how each field should be outputted. Replaced values: %label%, %value%. For example try: <tr><th>%label%</th><td>%value%</td></tr>
Default: <p><strong>%label%:</strong> %value%</p>
Emails Fields Template: After the fields
This option sets what should be outputted after the custom fields. For example try: </table>.
Default: None

Order Received Options

WooCommerce Checkout Custom Fields - Admin Settings - Order Received Options

Default: yes
Default: None
Replaced values: %label%, %value%.
Default: <p><strong>%label%:</strong> %value%</p>
Default: None

Custom Fields Number Option

Custom Fields Number
Default: 1

Field's Options

WooCommerce Checkout Custom Fields - Admin Settings - Field General Options

Enable/Disable
Enables the custom field.
Default: no
Type
Possible values: Text; Textarea; Number; Checkbox; Datepicker; Weekpicker; Timepicker; Select; Radio; Password; Country; State; Email; Phone.
Default: Text

WooCommerce Checkout Custom Fields

Required
Sets if the field is required to fill on checkout on not.
Default: no
Label
Sets label for the field.
Default: None
Placeholder
Sets placeholder for the field.
Default: None
Priority (i.e. Order)
Here you can set the field's position inside the section. Lower number will move the field higher in the section.
Default: None
Section
Possible values: Billing; Shipping; Order Notes; Account.
Default: Billing
Class
HTML class. Possible values: Wide; First; Last.
Default: Wide
Clear
CSS clear option.
Default: yes
Customer Meta Fields
Check this if you want the field to be added to the customer meta fields.
Default: yes

Select and Radio Field Type Options

This subsection allows you to set options for select and radio type fields.

WooCommerce Checkout Custom Fields - Admin Settings - Select and Radio Field Type Options

Select/Radio: Options
Set options for the field here. One option per line.
Default: None
Select: Use select2 Library
Enable this if you want to use select2 library instead of standard HTML select input field.
Default: no
select2: min input length
select2: Number of characters necessary to start a search. Ignored if set to zero.
Default: 0
select2: max input length
select2: Maximum number of characters that can be entered for an input. Ignored if set to zero.
Default: 0

Checkbox Field Type Options

This subsection allows you to set options for checkbox type fields.

WooCommerce Checkout Custom Fields - Admin Settings - Checkbox Field Type Options

Checkbox: Value for ON
Default: Yes
Checkbox: Value for OFF
Default: No
Checkbox: Default Value
Possible values: Not Checked; Checked.
Default: Not Checked

Datepicker, Weekpicker and Timepicker Field Type Options

This subsection allows you to set options for datepicker, weekpicker and timepicker type fields.

WooCommerce Checkout Custom Fields - Admin Settings - Datepicker Weekpicker Timepicker Options

Datepicker/Weekpicker: Date Format
Default: None
Datepicker/Weekpicker: Min Date
Min date in days.
Default: -365
Datepicker/Weekpicker: Max Date
Max date in days.
Default: 365
Datepicker/Weekpicker: Add Year Selector
Default: no
Datepicker/Weekpicker: Year Selector: Year Range
The range of years displayed in the year drop-down.
Default: c-10:c+10
Datepicker/Weekpicker: First Week Day
Possible values: Sunday; Monday; Tuesday; Wednesday; Thursday; Friday; Saturday.
Default: Sunday
Timepicker: Time Format
Default: hh:mm p
Timepicker: Interval
Interval in minutes.
Default: 15

Field Visibility Options

This subsection allows you to show or hide custom checkout field, depending on what's in cart.

WooCommerce Checkout Custom Fields - Admin Settings - Field Visibility Options

Exclude Categories
Hide this field if there is a product of selected category in cart.
Default: None
Include Categories
Show this field only if there is a product of selected category in cart.
Default: None
Exclude Products
Hide this field if there is a selected product in cart.
Default: None
Include Products
Show this field only if there is a selected product in cart.
Default: None
Min Cart Amount
Show this field only if cart total is at least this amount. Set zero to disable.
Default: 0
Max Cart Amount
Show this field only if cart total is not more than this amount. Set zero to disable.
Default: 0

Tips & Tricks

To add custom fields to Booster’s PDF invoices, you should use [wcj_order_checkout_field] shortcode, e.g.:
[wcj_order_checkout_field field_id="billing_wcj_checkout_field_1"]

You can use use Custom CSS Options (accessible through WooCommerce > Settings > Booster > EMAILS & MISC. > General). For example, to change default view of custom checkout radio buttons:

WooCommerce Checkout Custom Fields - Radio button
Custom CSS code for radio buttons restyling:

label.radio { display: inline !important; padding-left: 5px; }<br />
label.radio:after { content: ‘\A’; white-space: pre; }

FAQs

How to add custom fields on WooCommerce Checkout page?

The Booster Checkout Custom Fields plugin module makes it easy to add custom fields to your WooCommerce checkout page. 

To do so, first install the plugin on your website. After installation, open Booster Cart and Checkout settings. From there, enable the custom field checkout option. 

How to Add Additional Custom Fields into WooCommerce Checkout Page

You can add as many custom fields to your WooCommerce checkout page. Just enable the one you want, and Booster would handle the rest. 

Conclusion

Adding custom fields to your checkout page on WooCommerce can help boost your sales and reduce your bounce rate. The Booster Custom Fields plugin module makes it easy to add one to your website. 

Accessible through:
  • WooCommerce > Settings > Booster > Cart & Checkout > Checkout Custom Fields
Tested on WooCommerce 6.8.2 and WordPress 6.0.2