Checkout section Customization
Last updated
Was this helpful?
Last updated
Was this helpful?
These are general properties for all the fields in Checkout Field Editor.
i) Click the Pencil icon to Edit or Modify the fields.
ii)Click the Copy icon to create a Duplicate of the field.
iii)Click the Delete icon to Remove the field from the Checkout section.
We will see the features of each Field one by one.
i) Text - enables you to collect the text data(short text).
Required - by enabling this, makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
ii) Email - enables you to collect mail-id.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text, e-mail, telephone.
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
iii) Telephone - enables you to collect contact number.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,....
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
iv) State - enables you to collect customers' state.(only in billing & shipping details)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like state, text, e-mail, telephone, date picker, time picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
v) Country - enables you to collect customers' country.(only in billing & shipping details)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like state, text, e-mail, telephone, date picker, time picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
vi) Color Picker - enables customers to chose colors of their choice.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
vii) Date Picker - enables you to collect date(like product delivery date).(PRO FEATURE)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
viii) Time Picker - enables you to collect time(like product delivery time).(PRO FEATURE)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
ix) DateTime Picker - enables you to collect both date&timte(like as devilery timing).(PRO FEATURE)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field
Type - select what type of text you need for this field like text field, e-mail, telephone, color, date picker, etc,...
Max Length - specifies the maximum number of characters allowed to enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
x) Number - enables you to collect numbers or count.
Required - by enabling this checkbox makes the field mandatory.
Label - enables to provide title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Min - specifies the minimum limit allowed to enter in this field.
Max - specifies the maximum limit allowed to enter in this field.
Step - provides the increment for the value mentioned in min & max.
Row Type - decides the size of this field normal, half left, half right, address.
xi) Text Area - enables you to collect a message or description(eg: feedback).
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Value - set default value for this field.
Type - select what type of text you need for this field like text area, tinymce, quill.
Max Length - specifies the maximum number of characters allowed to enter in this field.
Rows - specifies number of rows the text allowed enter in this field.
Row Type - decides the size of this field normal, half left, half right, address.
xii) Select - enables you to select from the drop-down list.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Options -
i) blue dot denotes which of these are selected by default.
ii) first field provides the label to the option.
iii) second field provides value to the option.
iv) click add option to add options.
v) click X red icon at right corner to delete option.
Row Type - decides the size of this field normal, half left, half right, address.
xiii) Checkbox - enables you to select multiple options.(PRO FEATURE)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Options -
i) blue tick denotes which of these are selected by default.
ii) first field provides the label to the option.
iii) second field provides value to the option.
iv) click add option to add options.
v) click X red icon at right corner to delete option.
Row Type - decides the size of this field normal, half left, half right, address.
xiv) Radio Group - enables you to select only one option from the provided options.(PRO FEATURE)
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Options -
i) blue dot denotes which of these is selected by default.
ii) first field provides the label to the option.
iii) second field provides value to the option value should be the same to all the provided options.
iv) click add option to add options.
v) click X red icon at right corner to delete option.
Row Type - decides the size of this field normal, half left, half right, address.
xv) Paragraph - enables you to provide quotes or messages on the checkout section.
Content - provides you to enter brief text based on your need.
Type - specifies content text type - paragraph, block-quote, address, output.
class - A space-separated list of CSS classes will be added to the input element.
xvi) Header - enables you to provide title or header.
Label - enables to provide title to the field.
Type - specifies heading type whether h1, h2, h3, h4, h5 or h6.
Class - A space-separated list of CSS classes will be added to the input element.
xvii) File Upload(PRO FEATURE) - enables you to collect files of selected format types specified by you in the settings.
Required - by enabling this checkbox makes the field mandatory.
Label - provides title to the field.
Help Text(PRO FEATURE) - provides a pop-up message in product page.
Placeholder - this 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 e-mail, provide a sample mail-id i.e.,name@gmail.com will be displayed as default format input. The short hint is displayed in the input field before the user enters a value.
Class - A space-separated list of CSS classes will be added to the input element.
Name - provides a unique name for the field & no two fields have the same name.
Type - select what type of file you need to upload for this field based on your settings.
NOTE :
Click Save Changes to save the changes you made in Checkout section.
Click Restore Default Fields, reset to default fields created fields get erased.
These field properties are common for billing,shipping,order and other details.
Fields can be overridden without changing the name textbox in default fields or use below provided name tags for default fields.
Name for default fields in Checkout Section:
billing_first_name - First Name
billing_last_name - Last Name
billing_company - Company Name
billing_country - Country / Region
billing_address_1 - Address Line1
billing_address_2 - Address Line2
billing_city - Town / City
billing_state - State / Country
billing_postcode - Postcode / ZIP
billing_phone - Phone
billing_email - Email Address
