# Home

Themeparrot Wordpress Plugins List

{% content-ref url="/pages/-MkDvWKBdYhEDjBiTkF-" %}
[Checkout Field Editor and Manager for WooCommerce](/checkout-field-editor-and-manager-for-woocommerce/overview)
{% endcontent-ref %}

{% content-ref url="/pages/-MjDyuQqbJYbttAU3kp-" %}
[Extra Product Options (Custom Addons) for WooCommerce](/extra-product-options-custom-addons-for-woocommerce/overview)
{% endcontent-ref %}

{% content-ref url="/pages/-MjDyhD2JqWbzZt-DUXJ" %}
[Weight Based Pricing for WooCommerce](/weight-based-pricing-for-woocommerce/overview)
{% endcontent-ref %}


# Overview

### **Checkout Field Editor and Manager for WooCommerce**

If you are doing an online business, have you thought anytime customized Checkout section makes the business move to next level? yeah, this is the page where your shop visitors turn to customers.&#x20;

This plugin is going to support you to make an Customized Checkout Section to your Business site.&#x20;

### **Description**

WooCommerce Extra checkout Field Plugin built to add personalized fields in checkout page. This brings WooCommerce Checkout section user-friendly interface and easy to manage details of customers.

You can customize the checkout page using 17+ field types. It enable changes in the default settings of WooCommerce checkout page like add & modify fields in billing details, shipping details and orders.

## Features

**Built for WooCommerce**

Extra Checkout Field Editor Plugin designed to work natively with WooCommerce. This means that you can take advantage of the security and power of the world’s most popular eCommerce platform.

**WordPress Theme Friendly**

Extra Checkout Field Editor works seamlessly with the majority WooCommerce compatible themes, meaning you have countless options to choose from when jazzing up your store and marketing your products to customers.

**WPML Compatible**

Extra Checkout Field Editor is compatible with the popular WordPress Multilingual (WPML) plugin. WPML lets you translate website content into different languages.

**Reorder Fields**

Field order can be changed with simple drag & drop options.This makes plugin more easy to use. No need to code & debug and don't sucks your time in this process.


# Installation & Activation

**STEP 1**: On the [**ThemeParrot** ](https://themeparrot.com/)page, select **Plugins** from the menu. Navigate to WordPress plugins.

**STEP 2**: Choose  **Checkout Field Editor and Manager for WooCommerce**. Click **Purchase**. Purchase the Plugin on the **Checkout** page.

![](/files/RSc6ho34Ld72OdLkJKSd)

**STEP 3**: Select the **Profile** icon. Select **PURCHASE HISTORY** to view the purchased plugin.

**STEP 4**: Select **View Details and Downloads** to view the **plugin zip file**. Select **View Licenses** to abstract your **license key**.

![](/files/FSFhvRRrTVfKBVioUCNt)

**STEP 5**: Click the **zip file** to **download** the **plugin zip file**.

![](/files/pABVPYHum4NJnUmNACkX)

**STEP 6**: **Log in** to your **WordPress Admin** section and go to **Dashboard -> Plugins**.

**STEP 7**: Navigate to **Plugins**. click **Add New** button.

![](/files/-MjIneMuM0SPwQZX31Q9)

**STEP 8**: Now, this shows the **Upload Plugin** button. Click the button to browse the downloaded file.

![](/files/-MjImrEk2NEzXUsiq-e7)

**STEP 9**: Click the **Choose File** button to browse the Plugin Zip file, you have just downloaded.

**STEP 10**: Hit the **Install Now** button to install the plugin in your WordPress.&#x20;

![](/files/-MjImx87HvQNRLnVlNhv)

**STEP 11**: Click **Activate** to activate the plugin on your **WordPress** site.

![](/files/4resRU407yORpt6WJvdp)


# Extra Checkout Fields Settings

#### Switching from Block-Based to Shortcode-Based Checkout

The current block-based checkout has certain limitations compared to the shortcode-based checkout because of woocommerce update, particularly when it comes to adding new fields. We are continuously working to improve this experience

Follow these steps to change the checkout block to a shortcode:

<figure><img src="/files/z9ApcnjGoTAGxTyUk5Po" alt=""><figcaption></figcaption></figure>

**Step 1: Access the Checkout Page**

1. Navigate to the Pages section in the admin dashboard.
2. Select the Edit option for the Checkout page.

<figure><img src="/files/hShM6QjaSw3reKfgU2Fh" alt=""><figcaption></figcaption></figure>

**Step 2: Modify the Checkout Block**

1. Click on the block you want to customize to select it.
2. From the toolbar, click the Checkout icon and choose Classic Shortcode.

<figure><img src="/files/Ll4XzgKR9OmNpGndcGpt" alt=""><figcaption></figcaption></figure>

**Step 3: Save and Activate Changes**

1. Once you've selected the shortcode, click SAVE to activate it.
2. The page will be updated to reflect the shortcode customization.

**Removing the Shortcode**

* If you wish to revert to the original block format, select Transform into blocks from the toolbar. This will convert the shortcode back to editable blocks.

&#x20;                                                           [**Extra Checkout Fields Settings**](#user-content-fn-1)[^1]

In the Dashboard. Navigate to **WooCommerce -> Checkout Field Editor**.

To modify the settings of Checkout Section.

## **Settings**

![](/files/lVU4eR9qvsT8GGordz0f)

* **License Key** - enter the provided license key to enable the **PRO FEATURES** in your WooCommerce site.
* **Heading -** provides title to the custom section.
* **Position** - decides the position of custom section in checkout.
* **Form Position** - specifies the Add To Cart button position in the product page whether to get displayed before or after the forms.
* **Edit on Add** - by enabling this opens the field in edit mode
* **Remove Warning** - by enabling this shows alert while removing a field in form
* **Control Position** - decides the input fields position in form builder
* **Enable** - enabling this checkbox makes you use the file upload field in form creation.
* **Maximum Size** - specifies the size of the file. File cannot be uploaded above this specified size.
* **File Formats(image, text, document, font, compress)** - choose format types to your choice.

**NOTE:**

**Position** - decides the position of custom section.

![](/files/VgWBe3Hbg8ydAAzN9biX)

* Before Customer Details - Custom section will be placed at the top of all sections.
* After Customer Details - Custom section will be placed at the end of all sections
* Before Billing Details - Custom section will be placed before billing section.
* After Billing Details - Custom section will be placed after billing section.
* Before Registration Form - Custom section will be placed before registration form.
* After Registration Form - Custom section will be placed after registration form.

If you have registration form in your site for the guest visitors to fill before placing orders, you can place this section with that form by selecting this option.

* Before Shipping Details - Custom section will be placed before shipping section.
* After Shipping Details - Custom section will be placed after shipping section.

If you place custom section with shipping, it gets viewed only after enabling ship to different address.(by default it gets hidden with shipping details).

* Before Additional Information (order notes) - Custom section will be placed before order section.
* After Addtional Information(order notes) - Custom section will be placed after order section.
* Before Order Review(your order) heading -  Custom section will be placed before your order details heading.
* Before Order Review(your order) - Custom section will be placed before your order details.
* After Order Review(your order) - Custom section will be placed after your order details.

**Edit on Add -** by enabling this, you can open add fields in edit mode by default.

![](/files/-MkE99JdBex5D8Khe53X)

**Remove Warning -** by enabling this, asks you to confirm before deleting a field.

![](/files/-MkETO3wi7lpxCZWgK_3)

**Control Position -** decides whether the field list should be in left or right(by default in right).

{% tabs %}
{% tab title="LEFT" %}
![](/files/zmRC650PvwyGBabcGVos)

{% endtab %}

{% tab title="RIGHT" %}
![](/files/XcTeGRgRtaqjbJHxJkQh)

{% endtab %}
{% endtabs %}

**Save Changes -** click this to save the changes you made in checkout section.

**Reset -** click this to delete the created changes and reset default settings.<br>

[^1]:


# Checkout section Customization

## **General Description:**

![](/files/p6bzvSPFTv70n8jwwH52)

These are general properties for all the fields in Checkout Field Editor.

i) Click the Pencil icon to **Edit** or **Modify** the fields.

