Form Field Customizer

BodyCommerce Mods are settings which are small or do not fit just within one of the other settings.

Form Field Customizer

The form field customizer is a tool that allows you to change the appearance of your input fields across your WooCommerce site. It is broken down into the following settings

Input/Textbox Field

This will change all the text inputs and textboxes (you will find this mostly on the checkout page). Most of the settings are self-explanatory such as text colour but some that might need explanation are below.

  1. Enable custom input/textbox field: If you would like to have a custom look for your select dropdown fields - enable this.
  2. Enable Placeholders: If you want to remove the labels of the inputs and instead move them to be placeholders, enable this.
  3. Input border-style: Change the border style: for example you can make it dashed, dotted or solid.

Quantity Field

This will change all the quantity select (you will find this mostly on the checkout page). Most of the settings are self-explanatory such as text colour but some that might need explanation are below .

  1. Enable custom quantity field: If you would like to have a custom look for your quantity field - enable this.
  2. Quantity style: Choose the style of the quantity box - currently we have:
    1. Horizontally left and right of the number. This places the minius and plus icons either side of the number.
  3. Max Width: Set the max width of the quantity box.
  4. Minus icon: Choose the icon you want to show for minus. Enter in the number for the divi icon - You can see a full list HERE . Just scroll down till you see the icons and some letter below. <br>Copy the numbers and letters that appear after "x". . So "&#x21;" - copy just the "21". "&#xe016;" - copy the "e016".
  5. Plus icon: Choose the icon you want to show for minus. Enter in the number for the divi icon - You can see a full list HERE  .  Just scroll down till you see the icons and some letter below. <br>Copy the numbers and letters that appear after "x" . .  So "&#x21;" - copy just the "21". "&#xe016;" - copy the "e016".
  6. Quantity border-style: Change the border style: for example you can make it dashed, dotted or solid.

Select Drop Down Field

This will change all the quantity select (you will find this mostly on the checkout page). Most of the settings are self-explanatory such as text colour but some that might need explanation are below .

  1. Enable custom select field: If you would like to have a custom look for your select dropdown fields - enable this.
  2. Disable Select2: If you have a custom select box on checkout, for example, select2 will render it differently so enable this to keep it consistent (and it will speed up your site as will remove some scripts).
  3. Input border-style: Change the border style: for example you can make it dashed, dotted or solid.
  4. Select icon: Choose the icon you want to show for minus. Enter in the number for the divi icon - You can see a full list HERE  .  Just scroll down till you see the icons and some letter below. <br>Copy the numbers and letters that appear after "x" . .  So "&#x21;" - copy just the "21". "&#xe016;" - copy the "e016".
  5. Icon distance from right: Change how far away from the right you want the icon.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us