Skip to main content

Custom Fields

  • Updated

The article covers the following topics:

  1. Add New Field
  2. Edit Field
  3. Delete Fields
  4. Rearranging Fields 
  5. Copy a Field (Duplicate Field)
  6. Enable/Disable Fields
  7. Reset to Default Settings
  8. Overriding a Default Field

 

Installing Checkout Field Editor lets add custom fields apart from the default ones. You can choose from over 24+ field types to your checkout form:

 

Screenshot_2022-03-17_at_3.05.38_PM.png

  1. Text
  2. Hidden
  3. Password
  4. Telephone
  5. Email
  6. Number
  7. Textarea
  8. Select
  9. Multi-Select
  10. Radio
  11. Checkbox
  12. Checkbox Group
  13. Date Picker
  14. Time Picker
  15. File Upload
  16. Heading
  17. Label
  18. Datetime local
  19. Date
  20. Month
  21. Time
  22. Week
  23. URL
  24. Paragraph

Add new field

To add a field:

  1. Navigate to the WooCommerce → Checkout Form → Checkout Fields page.
  2. Click on the Add field button.

    add_new_field__1_.png

  3. Enter a Name, Field Type, Label, and other details of your field.

    new_field.png

  4. Set display rules from the Display Rules tab if required.
  5. Set display styles from the Display styles tab if required.
  6. Set price details from the Price details tab if required.
  7. Set repeat rules from the Repeat Rules tab if required.
  8. Click on the Save Field button.

All these tabs are explained below.

 

Basic Info

This tab contains fields to capture all the basic details of the checkout field. All the properties available in the General Properties tab are listed below. Depending on the field type selected, the properties of the field may change.

Field Type

 The type for the field. It could be text, password, text area, select, checkbox, radio, paragraph, URL, etc.
Name Unique name for the field. No two fields can have the same name.
Label The display label for the field.
Description Description for the field. The description is displayed below the field label.
Default Value You can assign a default value for the field. This value will be shown as the default value when the checkout form is loaded.
Placeholder The placeholder property is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field. For example, for an email field, the expected format name@example.com can be displayed. The short hint is displayed in the input field before the user enters a value.
Max. Length

The max length property specifies the maximum number of characters allowed in the input field.
Validations

Choose validators that should be applied to the input field. Email, Phone, and Number are supported out-of-the-box. You can define your own validation rules in the Advanced Settings section. Any validation rule defined in the Advanced Settings section will appear in the select box.

To learn more about custom validators and their configuration, see Custom Validators.
Required

If checked, the field will be set as a mandatory field.
Enabled

Uncheck this checkbox to disable this field.
Order Meta Data

This property can be used to save your custom value as part of order data so that this field value will be specific to each order. (For example, Delivery Date which is specific for each purchase.) Order fields will be saved in wp_postmeta table as Order metadata. To create Order fields you must select the checkbox 'Order Meta Data'.
User Meta Data

This property can be used to save your custom field value as part of user data, so that the custom field will be available in the user profile page and the user can edit the value from there. The user metadata is the information directly related to the user and will be the same for every order to a probability of 90%. Data like date of birth, email, billing and shipping addresses, etc. belong to this category.

User fields will be saved in wp_usermeta table as user metadata. Custom user field values can be updated from the user profile page. To create User fields you must select the checkbox ‘User Meta Data’.

 

The custom fields of Billing and Shipping will be displayed at My Account page → Addresses → Corresponding Address(Billing or Shipping).

 

The custom fields created in the Additional info section and in the custom sections will be displayed at the My Account → Account details tab.

 

Display Styles

Wrapper Class A comma-separated list of CSS classes will be added to the container that wraps the input field and the label.
Input Class A comma-separated list of CSS classes will be added to the input element.
Label Class A comma-separated list of CSS classes will be added to the label tag.

Display in Admin Mails

By selecting this property, display the field and value in all WooCommerce emails sent to Admins.

Display in Customer Emails

If this property is selected, the field and its value will be displayed in the Order Confirmation email (customer copy) and Thank You mail.

Display in Order Detail Pages

This property can be used to display your custom field and its value on the Order Details page (for both Admin & Customer views).

Display in Thank You Page

Check this option, and the field details will be displayed in your Thank You page.

 

Price Details

Price

Add an additional price to the order total based on the field value.

To learn more about price fields and their configuration, see Price Fields.
Price Type
Taxable and Tax Class

 