<figure><img src="/files/eQFmIBHYffJukyPh1W7Z" alt=""><figcaption></figcaption></figure>

ii)Click the Copy icon to create a **Duplicate** of the field.

<figure><img src="/files/vDFI9o5dSYJb3Onc4PRB" alt=""><figcaption></figcaption></figure>

iii)Click the Delete icon to **Remove** the field from the Checkout section.

<figure><img src="/files/Sah9vtRqwzZCDsJZq83i" alt=""><figcaption></figcaption></figure>

We will see the features of each **Field** one by one.

## Field Properties

i) **Text** - enables you to collect the text data(short text).

![](/files/bppV91UsFE4I8lasXS5Z)

* 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.,<name@gmail.com> 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.

![](/files/MD4f4EjXa2PCYgKetoBy)

* 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.,<name@gmail.com> 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.

![](/files/TWbUXy04xLLsAjCAhQlX)

* 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.,<name@gmail.com> 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*)

![](/files/i5vaXkl9YXSXFr2JPDjT)

* 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.,<name@gmail.com> 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*)

![](/files/6ccpNlTw26bzPrbBsdal)

* 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.,<name@gmail.com> 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.

![](/files/XccAezBMav6M4RsV38Tm)

* 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.,<name@gmail.com> 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)**

![](/files/qjKpTSvrkehU2C590tGr)

* 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.,<name@gmail.com> 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)**

![](/files/0kFl5T8zo0n5PNPHPtkx)

* 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.,<name@gmail.com> 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)**

![](/files/UMqZw2KuujikAlgerABe)

* 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.,<name@gmail.com> 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.

![](/files/nF0Kl0PGXgTfmp8IRHeZ)

* 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.,<name@gmail.com> 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.&#x20;
* 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).

![](/files/fFQbdv4JxmT4IE6fC3XT)

* 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.,<name@gmail.com> 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.

![](/files/53l7reHY1FeWiZhUPm9T)

* 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.,<name@gmail.com> 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)**

![](/files/A8ouKH6dnZW5thR9Uwxf)

* 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)**

![](/files/F5vE5pmes0knsGBXqJPK)

* 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.

![](/files/-MkERXE_KiV-fM-FKnzT)

* 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.

![](/files/-MkERdOih6TG93AP8FoB)

* 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.

![](/files/N2NNBMy7POrM1Y82OE8H)

* 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.,<name@gmail.com> 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 :**&#x20;

* 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&#x20;
* 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 %}


# Sample Checkout Section

### BackEnd Checkout Form

{% tabs %}
{% tab title="Billing section" %}
![](/files/mqYnANoFrvYjrcu5JXfF)
{% endtab %}

{% tab title="Shipping section" %}
![](/files/GT6ErHvQkkeXE2v69Gk6)
{% endtab %}

{% tab title="Order section" %}
![](/files/GFfbHIf9tTgRhb2rgy0y)
{% endtab %}

{% tab title="Custom section" %}
![](/files/xYbH0QzhGY6R1u95ZbTb)
{% endtab %}
{% endtabs %}

### FrontEnd Checkout Section

{% tabs %}
{% tab title="Billing section" %}
![](/files/IjoVAXadvtm19XEB0mhb)
{% endtab %}

{% tab title="Shipping section" %}
![](/files/j22737Im4Oedzu3oypAv)
{% endtab %}

{% tab title="Order section" %}
![](/files/NimxwiP5sEMqLOtOLOir)
{% endtab %}

{% tab title="Custom section" %}
![](/files/abDI9AWRiyuWbSYMQv6M)
{% endtab %}
{% endtabs %}

### Order Details

{% tabs %}
{% tab title="FrontEnd" %}
Customer can view their by **My account -> orders**

![](/files/btS9osYPXCsAls70YUkE)
{% endtab %}

{% tab title="BackEnd" %}
View this section: **Woocommerce-> Order** (if admin make changes in fields here it will get updated in Customer's My order section).

![](/files/7EQvdNzcTIThkrgtXHVe)
{% endtab %}
{% endtabs %}


# License & Support

### Manage License

**STEP 1:** In the **themeparrot** page. Select **Profile** icon. Select **PURCHASE HISTORY** to view the purchased plugin.

**STEP 2**: Select **View Licenses** to abstract your **licenses key**.

![](/files/FSFhvRRrTVfKBVioUCNt)

**STEP 3:** In **License** tab choose the plugin where you need to modify your domain for the licensed PRO Version.

i) Click **Extend license** to extend accessibility of license period.

ii) Click **Manage Sites** to manage the plugin usage in specified sites.

iii) Click **View Upgrades** to upgrade plugin subscription plans.

![](/files/7F81ZuMpjeaOLIL09hCP)

**STEP 4:** Click **Deactivate** to deactivate the PRO Version of Plugin in existing site.

**STEP 5:** Provide the domain name in the required space. Click **Add Site** to use the **PRO Version** of the Plugin in the specified sites.

![](/files/76a6BAzcFPgqyl3Nlnmf)

### Support <a href="#support" id="support"></a>

