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:
