WooCommerce Checkout Field Editor
This document covers installation and 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.
WooCommerce 2.2 +, WordPress 3.8 or greater, PHP version 5.2.4 or greater, MySQL version 5.0 or greater
- Download the plugin .zip file from your ThemeHigh account.
- Go to WordPress Admin > Plugins > Add New to upload the plugin file you downloaded with the Choose File option.
- Click the Install Now button and activate the plugin.
You may see more information at: Installing and Managing Plugins
Customize Checkout Page
Out of the box, WooCommerce has three sections of fields on the checkout form
- Billing – Payment and billing address section of 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 this plugin you can customize WooCommerce checkout fields. You can access WooCommerce Checkout Field Editor settings page via WooCommerce > Checkout Form. Always click on the ‘Save Changes’ button to save your changes.
If you need to add additional sections you may do it by following instructions here.
Add New Fields
To add a new field, first go to one of the section(billing, shipping, additional) where you want to add the field, and then 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. Fill the form and click on ‘Add New Field’ button. Finally click on the ‘Save Changes’ button so that the new changes take effect.
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 checkout page. Name must be unique. eg ‘lead_source’
- Type: This is the property that allows you to choose the type of the field that need 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
- Password– password text input.
- Textarea– A textarea field.
- Select– A dropdown/select box. Requires options set.
- Multi-select– A multiselect box. Requires options set.
- Radio– A set of radio inputs. Requires options set.
- Checkbox– A checkbox field.
- Checkbox Group– Group of checkbox fields, used to choose multiple options.
- Heading– A label field used as heading of a section
- Label– A label field. Used for displaying 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.
- 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 email@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’ where in the specified percentage of the cart total gets added to the total.
- Max. Length: The maxlength 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 checkout page. If a value is not entered or selected for this field a warning will be displayed.
- Clear Row: This property is useful to align fields left and right on the same row. Selecting ‘Clear Row’ stops a field being shown on the same row as the previous field. Field will be forced to display on the next row.By default form-row-wide class is associated with a field. The input field takes the full width of the section in such case. The following field gets displayed in the next row. ‘Clear Row’ property doesn’t have any effect in such case. But if you want to have the field take the first half of the row, you need to explicitly add the class form-row-first for the ‘CSS Class’ property. Similarly if the field need to take the second half of the row the form-row-last class should be added to the ‘CSS Class’ property of the field. Selecting ‘Clear Row’ property will force the field to take the next row in this case.
- 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 Emails: If this property is selected, the field and its value will be displayed in 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 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.
- User Meta Data: This property can be used to save your custom field and its 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.
- Options: This property is applicable only for Select, MultiSelect, Radio and Checkbox Group fields
- Option Value
- Option Text
- Price Type
The following properties are applicable for Date Picker fields only
- Date Format: Define the date format accepted for this field. Available options are: dd/mm/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 is 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 belowRelative 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 2020Absolute values(‘nnnn:nnnn’): e.g. 1900:2018. The dropdown will show years from 1900 till 2018Combinations 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 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 the 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-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
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 time for delivery, appointment etc..
- Min. Time: The starting time in the list. ex: 9:00 AM.
- Max. Time: The end time available in the list. ex: 7:00pm.
- 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 Heading and 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 help tips or directions to the user. Below properties are applicable only for Heading and Label field types.
- Title: Label/Title will the 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.
To add display conditions, click on ‘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.
Edit Existing Fields
To edit any field properties, click on ‘Edit’ button at the right end of the each field. It will open a popup form with the current values, there you can modify any values. After made the changes click on ‘Edit Field’ button. Finally click on the ‘Save Changes’ button to took effect the new changes.
To delete field(s), first 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.
To enable or disable field(s), first select field(s) using the check-boxes at the left side of each fields, then click on ‘Enable’ or ‘Disable’ button. The selected fields will marked as disabled and shows in gray background color. Finally click on the ‘Save Changes’ button to actually enable/disable selected fields.
Change Display Order
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.