Please visit our [support forum](https://themeparrot.com/support-request-form/).

you can send an email to <support@themeparrot.com>.​

Thank you again for your purchase and feel free to contact us with any questions regarding this Plugin.

### **Themeparrot Team** <a href="#themeparrot-team" id="themeparrot-team"></a>


# Overview

### **Extra Product Options (Custom Addons) for WooCommerce**

Product Addons for WooCommerce and Custom Product Options helps you add custom product options and allows customers to personalise their purchase.

Add product options like text boxes, checkboxes, dropdowns, radio inputs, color picker, date fields and more.

The plugin provides an easy to use drag and drop form builder to add extra fields to your products.

## Features

**Built for WooCommerce**

Product addon plugin designed to work natively with WooCommerce. This means that you can take advantage of the security and power of the world’s most popular eCommerce platform.

**WordPress Theme Friendly**

Product addon plugin works seamlessly with the majority WooCommerce compatible themes, meaning you have countless options to choose from when jazzing up your store and marketing your products to customers.

**WPML Compatible**

Product addon plugin is compatible with the popular WordPress Multilingual (WPML) plugin. WPML lets you translate website content into different languages.

**Reorder Fields**

Field order can be changed with simple drag & drop options.This makes plugin more easy to use. No need to code & debug and don't sucks your time in this process.


# Installation & Activation

**STEP 1**: On the [**ThemeParrot** ](https://themeparrot.com/)page, select **Plugins** from the menu. Navigate to WordPress plugins.

**STEP 2**: Choose  **Extra Product Options (Custom Addons) for WooCommerce**. Click **Purchase**. Purchase the Plugin on the **Checkout** page.

**STEP 3**: Select the **Profile** icon. Select **PURCHASE HISTORY** to view the purchased plugin.

<figure><img src="/files/lV1QMr5RFCsm4KxXhV6d" alt=""><figcaption></figcaption></figure>

**STEP 4**: Select **View Details and Downloads** to view the **plugin zip file**. Select **View Licenses** to abstract your **license key**.

![](/files/FSFhvRRrTVfKBVioUCNt)

**STEP 5**: Click the Zip file link to **Download** the **plugin zip file**.

![](/files/YbNP0Jg8LHafNGKgpXQV)

**STEP 6**: **Log in** to your **WordPress Admin** section and go to **Dashboard -> Plugins**.

**STEP 7**: Navigate to **Plugins**. click the **Add New** button.

![](/files/-MjIneMuM0SPwQZX31Q9)

**STEP 8**: Now, this shows the **Upload Plugin** button. Click the button to browse the downloaded file.

![](/files/-MjImrEk2NEzXUsiq-e7)

**STEP 9**: Click the **Choose File** button to browse the Plugin Zip file, you have just downloaded.

**STEP 10**: Hit the **Install Now** button to install the plugin in your WordPress.&#x20;

![](/files/-MjImx87HvQNRLnVlNhv)

**STEP 11**: Click **Activate** to activate the plugin in your **WordPress** site.

<figure><img src="/files/FzkjDRFvUjGla0drWyBb" alt=""><figcaption></figcaption></figure>

...


# Addon Customization Settings

In the Dashboard. Navigate to **Extra Product Addons ->Settings**.

To modify the settings of the form.

## Free Features

![](/files/nzSDeh8VRrICMcJPxnxF)

* **Form Style** -  choose form style from provided options.
* **Form Order** - enables you to decide the form order - whether to get displayed in ascending or descending. This will be used for multiple form usage.
* **Form Position** - specifies the Add To Cart button position on the product page whether to get displayed before or after the forms.
* **Edit on Add** - by enabling this, the checkbox opens the field in edit mode.
* **Remove Warning** - by enabling this, the option shows an alert while removing a field from the form.
* **Control Position** - decides the input field position in the form builder

Select the **Green Text** to **upgrade** to the **PRO** version

## **Pro Features**

![](/files/0w5zWMBw8BFdsQT75ZHi)

* **License Key** - enter the provided license key to enable the **PRO FEATURES** in your WooCommerce site.
* **Form Style -** by enabling this you can align the fields on the product page.
* **Form Order** - enables you to decide the order of the form - whether to get displayed in ascending or descending. This will be used in multiple form usage.
* **Form Position** - specifies the Add To Cart button position on the product page whether to get displayed before or after the forms.
* **Edit on Add** - by enabling this, the checkbox opens the field in edit mode
* **Remove Warning** - by enabling this, the option shows an alert while removing a field from the form
* **Control Position** - decides the input field position in the form builder
* **Product Price -** show or hide product price based on option selection
* **Options Price -** show or hide options price in the product
* **Total Price -** show or hide the total price of the product based on the purchased option.
* **Enable** - enabling this checkbox makes you use the file upload field in form creation.
* **Maximum Size** - specifies the size of the file. The file cannot be uploaded above this specified size.
* **File Formats(image, text, document, font, compress)** - choose file formats to get uploaded.

**NOTE:**

**Edit on Add -** by enabling this, you can open additional fields in edit mode by default.

![](/files/AZKBfsYdYHieUabQR8Gh)

**Remove Warning -** by enabling this, an option pop-up to ask you to confirm before deleting a field.

![](/files/-MkETO3wi7lpxCZWgK_3)

**Control Position -** decides whether the field list should be on the left or right.

{% tabs %}
{% tab title="LEFT" %}

<figure><img src="/files/05f46OxQOBROAOdDIrxy" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="RIGHT" %}

<figure><img src="/files/xDOuSOuRYWujOaM0RpWT" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

##


# Form Builder

**STEP 1:** Navigate to **Extra Product Addon -> Add New Form** to create a new form or Choose **All Forms** to modify the existing forms.

![](/files/h3z2n6YUeQWSeFUJZTwQ)

**STEP 2:** They are **Extra Product Options (Custom Addons)**.

<figure><img src="/files/xUuNG0G70TysWR6Nld9k" alt=""><figcaption></figcaption></figure>

## General Properties

These are general properties for all the fields in Extra Product Addons.

i) Click the Pencil icon to **Edit** or **Modify** the fields.

<figure><img src="/files/eQFmIBHYffJukyPh1W7Z" alt=""><figcaption></figcaption></figure>

ii) Click the Copy icon to create a **Duplicate** of the field.

<figure><img src="/files/vDFI9o5dSYJb3Onc4PRB" alt=""><figcaption></figcaption></figure>

iii) Click the Delete icon to **Remove** the field from the Checkout section.

<figure><img src="/files/Sah9vtRqwzZCDsJZq83i" alt=""><figcaption></figcaption></figure>

We will see the features of each **Field** one by one.

## Field Properties

i) **Text** - enables you to collect the text data.

![](/files/Z4pd4dyKuEcxB66ssvNp)

* 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.,<name@gmail.com> 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, color.
* Max Length - specifies the maximum number of characters allowed to enter in this field.

ii) **Email** -  enables you to collect mail-id.

![](/files/cOn5q9MK9KkQWrZxhlr2)

* 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.,<name@gmail.com> 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, color.
* Max Length - specifies the maximum number of characters allowed to enter in this field.

iii) **Telephone** - enables you to collect contact number.

![](/files/AZKBfsYdYHieUabQR8Gh)

* 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.,<name@gmail.com> 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

iv) **Color Picker** - enables you to provide color options.

![](/files/4S6HSQ01TOBnzD6T5IMs)

* 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.,<name@gmail.com> 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, color.
* Max Length - specifies the maximum number of characters allowed to enter in this field.

v) **Range / Slider**- allows customers to visually select options within a specific range. **(PRO FEATURE)**

