ceWooCommerce Checkout Field Editor |Overview

The WooCommerce Checkout Field Editor Plugin helps to customize the Checkout Form and Fieldsand add new Sections into the checkout form. With the plugin, you can add, edit, duplicate, remove or rearrange fields and sections (except default sections). The plugin also includes features like custom address fields, custom validators etc. This document covers the use of this plugin and reveals answers to common problems and issues. We encourage you to read this document if you are experiencing any difficulties.

Customize Your Checkout Page

Out of the box, WooCommerce has three sections of fields on the checkout form

• Billing — Payment and billing address section of the checkout page
• Shipping — Shipping section of checkout (Must be enabled)
• Additional Fields — Appear after the billing and shipping section of checkout, next to order notes (order notes must be enabled)

Using the WooCommerce Checkout Field Editor plugin, you can perform the following functions to the fields in the WooCommerce checkout form:

• Add new fields
• Edit existing and newly added fields
• Enable/Disable fields
• Duplicate fields
• Remove fields
• Rearrange field positions
• Add new sections
• Export custom field values using CSV export and Zapier support for third party applications
• Include custom field values to Standard WooCommerce Address Format
• Apply Validators for validating and comparing field input

You can access WooCommerce Checkout Field Editor settings page via, Dashboard → WooCommerce → Checkout Form.

Always click on the ‘Save Changes’ button to save your changes. If you need to add additional/custom sections you may do it by following instructions here. *Default and Custom Fields: All fields initially provided by WooCommerce are termed as default fields by Checkout Field Editor. Other than these default fields, custom checkout fields can be added to the checkout form using the Checkout Field Editor.

Add New Fields

1. To add a new field → Go to the section(Billing, Shipping, Additional or Custom) where you want to add the field
2. Click the ‘Add Field’ button. It will open a popup form where you can set the name and other properties of the custom field that need be added.
3. Fill the form and click on ‘Add New Field’ button. The field will be added to the section.
4. Finally, click on the ‘Save Changes’ button so that the new changes take effect.

Field Properties

For each field you need to define the properties. Correct selection of the properties defines the appearance and functionality of the field. All the properties available for the fields are listed below. Depending on the field type selected, the properties of the field may change.

• Name: The name property specifies the unique name of the field, which is used as the meta key to save value internally in database. This will NOT be displayed on the checkout page. Name must be unique. eg ‘lead_source’
• Field Type: This is the property that allows you to choose the type of field that needs to be added. It could be text, password, textarea, select, checkbox, radio etc.. Based on the ‘Type’ selected, the field properties displayed may change. These custom types are supported,
• Text — Standard text input.
• Hidden — A hidden field, where default values can be assigned and this field will not be displayed on the Checkout page.
• Password — Password text input, where it does not show the characters that the user types for security reasons.
• Telephone — Field specified to accept the telephone input, this input field provides a suitable keypad in the responsive screen.
• Email — The input value of this field will be validated for an email address format.
• Number — The input field of this field type is number and on the responsive screen, number keypad will be displayed.
• Textarea — A textarea field to accept long texts.
• Select — A dropdown/select box, where a single option can be selected out of the options provided as a drop-down.
• Multi-select — A multi-select box, where multiple options can be selected from a set of options provided.
• Radio — A set of radio inputs. Only one option can be selected at a time.
• Checkbox — A checkbox field, along with a caption describing a checkbox which is displayed adjacent to it.
• Checkbox Group — Group of checkbox fields, used to choose multiple options.
• Date picker — A text field with a JavaScript date picker as a drop-down.
• Time Picker — A text field with a JavaScript time picker as drop-down.
• File Upload — A field with an upload button to upload file into the checkout form.
• Heading — A label field used to display headings.
• Label — A field used to display normal text.
• Label: Label is the display name for the input field which will be shown on the checkout page. This will also be displayed on the Email, Thank You Page, Order Details Page etc.
• Description: Description is displayed below the field on the checkout page. Any additional details/description about the field can be displayed here.
• Default Value: You can assign a default value for the field by providing the value here. 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.
• Wrapper Class: This class helps to style the container that wraps Input field and the corresponding Label. You can also apply styles to Input Field and its Label separately using Input Class and Label Class attributes explained below.
• Input Class: In case you want the input field to be styled differently, you can add a css class for the field. You may need to define the styles for this class in your stylesheet.
• Label Class: Similarly, in case you need the Label to be styled separately you may define the CSS class name here.
• Validations: Choose validation rules 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 Advanced Settings section will appear in the select box.
• Price: In case you need to increase or decrease the cart total based on the user input in the checkout page you can do so using this field. For eg, if you want to add a checkbox in the checkout page where the user can select ‘Avail Expedited Delivery’ and add a 20$ to the total cost for providing that service, you may use this property. Provide a negative value if you want to give discount.If the field type is ‘Select’, you can define price for each option available in the Select box.
• Price Type: You can set the price type as ‘Normal’ which means the set price just get added to the total or ‘Percentage’ wherein the specified percentage of the cart total gets added to the total. Available types are:
• Fixed: A predefined price adds to the total.
• Custom: An amount entered by the shopper (for eg: Donations) will be added to the total price.
• Percentage of Cart Contents Total: A specific percentage of the cart total adds to the total price.
• Percentage of Subtotal: A specific percentage of the subtotal will be added to the total price.
• Percentage of Subtotal Ex Tax: A specific percentage of the subtotal excluding taxes will be added to the total price.
• Dynamic: A price per unit will be assigned, where the total price as per the units entered by the shopper will be added to the total price.
• Taxable and Tax Class: If a field contains a taxable price, the same can be made taxable by providing a Yes in the taxable field. You can choose a tax class from a list containing Standard, Reduced Rate, and Zero Rate. Other than these default tax classes, additional tax classes defined by the admin in taxes will also be available through this property.
• Max. Length: The max length property specifies the maximum number of characters allowed in the <input> element.
• Required: If you select this option the field will be shown as a required field in the checkout page. If a value is not entered or selected for this field a warning will be displayed.
• Enabled: By default, this property will be selected and field will be enabled. If you want to disable the field you need to deselect this. A disabled field will not be displayed on the checkout page. It will kept in the field list on the admin side in case you need to enable it again in the future. Use remove button if you want to remove a field permanently.
• 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 Admin Mails: By selecting this property, display the field and value in all WooCommerce mails sent to Admins.
• Display in Thank You Page: Check this option, and the field details will be displayed in your Thank You page.
• Display in Order Detail Pages: This property can be used to display your custom field and its value in Order Confirmation page (Thank You page) and Order Details page (Admin page).
• Order Meta Data: This property can be used to save your custom field and its value as part of order data (saved in order meta table), 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 Meta Data and will be displayed in multiple places. 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 and it’s value as part of user data (saved in user meta table), so that the custom field will available in user profile page and user can edit the value from there. The user meta data are the information directly related to the user and will be 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 Meta Data and will be displayed in multiple places. Custom user fields values can be updated from 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 My Account → Account details tab.

