JS Validation

The plugin allows you to enable validation in JS for the fields provided in the checkout form.
If you enable “JS Validation”, customers who leave a required field blank, will receive a dynamic notification informing them to insert the required data.

Checkout fields validation

By enabling “VAT JS Validation” the VAT field will automatically identify the required VAT code based on the country picked by the customer.

JS

Tooltips

Tooltips appear each time a customer clicks on a required field. You can show them enabling relative option.

Tooltip

Style options

Style Options

You can use this section to customize the look of the checkout field, including options such as dynamically changing the frame color of required fields according to correct or wrong data entry.

Field Color

With the Checkout Style option you can choose if you want the checkout to be arranged in a single column or in two columns (as set by default on WooCommerce).

Checkout style - One column

Checkout style - Default

Checkout fields

Checkout Fields

In the second option tab, “Checkout Fields” you can edit the checkout related fields.

These fields are divided in three subcategories:

  • “Billing Fields” – Allows you to edit the “Billing” fields.
  • “Shipping Fields” – Allows you to edit the “Shipping” fields.
  • “Additional Fields” – Allows you to edit the additional fields such as customer notes.

Editing existing fields

The default WooCommerce fields cannot be deleted, but only disabled. You can still edit them by clicking on the “Edit” button you will find in each field.

Edit Field

In this form you will find:

  • “Label” – Chose the title related to a specific field.
  • “Placeholder” – Chose the text customer are going to read within the field.
  • “Tooltip” – (This field is only going to appear if you have chosen to “Enable Tooltip” in the “Settings” page). Chose the text that will be displayed in the field tooltip.
  • “Position” – Choose the position of the field in respect to the line in which it’s inserted. “First” to set it on the left, “last” to set it on the right, “Wide” if you want it to take up the whole line space.
  • “Class” – Allows you to set graphical CSS rules related to the field.
  • “Label Class” – Allows you to set graphical CSS rules related to the label.
  • “Validation” – Chose whether the field requires any kind of validation since it may require information such as phone number, VAT, country, email or zip code.

At the bottom of this panel you will find two checkboxes:

  • “Required” – Set a field as required.
  • “Clear Row” – In order for the fields to work correctly, each time a field is entered as First (in Position) and followed by a Last field, this second field needs to have the Clear Row option checked.

Create a new field

In the same page you will also find the option that allows you to create new fields, entering the name and clicking on Add Field.

New Field

The newly created form will have the same features as the editing form, with a few extra fields:

  • “Type” – Allows you to chose the type of the field you are going to create, including text, password, multiple selection, date, time, title.
  • “Display in emails” – Chose whether or not you wish yo display the field you are creating in the order email as well.
  • “Display in Order detail pages” – Chose whether or not you wish to display the field you are creating in the summary page as well.