<figure><img src="/files/aZ8LZe0TDm8Uv7qaah5a" alt=""><figcaption></figcaption></figure>

* Required - enabling this checkbox to make the field mandatory.
* Label - provides title to the field.
* Help Text(**PRO FEATURE**) - provides a pop-up message on the 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. ,<name@gmail.com> 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 the default value for this field.
* Type - select what type of text you need for this field like text, e-mail, telephone, or color.
* Min. Value - it represents the lowest selectable value within the range.
* Max. Value - it represents the highest selectable value within the range.
* Step Value - it determines the increment or decrement value when adjusting the slider position
* Slider Color - it is the visual appearance or hue of the slider component on the product page.

vi) **URL**- allows for adding a web address or link. **(PRO FEATURE)**

<figure><img src="/files/DGjJHPmJew0HDIf5FrLj" alt=""><figcaption></figcaption></figure>

* Required - enabling this checkbox to make the field mandatory.
* Label - provides title to the field.
* Help Text(**PRO FEATURE**) - provides a pop-up message on the 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. ,<name@gmail.com> 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 the default value for this field.
* Type - select what type of text you need for this field like text, e-mail, telephone, or color.
* Max Length - specifies the maximum number of characters allowed to enter this field.

vii) **Date Picker** - enables you to collect date data.

![](/files/DHUUYnRYmF8vMNzwZV3S)

* 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.,<name@gmail.com> 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 - sets the default format 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.

viii) **Time Picker** - enables you to collect time(like product delivery time).**(PRO FEATURE)**

![](/files/Z1h3T2cWEaDqqOjlLJ1S)

* 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.,<name@gmail.com> 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.

ix) **DateTime Picker** - enables you to collect both date& time(like as delivery timing). **(PRO FEATURE)**

![](/files/cZcXRfH8aOrtUg4cwgJU)

* 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.,<name@gmail.com> 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-time picker, etc,...
* Max Length - specifies the maximum number of characters allowed to enter in this field.

x) **Number** - enables you to collect numbers or count.

![](/files/WPqnBv8C7kUrrS5Chhqj)

* 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.,<name@gmail.com> 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 - specifies value intervals between min & max.

xi) **Text Area** - enables you to collect a message or description.

![](/files/rcdR7QdMKlgaUm5BIH1H)

* 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.,<name@gmail.com> 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 in this field.

xii) **Select** - enables you to select from the drop-down list.

![](/files/eWDmU5HVpx0Aq0hRkUgz)

* 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.,<name@gmail.com> 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.
* Allow Multiple selections(**PRO FEATURE**) - enable this to select more than one options.
* Options -&#x20;
  * i)   blue dot denotes which of these is selected by default.
  * ii) the first field provides a label for the option.
  * iii) the second field provides value to the option.
  * iv) click add the option to add options.
  * v) click X red icon at the right corner to delete that option.
* Set Price(**PRO FEATURE**) -
  * **In Price -** specifies the value based on the options selected & price rate of the produc&#x74;**.**
  * **In Percentage -** specifies the value based on the options selected & price rate of product in percent.

xiii) **Multi Select**- allows customers to choose multiple selections from a list of options. **(PRO FEATURE)**

<figure><img src="/files/IRYMC4iUT4C3mtJiW2lz" alt=""><figcaption></figcaption></figure>

* Required - enabling this checkbox to make the field mandatory.
* Label - provides title to the field.
* Help Text(**PRO FEATURE**) - provides a pop-up message on the 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 -&#x20;
  * i)   blue dot denotes which of these is selected by default.
  * ii) the first field provides a label for the option.
  * iii) the second field provides value to the option.
  * iv) click add the option to add options.
  * v) click X red icon at the right corner to delete that option
* Set Price - it allows for assigning a specific price to each selected choice or combination of choices.
* Min. Selections - it sets a minimum number of choices that must be selected by the customer.
* Max. Selections - it restricts the maximum number of choices that can be selected by the customer.

xiv) **Checkbox** - enables you to select an option in the form of a tick.

![](/files/aIgrgUdI7hofAk5BvYn4)

* 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 -&#x20;
  * i)   blue tick denotes which of these is selected by default.
  * ii) the first field provides a label for the option.
  * iii) the second field provides value to the option.
  * iv) click the **add option** to add options.
  * v) click **X** red icon at the right corner to delete the option.
* Set Price(**PRO FEATURE**) -
  * **In Price -** specifies the value based on the options selected & price rate of the produc&#x74;**.**
  * **In Percentage -** specifies the value based on the options selected & price rate of product in percent.

xv) **Checkbox** **Group** - enables you to select multiple checkboxesan option.

![](/files/aIgrgUdI7hofAk5BvYn4)

* 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 -&#x20;
  * i)   blue tick denotes which of these is selected by default.
  * ii)  first field provides 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.
* Set Price(**PRO FEATURE**) -
  * **In Price -** specifies the value based on the options selected & price rate of the produc&#x74;**.**
  * **In Percentage -** specifies the value based on the options selected & price rate of product in percent.

xvi) **Radio Buttons** - enables you to select only one option from the provided options.

![](/files/KSnhvxOdwFOayJZvjCeF)

* 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 -&#x20;
  * 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.
