Checkout section Customization

General Description:

These are general properties for all the fields in Checkout Field Editor.
i) Click this icon to edit or modify fields.
ii)Click this icon to create a duplicate of field.
iii)Click this icon to remove field from checkout section.
We will see the features of each Fields one by one.

Field Properties

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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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.,[email protected] 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 section
Shipping section
Order 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
  • shipping_first_name - First Name
  • shipping_last_name - Last Name
  • shipping_company - Company Name
  • shipping_country - Country / Region
  • shipping_address_1 - Address Line1
  • shipping_address_2 - Address Line2
  • shipping_city - Town / City
  • shipping_state - State / Country
  • shipping_postcode - Postcode / ZIP
  • order_comments - Order Notes
Last modified 1d ago