• Options: This property is applicable only for Select, MultiSelect, Radio and Checkbox Groupfields
• Option Value — This is a unique value used for backend calculations of the option provided. For example, if we are providing a country select option, we will give the option value for United States as ‘US’.
• Option Text — This is the display name in the checkout form for the given option.
• Price — This is the extra price added for the given option.
• Price Type — Price type is the type of price added to the given option.

The following properties are applicable for DATE PICKER fields only

The following properties are applicable for Datepicker fields only:

• Date Format: Define the date format accepted for this field. The default format is dd/mm/yy. You can edit this format and rewrite according to your requirements. These are the other general time formats you can use:
• International — mm/dd/yy
• Medium — d MM, y
• ISO 8601 — yy-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 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 specified in 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 for today.
• Max. Date: The calendar will only show dates up to the date set in this field. Specify the date in the format specified in Date Format property. 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 way want to disable Saturdays and Sundays on the calendar.
• Disabled Dates: Enter dates that need to be disabled on the calendar in yyyy-mm-ddformat 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

The following properties are applicable for TIME PICKER fields only

Time picker is a dropdown list with time listed at a defined interval. This input field helps users to choose the time for delivery, appointment etc. The following properties are applicable for Timepicker fields only:

• Linked Date: The current day link moves to the currently selected date instead of today.
• 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 an example, if you require 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 12 hour or 24 hours format.

The following properties are applicable for FILE UPLOAD only

File upload option allows the shopper to upload files on the checkout page.

• Maxsize (in MB): Input the maximum size for the file that a shopper can upload.
• Accepted File Types: Input the extensions/formats for the file types that a shopper can upload. Multiple formats can be inputted separated by commas.

The following properties are applicable for HEADING & LABEL fields only

A Heading or Label can be used in scenarios where you need to display text on the form. Heading will be useful to group fields by giving a heading to the section. A label can be used to give additional helpful tips or directions to the user. Below properties are applicable only for Heading and Label field types.

• Title: Label/Title will be displayed on the checkout page. This will also be displayed on the Email, Thank You Page, Order Details Page etc.
• Title Type: It defines the type of HTML tag for this field.
• Title Color: Use the color picker to give color to the Title.
• Title Class: In case you want the Title to be styled differently, you can add required CSS classes for the field. You may need to define the styles for this class in your stylesheet. Separate classes with comma.
• Subtitle: Subtitle will be shown on the checkout page near to the title. This will also be displayed on the Email, Thank You Page, Order Details Page etc.
• Subtitle Type: It defines the type of HTML tag for this field.
• Subtitle Color: Use the color picker to give color to the Subtitle.
• Subtitle Class: In case you want the Subtitle to be styled differently, you can add required CSS classes for the field. You may need to define the styles for this class in your stylesheet. Separate classes with comma.

The following properties are applicable for MULTI_SELECT fields only

• Maximum Selections: In this field, input the maximum number of options that can be selected from the multi-select field.

Conditional Fields

To add display conditions → click on the ‘Conditional Rules’ tab from Add/Edit popup. It will open a form where you can add multiple conditions based on cart items and other field(s) values. This feature lets you display fields and sections in the checkout page by setting rules and conditions. These conditions can be defined based on the product in the cart and

Edit Existing Fields

To edit any field properties, click on edit pencil icon at the right end of each field. It will open a popup form with the current values, there you can modify any values. After made the changes click on ‘Update Field’ button.

Finally, click on the ‘Save Changes’ button to take effect of the new changes.

Remove Fields

To delete field(s) → Select field(s) using the check-boxes at the left side of each fields, then click on ‘Remove’ button. The selected fields will marked as deleted and shows in red background color.

Finally, click on the ‘Save Changes’ button to actually remove selected fields.

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.

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

Change Display Order or Rearrange fields

To change the field(s) display order, move field up or down using the move handle at the left most side of the each field.

Click on the ‘Save Changes’ button to save your new display order.

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.

Duplicate fields

A duplicate of an existing field can be created by clicking on the ‘Copy’ button next to the pencil icon for editing. Then, a popup to a new field will appear with all the fields except the field name, filled same as that of the duplicated field. All you have to do is to assign a new field name and click on ‘Add New Field’.

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.