* Set Price(**PRO FEATURE**) -
  * **In Price -** specifies the value based on the options selected & price rate of the produc&#x74;**.**
  * **In Percentage -** specifies the value based on the options selected & price rate of product in percent.

xvii) **Hidden input** - enables you to provide inputs which gets hidden from the site.

![](/files/SQJEhpKCOQYLSgBhw6OD)

* Name - provides a unique name for the field & no two fields have the same name.
* Value - set default value for this field.

xviii) **Paragraph** - enables you to provide quotes or messages on the website.

![](/files/SoPDUt3HnKVXzPRAFpKr)

* 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.

xix) **Header** - enables you to provide title or header.

![](/files/ReAHU9uhB2ka0qZbDLSI)

* Label - provides 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.

xx) **File Upload(PRO FEATURE) -** enables you to collect files of selected format types specified by you in the settings.

![](/files/cX33oSSOoZrP1CpWbFz9)

* 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.,<name@gmail.com> 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.
* Type - select what type of file you need to upload for this field based on your settings.
* Multiple Files(**PRO FEATURE**) - enables you collect multiple files of specified formats.

NOTE :&#x20;

* After creating form or forms of your choice. Click **Publish** to make use of the form in product page.

![](/files/-MjY52x_NjQaSBARpHqg)

* If you have already created the form. Now, you need to modify and update in product page.After modifying the form, Click **Update**.
* To delete the created form, Click **Move to Trash**.

![](/files/-MjY5e5JAk_Re99zcItE)


# Form Configuration

### **Dynamic Fields: (PRO Feature)**

Choose to Show or hide custom fields in the form based on the rule you assigned on the basis of the value selected on other fields.

**STEP 1:** Navigate to **Extra Product Addon -> Add New Form** to create a new form or Choose **All Forms** to modify the existing forms.

![](/files/-MkDprW-vSnVWIQ1haDz)

**STEP 2:** View **Dynamic fields** Below the Form Builder.

![](/files/x9CU1DHFCobjCsG07aNt)

### Sample Creation:

**STEP 1:** We have created a Sample form with fields ( Name, Delivery to, Home Address, Office Address).

<figure><img src="/files/xE6YME5QVV3t6yOg2NiE" alt=""><figcaption></figcaption></figure>

**STEP 2:** After fields setup. Move to Dynamic fields.

Here, we have added one rule - Home Address, and Office Address fields are chosen to hide initially on the Product page.

* Home Address - field gets shown when the Delivery to the field is selected as Home.
* Office Address - field gets shown when the Delivery to the field is selected as Office.

![](/files/zFkILsfjgHON1OAqby5i)

![](/files/ajtgUhe53kXSAdlSeOqW)

### WPML Form Translation

The Product addon plugin is compatible with the WPML Form Translation. WPML lets you translate Product content into different languages.

{% tabs %}
{% tab title="Form" %}
![](/files/iz1My5k14emDp5efyw6o)
{% endtab %}

{% tab title="Product" %}
![](/files/c4mpqYYkh6IwL2UVU9YF)
{% endtab %}
{% endtabs %}


# Sample Form Creation

## BACKEND

{% tabs %}
{% tab title="FORM 1" %}
![Form 1 (customize) -Text field - LOGO NAME, Select field - SIZE](/files/-MjYZISperkgs9MGs2Wd)
{% endtab %}

{% tab title="FORM 1" %}
![FORM 1 (customize)  - Checkbox field - COLOR, Radio Group field - NECK STYLE](/files/-MjYZTRkcnS1ycV2eTV4)

{% endtab %}

{% tab title="FORM 2" %}
![FORM 2 (delivery) - Email field - Email](/files/-MjYZXz4XKlT99ECDc9t)

{% endtab %}

{% tab title="FORM 2" %}
![FORM 2 (delivery) - Text field - CONTACT, Date field - DELIVERY DATE(dd/mm/yyyy)](/files/-MjYZb526Hxyqx1Ankgj)

{% endtab %}

{% tab title="FORM SELECTION" %}
![Selecting forms in Product edit page](/files/-MjYb-FwI2w-VyHCFCcV)

NOTE : You can select multiple forms for a single product.

{% endtab %}
{% endtabs %}

## FRONT END

{% tabs %}
{% tab title="PRODUCT PAGE" %}
![](/files/-MjYaHMB7auqE9CgQYWd)

{% endtab %}

{% tab title="OPTION SELECTION" %}
![](/files/-MjYabenJ9mydxLnJkO7)

{% endtab %}

{% tab title="CART PAGE" %}
![](/files/-MjYah6kk5buvZ8esck4)

{% endtab %}
{% endtabs %}


# PRO Features

## Custom Price Fields

### Help Text&#x20;

Provides a pop-up in product page.

{% tabs %}
{% tab title="BackEnd" %}
![](/files/uo6sRla2eXlwkEX1J96J)
{% endtab %}

{% tab title="FrontEnd" %}
![](/files/ixJdCZW6ju2eIg6ORPBP)
{% endtab %}
{% endtabs %}

### Select (multi-selection)

Enable the multiple selection checkbox to select more than one option.

**NOTE :** while selection hold ctrl/command key to select multiple options(@Product Page)

{% tabs %}
{% tab title="BackEnd" %}
![](/files/1OtK68rIVDqQ7F4ZnsJM)
{% endtab %}

