Checkout section Customization

General Properties :

Input Fields will be same for all details tab in Checkout Field Section.
These are general properties for all the fields in Extra‌ Checkout Fields.
i) Click this icon to edit or modify fields.
ii)Click this icon to create a duplicate of fields.
iii)Click this icon to remove fields in forms.
We will see the features of each Fields one by one.

Field Properties

i) Text Field - enables you to collect the text data.
    Required - by enabling this, makes the field mandatory.
    Label - provides title to the field.
    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 comma-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.
ii) Email - enables you to collect mail-id.
    Required - by enabling this checkbox makes the field mandatory.
    Label - provides title to the field.
    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 comma-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) Phone - enables you to collect contact number.
    Required - by enabling this checkbox makes the field mandatory.
    Label - provides title to the field.
    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 comma-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.
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.
    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 comma-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.
    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.
    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 comma-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 country, 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.
vi) 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.
    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 comma-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.
vii) Date Field - enables you to collect date data.(PRO FEATURE)
    Required - by enabling this checkbox makes the field mandatory.
    Label - provides title to the field.
    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 comma-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 - sets the default format for this field.
viii) Text Area - enables you to collect a message or description.
    Required - by enabling this checkbox makes the field mandatory.
    Label - provides title to the field.
    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 comma-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.
ix) 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.
    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 comma-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.
      iv) click add option to add options.
      v) click X red icon at right corner to delete option.
x) Checkbox - enables you to select multiple options.(PRO FEATURE)
    Required - by enabling this checkbox makes the field mandatory.
    Label - provides title to the field.
    Class - A comma-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 is 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.
xi) 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.
    Class - A comma-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.
xii) 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 comma-separated list of CSS classes will be added to the input element.
xiii) 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 comma-separated list of CSS classes will be added to the input element.
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 Details
Shipping Details
Order Detais
    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 17d ago