Properties specific to the field types - Text and Telephone

Input Masking

Input for these fields can be predefined to a set format in - alphabets/ numeric/ alphanumerical/ special character

 a 

 alphabetic

 9 

 numeric. 

 Example : (99) 99999-9999 allow input like (12) 12345-1234.

 @,%,!,$ and ^.

 Special characters can be added which ever is required

 * 

 alphanumeric

 Dynamic

 The input can be in any format as customer feeds in 

 Eg:  a{1,3}-9{1,3} this will have a pattern of 3 letters followed by a special character and 3 digits

 3 digits. Eg: abc-123.

 

Properties specific to the field types Select, Multiselect, Radio, and Checkbox Group

Options
- Option Value Option key
- Option Text Display label for the option.
- Price The extra price added for the option.
- Price Type The type of price added to the option.

 

Properties specific to the field type Select and Multiselect

 Disable "Enhanced Select (Select2)" for select field

 Select2 supports advanced styling and searching options of remote data sets, and infinite scrolling of results. By enabling this option the enhanced select features will be disabled.
Maximum Selections The maximum number of options that can be selected from the multi-select field

 

Properties specific to the field types Date, Time, Month, Week, Datetime local

Default Date/Time/Month/

Week/Datetime local

You can assign a default date/time/month/week/datetime local for the field. This will be shown as the default set date when the checkout form is loaded.

Min. Date/Time/Month/

Week/Datetime local

The calendar will only show dates starting from the date/time/month/week/datetime local set in this field. Enter the value as per suggested format in the tooltip.

Max Date/Time/Month/

Week/Datetime local

The calendar will show dates upto the date/time/month/week/datetime local set in the field here. Enter the value as per suggested format in the tooltip.

 

Properties specific to the field type Datepicker

Date Format

Define the date format accepted for this field. The default format is dd/mm/yy. You can edit this format and rewrite it according to your requirements. These are the other general time formats you can use:

  • International - mm/dd/yy

  • Medium - d MM, y

  • ISO 8601 - yyyy-mm-dd

  • Short - d M, y

  • Full - DD, d MM, yy

  • With Text - 'Day' d 'of' MM 'in the year' yy