{% tab title="FrontEnd" %}
![](/files/U5yylsU67Yh2fdBEt1SY)
{% endtab %}
{% endtabs %}

### **Set Price Option - In Select, Checkbox, Radio Group fields**

This option is enabled only in the pro feature .

The Set Price option has **two** choices.

* **In Price -** specifies the value based on the options selected & price rate of the produc&#x74;**.**

![](/files/Mm7id9Bi1a1QuGhO5zkc)

{% tabs %}
{% tab title="Product" %}
![](/files/dOEN6cHD8XqfXFHHP8dQ)

{% endtab %}

{% tab title="Cart" %}
![](/files/kQ9wQ83GiK72jTfEcdIO)
{% endtab %}
{% endtabs %}

* **In Percentage -** specifies the value based on the options selected & price rate of product in percent.

![](/files/SBoZ5przc6FzsOaeqPV2)

{% tabs %}
{% tab title="Product" %}
![](/files/dOEN6cHD8XqfXFHHP8dQ)

{% endtab %}

{% tab title="Cart" %}
![](/files/OcOlXWhpROqDLhnVPddg)

{% endtab %}
{% endtabs %}

## File Upload

Customers can upload multiple files in specified size and formats that you selected in settings.

{% tabs %}
{% tab title="BackEnd" %}
![](/files/mvGA8l7itJIr3QFeWYU4)
{% endtab %}

{% tab title="FrontEnd" %}
![](/files/07UtOBzn2cAkcb0afSew)
{% endtab %}
{% endtabs %}

### Dynamic field:

**STEP 1:** We have created Sample form with fields ( Name, Delivery to, Home Address, Office Address).

**STEP 2:** After fields setup. Move to Dynamic fields.

Here, we have added one rule - Home Address, Office Address field are choosed to hide initially on the Product page.

* Home Address - field gets shown when Delivery to field is selected as Home.
* Office Address - field gets shown when Delivery to field is selected as Office.

{% tabs %}
{% tab title="Form" %}

<figure><img src="/files/xE6YME5QVV3t6yOg2NiE" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dynamic Field" %}
![](/files/zFkILsfjgHON1OAqby5i)
{% endtab %}

{% tab title="Product" %}
![](/files/ajtgUhe53kXSAdlSeOqW)
{% endtab %}
{% endtabs %}

###


# Form Activation In Product Page

**STEP 1** : In **Dashboard**. Navigate to **Product**.

**STEP 2** : Click **Add New** to create a new product or select product from All Products to add forms to existing product.

**STEP 3** : Select Extra Product Addons in Product data. Created form gets showed here. Enable the form to use the form in the product page.

![](/files/-MjJXIiqH7uqRt-EOPaF)

**NOTE** : You can make multiple forms and can access multiple forms for a single product at a time.


# License & Support

### Manage License

**STEP 1:** In the **themeparrot** page. Select **Profile** icon. Select **PURCHASE HISTORY** to view the purchased plugin.

**STEP 2**: Select **View Licenses** to abstract your **licenses key**.

![](/files/FSFhvRRrTVfKBVioUCNt)

**STEP 3:** In **License** tab choose the plugin where you need to modify your domain for the licensed PRO Version.

i) Click **Extend license** to extend accessibility of license period.

ii) Click **Manage Sites** to manage the plugin usage in specified sites.

iii) Click **View Upgrades** to upgrade plugin subscription plans.

![](/files/tEVT1SxqzqjRU90yuggf)

**STEP 4:** Click **Deactivate** to deactivate the PRO Version of Plugin in existing site.

**STEP 5:** Provide the domain name in the required space. Click **Add Site** to use the **PRO Version** of the Plugin in the specified sites.

![](/files/76a6BAzcFPgqyl3Nlnmf)

### Support <a href="#support" id="support"></a>

