Custom Product Addons and Fields for WooCommerce

Description #

This plugin will allow the admin to add add-ons to the WooCommerce products, and the admin will have different add-ons fields to set up. Admin will also have the option to display different add-ons on various products.

Installation #

1. Download the .zip file from your WooCommerce account.
2. Go to WordPress AdminDashboard > Plugins > Upload Plugin > Choose File.
3. Install Now and Activate Plugin.

Getting Started #

Product Add-ons #

1. Go to WordPress Admin Dashboard > Products  > Product Add-ons.

2. Click on the Add Group button to create a new group.

3. The Add New Group screen will appear.
4. Navigate to the Create Addons section. The admin can configure the Addons in this section.

5. The admin can set the name of the Addon for his reference only in the Name option. This name won’t be displayed to the front-end users.

6. The admin can create this Add-on for All Products/Categories or Specific Products/Categories.

7. If the admin selects the Display on all Products option, the Exclude Products/Category option will appear for the admin.

8. The admin can search for any product/category to exclude it from the Addon in the Exclude Products field.

PLEASE NOTE: Admin can select a category in the Search for a Category field.

9. If the admin selects the Display on Specific Products or Categories, the Include Products/Category option will appear for the admin.

10. The admin can search for a product/category to include in the Addon in the Include Products field.

PLEASE NOTE: Admin can select a category in the Search for a Category field.

11. Move to the Add-ons Options. This option provides admin multiple options for the Addons.
12. Click on the Add Option button.

13. A detailed Add-on options screen will open.

14. Add a title to the Addon option in the Title field.

15. The admin can set the Title format from the Format drop-down list. There are two options in the Format (Label and Heading). The addon option title will display on the front-end.

16. The admin can select the Addon Type from the Type drop-down list. There are 15 Addon options provided.

1. Checkbox
2. Radio
3. Dropdown
4. Text Field
5. Text Area
6. Numbers
7. File Upload
8. Images
9. Color Swatches
10. Customer Defined Price
11. Date
12. Quantity
13. Text Labels
14. Visual Editor
15. HTML

Checkbox #

1. Select the Checkbox option from the Type drop-down list.

2. The settings will appear for the Checkbox type.
3. The admin can add a choice for the Addon type.

4. The admin can set the Label for the Choices.

5. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee – A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

6. The admin can set pricing in the Pricing field as per the Pricing Type selected.

7. The admin can select the choice by enabling the Selected toggle button. By default, this option will be selected on the front-end if enabled.

8. The admin can add multiple choices using the Plus sign button.

9. Multiple choices are created with different Price Types with the same process as explained above.

10. The admin can delete the choice by using the Minus sign button.

11. The admin can duplicate the choice by clicking on the Duplicate icon button.

12. The admin can add a Description of the Addon for the front-end user.

13. The admin can select the Required check button to set these choices as required.

14. The admin can configure the advance settings for the Addon by enabling the Advance Settings toggle button.

15. The admin can set the choice limit in the Choice Limit option providing the Minimum and Maximum value for the Choice. For example minimum 1 or maximum 3 choices can be selected.

16. There is an option provided as Conditional Logic. The admin can add a logic when multiple choices are created. The admin can choose to show/Hide all or Any logic.

PLEASE NOTE: Conditional Logic will work when Multiple Addon Options are created.

17. The admin can add multiple Add-on options by clicking the Add Option Button.

18. Another option is created as explained by the same process as Accessories.

19. Once the second option is created, move to the Advance Settings.
20. Navigate to the Conditional Logic option. Select the accessories option from the Option drop-down list

21. Select the Comparison condition in the Comparison option.

22. Select the Value of the First option in the Value drop-down list.

PLEASE NOTE: The conditional logic will function such that when Option 1 of the first choice is selected, the levels of the second choice will be displayed.

23. Once done with the settings, Click the Publish button to publish the Addon.

Front End Impact #

1. Go to the Product page.
2. The created Addon will be displayed to the product.

3. All the options will be listed in Checkbox style.
4. Meet the Conditional Logic by selecting Option 1, Different Levels will appear.

5. Select the desired Level Checkbox.

6. Proceed to the Cart page by clicking on the Add to Cart button. The product Add-on details will be displayed.
7. The add-ons prices will be added in the product price. For example if the price of the product is $1000 and the add-ons prices are $3 each then $6 will be added to the subtotal and the product price added to the cart will be $1006.

