Backup and Import SettingsThe saved settings of the plugin can be imported using the Backup and Import settings feature. Steps to Backup and Import settings:
- Go to Advanced Settings ⇨ Backup and Import settings.
- Copy the text from the Plugin Settings Data that you want to import.
- Insert the copied data to the Plugin Settings Data of the other website.
Override Default Address format & Include Custom Address Fields in Address DisplayBy default, billing and shipping Addresses are displayed as formatted by WooCommerce, which is different for each country and includes only default address fields. In addition to these default address fields, you can also display your custom fields which is created using WooCommerce Checkout Field Editor Pro plugin. Please follow below steps to include custom address fields in address display,
- Go to Custom Address Fields section in Advanced Settings page.
- Choose the custom billing fields form "Custom billing address keys" drop-down list those you want to include in billing address display.
- Choose the custom shipping fields form "Custom shipping address keys" drop-down list those you want to include in shipping address display.
- Override default address formats to include custom address fields in address display. Display address format is different for each country hence you may need to override address format for each country. Each country format should be separated by pipe (|).
- Click on the Save changes button.
[IMPORTANT]Following is a sample of the format entered in the Address Format Overrides field:
Watch this tutorial to see the complete steps of Custom Address Format Overriding: https://www.youtube.com/watch?v=ggXI8ZpOnAE
Include Custom Checkout Fields in PDF Invoices & Packing SlipsYou can include your custom checkout fields in PDF Invoices & Packing Slips which is generated by WooCommerce PDF Invoices & Packing Slips plugin. Please follow below steps to choose the fields which you want to include in Invoices.
- Go to Advanced Settings page.
- Tick the checkbox Enable PDF Invoice & Packing Slip support in Advanced Settings page.
- Choose the fields which you want to include in Invoices from the multi-select box Invoice Fields.
- Click on Save changes button.
- Go to Advanced Settings page.
- Tick the check box Enable PDF Invoice & Packing Slip support in Advanced Settings page.
- Choose the fields which you want to include in Packing Slips from the multi-select box Packing Slip Fields.
- Click on Save changes button.
Export Custom Checkout Fields/Include custom field to CSV ExportYou can export your custom checkout fields using WooCommerce Customer / Order CSV Export (by SkyVerge) plugin. Please follow below steps to choose the fields which you want to export.
- Go to CSV Export Fields section in Advanced Settings page.
- Select the checkbox "Enable CSV Export support".
- Choose the fields which you want to export from the multi-select box "CSV export columns".
- Click on Save changes button.
Steps to Export the Custom Fields using Customer/Order CSV Export plugin
- Go to Dashboard → WooCommerce → CSV Export.
- Click on the Export button below the page.
- A popup will appear which will automatically export the data into a CSV file.
Where do the custom checkout fields get saved or displayed?In WooCommerce Checkout Field Editor other than default fields, custom fields can also be added to the checkout form. When you add a custom field in checkout page it gets created either as Order Field (order meta data) or as User Field (user meta data) based on the settings.
Order Fields (Order Meta Data)The order meta data are the information provided which are specific to orders and has no direct relation to the user’s information. (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 Fields (User Meta Data)The user meta data are the information directly related to the user and will be the same for almost every order. 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"
Display PlacesWhen you add an custom checkout field it gets displayed in different pages and emails based on the selections you made in field settings using the check-boxes marked in below screenshot, The following screenshots show the different places where you can see the custom fields and the input provided by the customer.
Display in Thank You Page
Display in Order Detail Pages
Display in Customer Emails
Display in Admin Emails
Adding Date Picker in WooCommerce Checkout Page
This article explains the steps to add a Date Picker in WooCommerce Checkout page by correctly configuring WooCommerce Checkout Field Editor plugin.Using this plugin you can customize WooCommerce checkout fields. In this article we will focus on adding a custom Date Picker. You can learn more about the plugin and purchase it from here. For installation of the plugin please follow this article OnceWooCommerce Checkout Field Editor is installed, you can access plugin settings page via WooCommerce → Checkout Form. Always click on the 'Save Changes' button to save your changes.
Add New Date Picker FieldTo add a new Date Picker 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 need to select Date Picker from the Field Type select box. Fill the name for the field and other properties in the form and click on ‘Add New Field’ button. Finally click on the ‘Save Changes’ button so that the new changes take effect.
Date Picker Field Properties
- 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'
- 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.
- CSS 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. 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. Provide a negative value if you want to give discount.
- 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. You can leave this blank.
- 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.
- 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.
- 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 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 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