Please visit our [support forum](https://themeparrot.com/support-request-form/).

you can send an email to <support@themeparrot.com>.​

Thank you again for your purchase and feel free to contact us with any questions regarding this Plugin.

### **Themeparrot Team** <a href="#themeparrot-team" id="themeparrot-team"></a>


# Overview

## Weight Based Pricing for WooCommerce

This is a light-weight plugin (Weight based Pricing) for WooCommerce. It allows you to add customized pricing fields for defining the price for weight based products.

As an online retailer/wholesaler you may need to sell products like vegetables, fruits, groceries, meats, fishes in different quantities to different customers based on their need. Whether you want to create a various price rate according to variation in the weight this plugin makes it easier. It personalizes your product rate with simple drag & drop fields with multi useful options.

If you want to assign a price for rice. It may vary according to weight like kilogram, gram, pound, ton based on the customers choice. you can set a border to the customer in choosing product weight & also support wastage percentage for products. For example, if you set a minimum weight to that product the customer can't select beyond that limit and you can also set weight intervals. This will be the same for maximum according to the stock given.

This will be helpful for customers to select the weight according to their choice. It's applicable to all weight based products.

## Features

**Built for WooCommerce**

Weight based Pricing for WooCommerce designed to work natively with WooCommerce. This means that you can take advantage of the security and power of the world’s most popular eCommerce platform.

**WordPress Theme Friendly**

Weight based Pricing for WooCommerce works seamlessly with the majority WooCommerce compatible themes, meaning you have countless options to choose from when jazzing up your store and marketing your products to customers.

**WPML Compatible**

Weight based Pricing for WooCommerce is compatible with the popular WordPress Multilingual (WPML) plugin. WPML lets you translate website content into different languages.


# Installation & Activation

**STEP 1** **:** In the **themeparrot** page. Navigate to **Plugins** in menu. This will show the **Wordpress Plugins**.&#x20;

**STEP 2 :** Choose  **Weight Based Pricing for WooCommerce.** Displays the Weight Based Pricing Plugin. Click **Free** **Download**.

![](/files/FHdEv4DppBoWlMblfY2n)

**STEP 3 :** Gets navigated to **WordPress site**. Click **Download** to download the plugin in your system.

![](/files/rHxL0AyNNzRdDaedppyp)

**STEP 4 :** **Login** to your **WordPress Admin** section and go to **Dashboard -> Plugins**.

**STEP 5 :** Select **Plugins**. click **Add New** button.

![](/files/-MjIneMuM0SPwQZX31Q9)

**STEP 6 :** Now, this shows the **Upload Plugin** button. Click the button to browse the downloaded file.

![](/files/-MjImrEk2NEzXUsiq-e7)

**STEP 7 :** Click the **Choose file** button to browse the Plugin Zip file, you have just downloaded.

**STEP 8** **:** Hit **Install Now** button to install the plugin in your WordPress.&#x20;

![](/files/-MjImx87HvQNRLnVlNhv)

**STEP 9** : Click **Activate** to activate the plugin in your **WordPress** site.

![](/files/km70lLp0NiNdjS2ZJ3lI)


# Weight Based Pricing Settings

In **WordPress Dashboard**. Navigate to **WooCommerce -> Weight Based Pricing**.

Displays the **Weight Based Pricing Settings**.

![](/files/6lZjae64Vwl1MutclanS)

## Features

* **Enable Weight Based Pricing** - Enable / disable the Weight Based Pricing in your WooCommerce site using this checkbox.
* **Default Weight Unit** - Select default weight unit for products from the list. \[ NOTE: By default in kilogram. ]&#x20;
* **Custom Weight Input** - Enable / disable custom weight input of product.
* **Add to Cart Button Label** - Provide label for Add to Cart button.
* **Sale Price Label** - Provide the Sale Price label for product.
* **Enable Actual Weight** - Show / hide actual weight of product which calculated by reducing wastage percent of product.
* **Actual Weight Label** - Provide Actual weight label for products..
* **Show Total Savings** - Show / hide total savings of customer purchase in cart.
* **Save Changes** - click to save changes you made in WooCommerce.
* **Reset** - click to reset to WooCommerce to default settings.


# Product Customization

Move on to Products in Dashboard.

* Select **All Products** to modify or add Weight Based Pricing in your already existing product.
* Select **Add New** to create a product with Weight Based Pricing in WooCommerce.

In **Edit Product** page. In **Product Data -> General**. You will see the Weight Based Pricing plugin options below the Tax class.&#x20;

![](/files/-Mk1aaasb_fdpz2ad4b6)

* **Weight Based Pricing** - click to enable weight based pricing in this product
* **Weight Unit** - select the weight unit for your product from the drop-down list (kilogram, gram, pound, ounce).
* **Maximum Weight** - specifies the maximum weight limit for the product.
* **Minimum Weight** - specifies the minimum weight limit for the product.
* **Weight Intervals** - specifies the increment or decrement weight values of the product.&#x20;
* **Wastage Percentage** - specifies the wastage unit of the product in percent.
* **FROM/TO RANGE** - enables you to set weight range for the product.
* **REGULAR PRICE** - provides the actual price of the product.
* **SALE PRICE** - provides the sales price of the product(i.e., current selling price of the product).
* **Add Pricing Rule** - click this icon to Add Pricing rules for the products.

**NOTE :** Using FROM /TO RANGE you can set multiple ranges for a single product with different pricing rates.


# Product creation using Weight Based Pricing

Here, we have created a sample for **Weight Based Pricing for WooCommerce**.

![](/files/PQc6om6Z9YzUT3tvPxrg)

* We have taken apple as a sample product for Weight Based Pricing plugin.
* Set the values in the required positions based on the product need.
  * Weight unit have specified as kilogram.
  * Minimum Weight is 1kg below that limit. Customers can not place orders.
  * Maximum Weight is 100kg, you can set based on the stock availability.
  * 1kg weight interval, product range varies at 1kgs upto 50kg.
  * wastage percentage is specified as 0% from the customer ordered weight.
* In the price range, we have set two ranges for a single product.
  * Range( 5 - 100 kg) - sale price will be 4 & regular price will be 5 per kilogram.

![](/files/guAB2HKbd7dPezoBTXl3)

* Here, we have used Add to Cart button as Go To Product Page.

![](/files/Xo2nU6kBQie8Q0Bh2eLi)

* Shows availability of stock in Green text Mark.
* Actual weight specifies the weight of product after reducing the wastage.
* Price displays the rate of the product you have selected.

![](/files/QmctDbaXV3q1v1DoDDlz)

![](/files/jaQX8rGU6yVNrcPWa7Ac)


