# Checkout section Customization ## **General Description:** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FtM7qmTNTGodkmrNAHARB%2FCheckout%20Field%20E%20\(3\).png?alt=media\&token=5e3be54e-f9ce-435b-bdff-b34b91f3f69c) 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. ## Field Properties i) **Text** - enables you to collect the text data(short text). ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FFrkUa0t0TFehAxQCPENb%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom.png?alt=media\&token=4ab5b5c0-475b-4dc2-b398-ddcf836d6b1c) * 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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FgVRTd6JL7FCeuiweBcBE%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(1\).png?alt=media\&token=011ebae2-43fe-48c9-bd1e-f35c8d73bf30) * 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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FIffdDYcwtmeUC7X55nXH%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(4\).png?alt=media\&token=495e689d-b1ff-438a-90ee-d31b9c14a09c) * 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., 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*) ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FVz8JnbckltGpjmMimgwQ%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dbilling.png?alt=media\&token=937c2b97-a6f5-4903-abfa-43962bea7a18) * 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., 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*) ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FpDOePCrAidYBGeLfnOTz%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dbilling%20\(1\).png?alt=media\&token=d4e47b8d-ddc8-463f-925c-ec2f1035e06a) * 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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FAwkZaZWm5bybnB0kT05D%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(5\).png?alt=media\&token=45b24af7-273e-4400-92de-393dd8a05361) * 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., 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)** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FBaCti3qmC7PywXvnZddn%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(6\).png?alt=media\&token=835fadf1-099c-424e-a795-00098c07044d) * 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., 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)** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FqTemvMIExLrDCFAoTXss%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(8\).png?alt=media\&token=5f069745-db2a-4e6d-bc15-accb463d9add) * 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., 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)** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FJIhjhbNxlpFgsiUxHpjj%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(9\).png?alt=media\&token=b316f8c7-0e13-4543-ba24-bcc4d8905552) * 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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FQkSqJOaqrNcatnfx6RPt%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(10\).png?alt=media\&token=5e9d515e-5b3b-4590-b273-57ef0ec87e40) * 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., 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). ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FlNA2sgFWBeJzoCDHgu27%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(11\).png?alt=media\&token=6f8c501f-43b3-468e-9541-774279446822) * 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., 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FlszGw7Oqt0tWCMBy7kVz%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(12\).png?alt=media\&token=10b8070d-1877-44b6-91eb-d490be0ef384) * 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., 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)** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2F113Qw0VoAKu8gnapaeT2%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(15\).png?alt=media\&token=bad6014a-ba74-4e36-83c2-a209800ec1d2) * 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)** ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2Fq7BCUxWcAGeiHVMEB6Sk%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(14\).png?alt=media\&token=fb8e9031-eb77-429b-940a-ebe65829c412) * 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjDxbD7pNRWklUeWT0-%2F-MkEBMgkGHHSK-kFfLbp%2F-MkERXE_KiV-fM-FKnzT%2Fpara.png?alt=media\&token=7b7343b4-b128-4b9c-9c49-fb06e8e736ee) * 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MjDxbD7pNRWklUeWT0-%2F-MkEBMgkGHHSK-kFfLbp%2F-MkERdOih6TG93AP8FoB%2Fheader.png?alt=media\&token=ddc12b01-0e4b-43de-9c6d-4302dfb1b1ca) * 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. ![](https://3843356000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjDxbD7pNRWklUeWT0-%2Fuploads%2FPQnzaXZUGhvWXFoJyNex%2Fdemo.themeparrot.net_extra-checkout-fields_guest15139904_wp-admin_admin.php_page%3Decffw_editor%26tab%3Dcustom%20\(16\).png?alt=media\&token=3a9da57d-0737-44d5-aeb9-159429dbf043) * 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., 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: {% tabs %} {% tab title="Billing 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 {% endtab %} {% tab title="Shipping section" %} * 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 {% endtab %} {% tab title="Order section" %} * order\_comments - Order Notes {% endtab %} {% endtabs %}