Default Date Set default date to be displayed. Specify the date in the format specified in the Date Format property. You may also specify the number of days to be offset from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or leave empty if you don’t want to set a minimum limit.
Min. Date The date picker calendar will only show dates starting from the date set in this field. Specify the date in the format yyyy-mm-dd. You may also specify the number of days to be offset from today (e.g. -7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1m -7d'), or leave empty for today.
Max. Date The calendar will only show dates up to the date set in this field. Specify the date in the format yyyy-mm-dd. You may also specify the number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or leave empty if you don’t want to set a maximum limit.
Year Range

This defines the range of years displayed in the year drop-down of the date picker calendar. The format is “from year: to year”. You can set the range in different ways as explained below:

  • Relative to current year ('-nn:+nn'): e.g. -5:+3 . If the current year is 2016, the dropdown will show years from 2011 till 2019.

  • Relative to the currently selected year('c-nn:c+nn'): e.g. c-5:c+3. If the year of the selected date is 2017, the dropdown will show years from 2012 till 2020.

  • Absolute values('nnnn:nnnn'): e.g. 1900:2018. The dropdown will show years from 1900 till 2018.

  • Combinations of above formats('nnnn:+nn','-nn:c+nn',etc.. ): e.g. 2012:+3. The dropdown will show years from 2012 till 2019 if the current year is 2016. eg -5:c+3. The dropdown will show years from 2011 till 2020 if the current year is 2016 and the selected date is in the year 2017. Note that this option only affects what appears in the year drop-down on the calendar popup. To restrict which dates may be selected from the calendar, use Min. Date and/or Max. Date properties.
Number Of Months The number of months to show at once on the date picker calendar.
Disabled Days Select the days of the week that need to be disabled on the calendar. For example, you may want to disable Saturdays and Sundays on the calendar.
Disabled Dates Enter dates that need to be disabled on the calendar in yyyy-mm-dd format separated by commas for multiple dates. This is useful if you want to disable specific days such as holidays. Ensure the dates are provided in the correct format. If you want to disable 17th January 2017 and 23rd March 2017 in the date picker you can fill this field with the value 2017-01-17,2017-03-23.

 

Properties specific to the field type Timepicker

Linked Date To link the Timepicker field to the Date Picker field, enter the field name of the date picker field in the Linked Date field. The time picker will display the time slots according to the chosen date of the linked Date Picker. If a day less than the current date is picked from the Date Picker, none of the time slots will be active to choose from. Similarly, while a day after the current date is picked from the Date Picker, all the time slots will be active.
Min. Time The starting time in the list. ex: 9:00 AM.
Max. Time The end time available in the list. ex: 7:00 PM.
Start Time Minimum time needed to choose the next time slot. For example, if you require a minimum 2 hour and 30 minutes to prepare, pack & deliver the order placed by your customers, then you can set the Start Time as 2h 30m so the customer will only be able to select a time which is after 2h 30m from now.
Time Step The interval which splits the time between the starting and ending time. In minutes, ex: 30.
Time Format Choose between a 12 hour or 24 hours format.

Disable time slot

 Choose any number of time slots that need disabled. Multiple entries must be separated with commas.

 Eg: 12:30-14:00,18:00-20:00

 

Properties specific to the field type File Upload

Maxsize (in MB) The maximum size for the file that can be uploaded.
Accepted File Types Extensions/formats for the file types that can be uploaded. Multiple formats can be inputted separated by commas.

 

Properties specific to the field types Heading, Label and Paragraph

Title The display text (content) for the title tag.
Title Type The type of title element. Ex. H1, H2 etc.
Title Color The colour of the title text.
Title Class A comma-separated list of CSS classes for the title tag.
Subtitle The display text (content) for the subtitle tag.
Subtitle Type The type of subtitle element. Ex. H1, H2 etc.
Subtitle Color The colour of the subtitle text.
Subtitle Class A comma-separated list of CSS classes for the subtitle tag.

 

Display Rules

Set display condition from this tab. Read the article Display Rules to know more about display rules and their configuration.

Repeat Rules

Set repeat rules from this tab. Read the article Repeat Rules to know more about repeat rules and their configuration.

 

Edit Field

You can change the properties of any field including default fields.

To edit a field:

  1. Navigate to the WooCommerce → Checkout Form → Checkout Fields page.
  2. Click on the pencil icon near the field you want to edit. 

    edit_field__1_.png

  3. A popup form will be displayed, you can edit any field property from this form.
  4. Once done with the edit, click on the Save button to save the changes.

Delete Fields

Once a field is deleted it cannot be restored.

To delete a field:

  1. Navigate to the WooCommerce → Checkout Form → Checkout Fields page.
  2. Select the fields you want to delete using the check-boxes on the left side of each field.
  3. Click on the Remove button from the action bar.

    remove_field__1_.png

  4. The deleted fields will be highlighted with a red color background.
  5. Click on the Save changes button to confirm the delete.


delete-fields-save.png

 

Rearranging Fields

To rearrange fields:

  1. Navigate to the WooCommerce → Checkout Form → Checkout Fields page.
  2. Move the field up or down using the move handle at the leftmost side of each field.
  3. Once fields are rearranged, click on the Save changes button to save the changes.

rearrange_fields.png

Copy a field (Duplicate field)

This option provides you with an easy way to create a new field by duplicating an existing field. This is helpful when you want to create a new field that is almost similar to an existing one.

To duplicate a field:

  1. Navigate to the WooCommerce → Checkout Form → Checkout Fields page.
  2. Click on the copy icon near the field you want to duplicate.

    duplicate_field__1_.png
  3. A popup to create a new field will appear with all the property except the field name, filled the same as that of the duplicated field.
  4. Enter the new field name, then click on the Save Field button to save the changes.

Enable/Disable Fields

To Enable or Disable field(s) → Select field(s) using the check-boxes at the left side of each field, then click on 'Enable' or 'Disable' button. The selected fields will be marked as disabled and shown in a grey background color.


enable_disable_field.png

Finally, click on the 'Save Changes' button to actually enable/disable selected fields.

 

Reset to Default Settings

To revert all changes, click on 'Reset to default fields' button. Then all your changes will be removed and reset to the WooCommerce default fields set.

 

reset_default_settings.png

 

Overriding a Default Field

When you create a new field with the field name of a default field, the existing field gets replaced by the custom field. All properties of the default field will also get replaced with new properties assigned.

 

 

Comments

0 comments

Please sign in to leave a comment.

Related articles

Powered by Zendesk