fbpx
Booster for WooCommerce - Checkout Custom Fields in WooCommerce Development Partner1 Booster for WooCommerce - Checkout Custom Fields in WooCommerce Development Partner1

Checkout Custom Fields in WooCommerce

Overview #

The WooCommerce Checkout Custom Fields plugin allows you to add custom fields to the checkout page of your e-commerce website. It allows you to add the checkout fields in any section of the checkout page including billing, shipping, account, and order notes. 

Using the WooCommerce Checkout Custom Fields plugin to add custom fields to your checkout page, your chances of increasing your store sales will be increased and your online store’s bounce rate will be significantly reduced.

Enabling Checkout Custom Fields #

To enable and use the WooCommerce Checkout Custom Fields plugin, you should first download and install Booster for WooCommerce.

1. Navigate to WordPress Dashboard > WooCommerce > Settings > Booster > CART & CHECKOUT > Checkout Custom Fields.

The Checkout Custom Fields Module Options page will be displayed.

2. In the Checkout Custom Fields section, check the box for Enable Module field.

3. Scroll down to the end of the page and click Save changes.

The WooCommerce Checkout Custom Fields plugin will be enabled for your site.

Configuring Custom Fields for Checkout Page #

You can add custom fields to the checkout page of your e-commerce website using this option. You can add custom fields such as text field, number, text area, date picker, radio button, checkboxes, password, and so on. 

You can display custom fields in admin email and add all fields to customer emails as well. Using this plugin you can also add custom fields to your Thank you and View order pages. Additionally, with the plugin’s visibility option you can show or hide custom checkout fields based on the content of a customer’s cart.

1. Navigate to WordPress Dashboard > WooCommerce > Settings > Booster > CART & CHECKOUT > Checkout Custom Fields.

The Checkout Custom Fields Module Options page will be displayed.

2. Enter/select required values for the fields. Refer to the table below for field descriptions:

Field Description
Options
Add All Fields to Admin Emails Specifies if the custom fields should be added to admin emails
Add All Fields to Customers Emails Specifies if the custom fields should be added to customer emails
Emails Fields Template – Before the fields Fields that should be output before the custom fields in the email template. Example: <table>
Emails Fields Template – Each field. Replaced values Format of the fields that should be output in the email template. Example: <tr><th>%label%</th><td>%value%</td></tr>
Emails Fields Template – After the fields Fields that should be output before the custom fields in the email template. Example: </table>
Add All Fields to “Order Received” (i.e. “Thank You”) and “View Order” Pages Specifies if all the custom fields should be added to Order Received/Thank You and View Order pages.
“Order Received” Fields Template – Before the fields  Fields that should be output before the custom fields on the Order Received page.
“Order Received” Fields Template – Each field. Replaced values Format of the fields that should be output on the Order Received page.
“Order Received” Fields Template – After the fields Fields that should be output before the custom fields on the Order Received page.
Textarea Field Values Specifies if the field values of textareas should be cleared while saving the Order Received page
Textarea Line Breaks Specifies if line breaks should be replaced with <br> in textarea field values while displaying on the Order Received page.Note: This option does not affect admin order edit page.
Custom Fields Number Number of custom fields added on the Checkout page

3. Click the Save changes button next to the Custom Fields Number field.

4. Scroll down for more options.

5. Enter/select required values for the fields. Refer to the table below for field descriptions:

Field Description
Enable/Disable Specifies if the custom field is enabled
Type Type of the input field. The available options are:
Text – Allows the user to enter a small string of characters
Textarea – Allows the user to enter characters
Number – Allows the user to enter only numbers
Checkbox – Allows the user to select the required option
Datepicker – Allows the user to select a date.
Weekpicker – Allows the user to select a week
Timepicker – Allows the user to select the time.
Select – Allows the user to select required options
Radio – Allows the user to select the required option
Password – Allows the user to enter characters
Country – Allows the user to enter alphabetical characters
State – Allows the user to enter alphabetical characters
Email – Allows the user to enter characters. The input must be in the format of a valid email address
Phone – Allows the user to enter numbers
Note: Based on the type of custom field selected, further details must be provided in the following fields.
Required Specifies if the custom field is a mandatory field
Label Name of the custom field
Placeholder A message to prompt your customers to enter/select values for the custom field. For example, if the custom field is Phone, the Placeholder can be Please enter your phone number with the country code.
Description A brief summary of the custom field. You can use HTML here.
Priority (i.e. Order) Position of the custom field in the sequence. For default order, enter zero.
Section Section of the Checkout page in which the custom field should be displayed
Class HTML class to display the custom field
Clear Specifies if the CSS should be cleared
Customer Meta Fields Specifies if the custom field should be added to the customer meta fields
If custom field Type is Radio:
Select/Radio: Options Options for the custom field. Enter one option per line. 
Select: Use select2 Library – Enable Specifies if search should be enabled
Select: Use select2 Library – min input length Minimum number of characters required to initiate search. This field will be ignored if set to zero.
Select: Use select2 Library – max input length Maximum number of characters that can be entered for an input. This field will be ignored if set to zero.
If custom field Type is Checkbox:
Checkbox: Value for ON Value for ON status of the checkbox
Checkbox: Value for OFF Value for OFF status of the checkbox
Checkbox: Default Value Default value of the checkbox
If the custom field Type is  Datepicker/Weekpicker:
Datepicker/Weekpicker: Date Format Date format 
Datepicker/Weekpicker: Min Date Minimum date
Datepicker/Weekpicker: Current day time limit Time after which the current day will not be available for the user to select from the Datepicker/Weekpicker
Datepicker/Weekpicker: Max Date Maximum date
Datepicker/Weekpicker: Add Year Selector Specifies if you want to add a year selector
Datepicker/Weekpicker: Year Selector: Year Range Year range for the Datepicker/Weekpicker and Year Selector
Datepicker/Weekpicker: First Week Day First day of the week
Datepicker/Weekpicker: Block Dates Format Date formats that are blocked for the Datepicker/Weekpicker. Enter one format per line
Datepicker/Weekpicker: Block Dates Dates that are blocked for the Datepicker/Weekpicker. Enter one date per line
If the input field Type is Timepicker:
Timepicker: Time Format Time format
Timepicker: Interval Interval, in minutes, in which the time selection option should be enabled
Exclude Categories At least one or more products belonging to the categories specified in this field are in the cart, then the custom field should be hidden on the checkout page.
Include Categories At least one product belonging to any of the categories specified in this field is in the cart, only then the custom field should be displayed on the checkout page.
Exclude Products At least one or more products specified in this field are in the cart, then the custom field should be hidden on the checkout page.
Include Products At least one product specified in this field is in the cart, only then the custom field should be displayed on the checkout page.
Min Cart Amount Minimum total amount of the cart for which the custom field should be displayed. To disable this field, set it to zero.
Max Cart Amount Maximum total amount of the cart for which the custom field should be displayed. To disable this field, set it to zero.

6. Repeat step 5 for as many custom fields you have specified in the Custom Fields Number field.

7. Scroll down to the end of the page and click Save changes.

The custom field(s) for the Checkout page will be configured.

Output #

A sample checkout page with the optional custom field Email address is shown in the below screenshot:

Powered by BetterDocs