8. Proceed to the Checkout page by clicking the Proceed to Checkout button. The product Add-on details will also be displayed.

9. Click on the Place order button. Your order and Product Add-on details will be placed in the Order Details.

10. The Product Add-on details will be available on the admin backend Order page.

Radio Button #

1. Select the Radio option from the Type drop-down list. This will add radio buttons in the front end for the users.
2. Choices: The admin can add multiple options from here, there will be an add choice button to add more choices.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Selected toggle button: admin can make any choice option selected by default on the front-end if this option is activated.
5. A delete button in front of every option.
6. A duplicate button in front of every option.
7. Description: A text box to add descriptive text which will appear below the choices.
8. Required: A checkbox to allow admin to make the field mandatory for the user.
9. Advance settings: Conditional Logic options will appear when advance setting toggle is enabled.

Front End Impact #

1. Go to the Product page.
2. The created Radio button Addon will be displayed on the product.

Dropdown #

1. Select the Dropdown option from the Type drop-down list. This will add a drop-down list of the options created for the product add-on.
2. Choices: admin can add multiple options from here, there will be an add choice button to add more choices.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Selected toggle button: admin can make any choice option selected by default on the front-end if this option is activated.
5. A delete button in front of every option.
6. A duplicate button in front of every option.
7. Description: A text box will be used to add descriptive text, which will appear below the choices.
8. Required: A checkbox to allow admin to make the field mandatory for the user.
9. Advance settings: Conditional Logic options will appear when advance setting toggle is enabled.

Front End Impact #

1. Go to the Product page.
2. The created Drop-down List Addon will be displayed on the product.

Text Field #

1. Select the Text Field option from the Type drop-down list. This will add a text field on the product page.
2. Choices: The admin can add only one option from here.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.
6. Character Count: This allows you to charge a fixed amount for every letter entered. For example, if the character count is $0.50 and the customer enters “Happy Birthday” then the cost of the product will increase by $6.50 (i.e. 13 letters x $0.5).

4. Description: A text box to add descriptive text which will appear below the choices.
5. Required: A checkbox to allow admin to make the field mandatory for the user.
6. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Character Limits: Enter the minimum and/or maximum number of characters. Validate on minimum and maximum character limit on the front-end.
2. Conditional Logic: Conditional Logic is explained below at the end

7. The admin can choose the Letters Only or Email Address Only option from the Restriction drop-down list. This option allows the admin to restrict input to either letters only or email addresses only.

Front End Impact #

1. Go to the Product page.
2. The created Text Field will be displayed on the product.

Text Area #

1. Select the Text Area option from the Type drop-down list. This will add a text field on the product page.
2. Choices: admin can add only one option from here.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.
6. Character Count: This allows you to charge a fixed amount for every letter entered. For example, if the character count is $0.50 and the customer enters “Happy Birthday” then the cost of the product will increase by $6.50 (i.e. 13 letters x $0.5).

4. Description: A text box to add descriptive text which will appear below the choices.
5. Required: A checkbox to allow admin to make the field mandatory for the user.
6. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Character Limits: Enter the minimum and/or maximum number of characters. Validate on minimum and maximum character limit on the front-end.
2. Conditional Logic: Conditional Logic is explained below at the end.

Front End Impact #

1. Go to the Product page.
2. The created Text Area will be displayed on the product.

Numbers #

1. Select the Numbers option from the Type drop-down list. This will add a Number field on the product page.
2. Choices: admin can add only one option from here.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Description: A text box to add descriptive text which will appear below the choices.
5. Required: A checkbox to allow admin to make the field mandatory for the user.
6. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Default Value: The default number value will be displayed on the front-end on page load.
2. Number Type: Whole Number and Decimal.
3. Number Limits: Enter the minimum and maximum value. Value entered must not be less or more than defined value.
4. Conditional Logic: Conditional Logic is explained below at the end.

7. Set the default value in the Default Value field. This default value will be placed in the Numbers field for the front-end user.

8. Select the Number type for the number input. This will enable the front-end user to enter either whole numbers or decimal numbers in the Numbers field as required. If the whole number option is selected then the user can only enter the whole number as input in the numbers field on the front-end. If the Decimal number is selected then the users can also enter the numbers in decimal in the numbers field on the front-end.

9. Set the Minimum and Maximum limit for the numbers. This option will restrict the front-end user from inputting a number within the defined minimum and maximum limits.

Front End Impact #

1. Go to the Product page.
2. The created Numbers field will be displayed on the product.

3. The user can input Decimal Numbers when Decimal is selected in the Number Type option.

File Upload #

1. Select the File Upload option from the Type drop-down list. This will allow the user to Upload a file from the system.
2. Choices: The admin can add only one option from here.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Description: A text box to add descriptive text which will appear below the choices.
5. Required: A checkbox to allow the admin to make the field mandatory for the user.
6. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Maximum File Size (MB): Enter the maximum file size in (MBs). Files bigger than this file size should not be allowed.
2. Maximum Number of Files: By default, it will be 1, it will be a number input field, admin can define the maximum number of file size to be uploaded.
3. Allowed File Types: it will be a dropdown field displaying the format of the file types, admin can select multiple file formats (PDF, JPG, JPEG, PNG, DOCX, XLX, PPTX, BMP, GIF, BMP, CSV and more popular formats.
4. Conditional Logic: Conditional Logic is explained below at the end.

7. In the advance settings admin can set the following options:

1. Maximum File Size (MB): Enter the maximum file size in (MBs). Files bigger than this file size should not be allowed.

6. Maximum Number of Files: By default, it will be 1, admin can define the maximum number of files to be uploaded.

7. Allowed File Types: it will be a dropdown field displaying the format of the file types, admin can select multiple file formats (PDF, JPG, JPEG, PNG, DOCX, XLX, PPTX, BMP, GIF, and CSV).

Front End Impact #

1. Go to the Product page.
2. The Selected File Upload option will be available on the product page.

3. Click on the Upload your file here.

4. Select the file from the system.
5. The File will be uploaded and displayed below.

Images #

1. Select the Image option from the Type drop-down list. This will allow the admin to add an image.
2. Choices: admin can add multiple options from here, there will be an add choice button to add more choices.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Selected toggle button: admin can make any choice option selected by default on the front-end if this option is activated.
5. A delete button in front of every option.
6. A duplicate button in front of every option.
7. Description: A text box to add descriptive text which will appear below the choices.
8. Required: A checkbox to allow admin to make the field mandatory for the user.
9. Display: There will be two options: it will be radio buttons (Display image buttons only: where images will be displayed only. Display label and image buttons: where text labels and image both will be displayed).
10. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Quantity limits: Optionally enter the minimum and/or maximum number of choices which are required before customers can add the product to their cart.
2. Conditional Logic: Conditional Logic is explained below at the end.

11. Add an image in the backend configuration of the add-on. This image will be displayed for the front-end user on the product page.

12. Select Display type for the image in the Display option. This option allows the admin to show the Image button only OR the Label and image.

Front End Impact #

1. Go to the Product page.
2. The Selected File Upload option will be available on the product page.

Color Swatches #

1. Select the Color Swatches option from the Type drop-down list. This will add color blocks on the front end for selecting the choices provided.
2. Choices: admin can add multiple options from here, there will be an add choice button to add more choices.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Selected toggle button: admin can make any choice option selected by default on the front-end if this option is activated.
5. A delete button in front of every option.
6. A duplicate button in front of every option.
7. Description: A text box to add descriptive text which will appear below the choices.
8. Required: A checkbox to allow admin to make the field mandatory for the user.
9. Display: There will be two options: radio buttons (Display color swatches only: where color swatches will be displayed only. Display label and color swatches buttons: where text labels and color swatches both will be displayed).
10. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Conditional Logic: Conditional Logic is explained below at the end.

11. The admin can add different colors from the Choices option.

Front End Impact #

1. Go to the Product page.
2. The provided Color Swatches option will be available on the product page.

Customer Defined Price #

1. Select the Customer Defined Price option from the Type drop-down list.
2. Description: A text box to add descriptive text which will appear below the choices.
3. Required: A checkbox to allow admin to make the field mandatory for the user.
4. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Conditional Logic: Conditional Logic is explained below at the end.

Front End Impact #

1. Go to the Product page.
2. The Customer Defined Price option will be available on the product page.

Date #

1. Select the Date option from the Type drop-down list. This will add a field where the admin can select a date.
2. Choices: admin can add only one options from here, there will be following options in the choices:
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Description: Description: A text box to add descriptive text which will appear below the choices.
5. Required: A checkbox to allow admin to make the field mandatory for the user.
6. Advance settings: this will be an enable/disable toggle when enabled following options will appear:

1. Conditional Logic: Conditional Logic is explained below at the end.

7. The admin can add filters by using the Selected Date option. There are four options provided.

2. Disable Past Dates – This option will hide all dates before the current date.
3. Disable Future Dates – This option will hide all dates after the current date.
4. Disable Today – This option will prevent the current date from being selected.
5. Enable Time – This option will add a time slot selection to the calendar.

8. The admin can disable days by using the Disable Days option. The admin can select a particular day to be hidden from the selection. It will be a dropdown list displaying the days to select, admin can select multiple days from the list. Days selected will be disabled on the calendar on the front-end.

9. In the advance settings admin can set the following options:

6. Date Format: F (month) j (date), Y (year). Admin can set the format accordingly, with the placement of F j Y.

7. Time limits: there will be a start and end time field. The time will be displayed according to the start and end time set by the admin. To restrict the available times.

Front End Impact #

1. Go to the Product page.
2. The Date option will be available on the product page.

Quantity #

1. Select the Quantity option from the Type drop-down list. This will allow the front-end user to add the desired quantity.
2. Choices: admin can add only one options from here, there will be following options in the choices:
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Quantity limit: Enter a minimum and maximum value for the quantity limit range. If the value is below the minimum limit or exceeds maximum limit then display the validation message on the front-end.
5. Description: A text box to add descriptive text which will appear below the choices.
6. Required: A checkbox to allow admin to make the field mandatory for the user.
7. Advance settings: this will be an enable/disable toggle when enabled following options will appear:
8. Conditional Logic: Conditional Logic is explained below at the end.

Front End Impact #

1. Go to the Product page.
2. The Quantity field will be available on the product page.

Text Labels #

1. Select the Text Labels option from the Type drop-down list. This will add labels on the product page.
2. Choices: admin can add multiple options from here, there will be an add choice button to add more choices.
3. The admin can select the price type from the Price Type drop-down list. Five Price type options are provided.

1. No Cost – This choice will not affect the total product cost
2. Flat Fee – A fixed amount is added to the total product cost, regardless of the quantity ordered.
3. Quantity-Based Fee –  A fixed amount is added to the total product cost multiplied by the quantity ordered.
4. Percentage Increase – This increases the product price by the specified percentage.
5. Percentage Decrease – This decreases the product price by the specified percentage.

4. Selected toggle button: admin can make any choice option selected by default on the front-end if this option is activated.
5. A delete button in front of every option.
6. A duplicate button in front of every option.
7. Description: A text box to add descriptive text which will appear below the choices.
8. Required: A checkbox to allow admin to make the field mandatory for the user.
9. Advance settings: Conditional Logic options will appear when advance setting toggle is enabled.
10. Quantity limits: Optionally enter the minimum and/or maximum number of choices which are required before customers can add the product to their cart.

Front End Impact #

1. Go to the Product page.
2. The Text Labels will be available on the product page.

Visual Editor #

1. Select the Visual Editor option from the Type drop-down list. This will allow the admin to display static content to the front-end user on the product page.

Front End Impact #

1. Go to the Product page.
2. The content posted in Visual Editor will be available on the product page.

HTML #

1. Select the HTML option from the Type drop-down list. This will allow the admin to add HTML content to the product page.

Front End Impact #

1. Go to the Product page.
2. The content posted in the HTML field will be available on the product page.

Conditional Logic #

• There will be a dropdown field of show / hide.
• There will be a dropdown field of all / any.
• The admin can select the conditions from the two dropdowns.  For example, show this option if All of the following match.
• There will be further conditions fields including:

• Option: it will be a dropdown displaying the other addons options added. It will not display the visual editor and HTML option.
• Comparison: it will be a dropdown displaying two options (Equals and Does not equal).
• Value: it will be a dropdown displaying the choices of the addon option selected in the option dropdown.

• Use case: Show this option if All of the following match:
• Option (A) Comparison (Equals) Value (1).
• So, in the above use case Addon option A is selected and Choice option 1 is selected then display the Addon option B (this is the option where you have to set up the conditional logic) otherwise hide the addon option B.
• There will be an add button to add more conditional logics.
• If in the All / Any dropdown All is selected then all the conditional logic should be met to display the field in which the conditions are set. If any is selected then if any of the conditions are met display the options field in which the conditions are set.