Set Up PH Product Add-ons for WooCommerce
Product Add-ons for WooCommerce by PluginHive helps you add various options to your WooCommerce products with the help of add-ons like text, radio buttons, dropdowns, checkboxes, and many more. With these add-ons, you can easily customize your products and provide customers with a huge variety without creating multiple products.
Now, let us take you through a step-by-step setup of PH Product Add-ons for WooCommerce on your WooCommerce store.
Content
- Install & activate Product Add-ons for WooCommerce plugin
- Create a Product Addon Group for WooCommerce
- Assign the Product Addon Group to WooCommerce products
- Assign the Product Addon Group to WooCommerce product category
- Manage Product Addon Groups
- Delete a Product Addon Group
- Create Product Addons
- Enable/Disable a Product Addon
- Add-on Group Display Settings
- A quick overview of how Product Add-ons for WooCommerce works
- Display of Product Add-ons in Cart, Checkout, and Orders
1. Install & Activate Product Add-ons for WooCommerce Plugin
2. Create a Product Addon Group for WooCommerce
PH Product Add-ons for WooCommerce plugin creates a single addon group that can be used to customize multiple products in one go. This way an addon group provides a convenient way to create multiple addons and assign all of them together to a product or product category.
After installation, visit,
PH Product Add-ons for WooCommerce > Settings > and click on Add New
to create a product addon group, as shown below.
3. Assign the Product Addon Group to WooCommerce products
You can assign the addon groups to single or multiple products by selecting one of the options shown below.
- Applies To
This option will allow you to select all the WooCommerce products for which this group will be applicable
- Does Not Apply To
This option will allow you to select all the WooCommerce products for which this group will not be applicable. If this option is selected, by default, the group all the remaining products
On selecting the options above, the plugin will attach the group as well as all the addons created within the group to that particular set of products.
The Product Addon Group(s) apply to all WooCommerce products, by default, if it is not assigned to any product.
On the next tab, select the WooCommerce products from the drop-down.
4. Assign the Product Addon Group to the WooCommerce product category
Similar to WooCommerce products, you can also assign the product addon group to different WooCommerce product categories by selecting the dedicated WooCommerce product category from the drop-down as shown below.
The Product Addon Group(s) apply to all WooCommerce product categories, by default, if it is not assigned to any product category.
5. Manage Product Addon Groups
The Manage Groups screen lets you view, organize, duplicate, and delete your Product Addon Groups from one place.
View the number of addons in a group Each Product Addon Group listing shows a Number of Add-ons column, so you can see at a glance how many addons are configured within that group.
Copy a Product Addon Group To duplicate an existing group:
- Locate the group you want to copy.
- Click the Copy icon under the Actions column.
- A duplicate group is created with the same addons and settings.
This is handy when you want to reuse a similar addon setup for a different product or category, instead of building it from scratch.
6. Delete a Product Addon Group
To delete a Product Addon Group:
- Locate the group you want to remove.
- Click the Delete icon under the Actions column.
- Confirm the deletion when prompted.
7. Create Product Addons for your WooCommerce products
Once you have created the product addon groups and assigned these groups to the respective products, you can select from the following product addon types.
Type of Addons
Checkbox
Users can choose single or multiple options based on their preferences. Suitable for additional items or services like Gift Wrapping, Insurance, etc.
To add Checkboxes to your WooCommerce products, fill in the following fields.
- Enable Checkbox option: Enabled by default. Uncheck this to turn the addon off without deleting it – it disappears from the product page but keeps its saved settings, so you can switch it back on anytime. See Section 8 for details.
- Required: Enabling this option will make the addon selection mandatory on the product page
- Display price with the options: Enabling this option will display the price of each add-on option on the product page
- Label: It contains the text displayed on the product page. You can use this field to either explain the addon that you have added to the product or to provide instructions on how to use the addon
- Conditional Logic: It is used to define a condition based on which the addon will be displayed on the product page. For Example – In this case, only when a customer chooses the gift wrapping option from the drop-down list, the checkbox options containing various wrapping papers should be displayed on the product page. If the customer does not select a gift-wrapping option from the drop-down, the options will not be displayed.
- Description: This field is used to set a custom description for the addon
- Price Type: This field allows you to define how the add-on price is calculated and applied to the product. Available options include:
- Flat Fee: A fixed amount is added to the product price when the add-on is selected.
- Quantity Based: The add-on price is multiplied by the product quantity.
- % of Product Price: The add-on price is calculated as a percentage of the base product price.
- % of (Product + Add-ons): The add-on price is calculated as a percentage of the product price, including other selected add-ons.
- Maximum Possible Selections: limits how many options a customer can pick
- Additional Classes: custom CSS class names for styling the addon on the product page
Checkbox field displayed on the product page
Radio Button
Users can choose a single option from multiple options based on their preferences. Suitable for providing choices based on Different Product Types, Gender selections, etc.
The radio button field displayed on the product page
Text
Users can input Text, Numbers, Email IDs, and Passwords using this field. Suitable for getting customer’s details like First Name, Last Name, Email ID, Age, etc.
Text field displayed on the product page
Color
Users can select any color or choose from a set of colors based on their preferences. Suitable for selecting Product Colours, Packing colours, Additional Product Component Colours, etc.
The color field displayed on the product page
Color Options
Users can select any color or choose from a set of colors based on their preferences. Suitable for selecting Product Colours, Packing colours, Additional Product Component Colours, etc.
Color Options field displayed on the product page
Image Option
Users can select a product variation by choosing from a set of images instead of plain text options. Suitable for letting customers visually pick a design, pattern, or style – like choosing a print for a tote bag or a wallpaper pattern.
Image Options field displayed on the product page
Date
Users can select the date from a built-in calendar on the product page. Suitable for providing Date of Birth, Event Date, etc.
Date field displayed on the product page
Telephone Number
Users can enter their telephone numbers to get additional details about their orders. Suitable for getting customers’ telephone numbers.
Telephone Number field displayed on the product page
Dropdowns
Users can select any one option from a list of options. Suitable for providing Product Size, Quantity, etc.
Drop-Down field displayed on the product page
Multi-Select Box
Users can select multiple options from a list of options based on their preferences. Suitable for providing additional services like Dining Options for Breakfast, Lunch, and Dinner.
Multi-Select field displayed on the product page
Textarea
Users can enter a custom greeting to be added to the product. Suitable for getting Greeting messages, addresses, etc.
Textarea field displayed on the product page
File Upload
Users can upload any file based on their requirements. Suitable for Images, PDF files, Text Files, Music & Media files, etc.
File Upload field displayed on the product page
Heading
Users can get more information about the product or the seller. Suitable for adding Important Product Information, Component Information, etc.
Heading field displayed on the product page
Hidden
Users do not have any control over this field. Suitable for providing Mandatory Services with an additional cost attached to them.
Hidden field displayed on the product page
Time
Users can select from a built-in time picker based on their preferences. Suitable for getting Appointment Time, Delivery & Pickup Time, etc.
Time field displayed on the product page
8. Enable/Disable a Product Addon
Every addon within a group also gets an Enable/Disable toggle, giving you two places to control it from:
Within the individual Addon Group
On the group’s edit screen, each addon you’ve added is listed along with a quick on/off toggle next to it. Flip this toggle to instantly turn that addon on or off without opening its settings or deleting it.
From the addon’s own settings
The same on/off state is also reflected inside the addon’s individual settings screen, as an Enable [Addon Type] option checkbox next to the Type dropdown for example, “Enable Text option” or “Enable Colour option.” It’s checked by default.
This gives you a quick way to turn a specific addon off – say, a seasonal option, or one you’re still testing without deleting it or losing its configuration. Turn it off, and the addon stops appearing on the product page. Turn it back on whenever you need it.
This is different from deleting an addon. Disabling an addon temporarily hides it, while deleting it using the trash icon permanently removes the addon and its settings.
9. Add-on Group Display Settings
The Add-on Group Display Settings control how a customer’s selected add-on options are shown in the summary section at the end of the product page, so customers can review their choices before adding the product to the cart.
- Display Free Options in Summary – Shows the free addon options the customer selected.
- Display Paid Options in Summary – Shows the paid addon options the customer selected.
- Display Add-on Labels in Summary – Shows the addon labels alongside the selected options.
Applies to: Radio Button, Checkbox, Color Options, Image Options, Dropdowns, Multi-select.
10. A quick overview of how Product Add-ons for WooCommerce works
Business requirement – Creating a customizable t-shirt
Joe sells customizable T-Shirts. He allows his customers to choose from the options in order to create their own T-Shirt. The various options he provides are as follows,
- Size Selection.
- Color Selection.
- Custom Text(Front, Back)/ Custom Image(Front, Back).
How to create using Product Add-ons for WooCommerce?
Create a group “T-Shirt Addon” and assign that group to the product for which you want the customers to select the extra options.
Create a Checkbox addon in order to provide the customer with the option to choose the size of the T-Shirt. Set the various size options in the options menu as shown below :
Create a Color Options addon in order to provide the customer with the option to choose the color of the T-Shirt. Set the various color options in the color options menu as shown below :
Create a Drop-Down addon to provide the customer with the option to choose the type(Custom Text/ Custom Image) of customization on the T-Shirt.
Create an Input Box addon to allow the customer to Input the Text he wants to print on the front side and backside of the T-Shirt. This Input Box will be triggered using the Conditional logic option. When the customer selects the option “Custom Text” the Input boxes will be shown as below :
Create a File Upload addon to allow the customer to provide the image they want to print on the front side and backside of the T-Shirt. This File Upload option will be triggered using the Conditional logic option. When the customer selects the option “Custom Image” the File Upload options will be shown as below.
After setting up all the controls as demonstrated above your product will look as follows :
11. Display of Product Add-ons in Cart, Checkout, and Orders
Once a customer selects their product addons on the product page and adds the item to the cart, those selections follow the product through the entire order flow.
- Cart Page: All selected addons appear below the product name, so customers can review their choices before checking out.
- Checkout Page: Selected addons appear alongside the product details, so customers can verify their choices before placing the order.
- Order Details: After the order is placed, selected addons are visible on the Edit Order page in the WooCommerce admin, so store admins can see all customer-selected options while processing the order.
We hope this article would have helped you set up the PH Product Add-ons for WooCommerce on your WooCommerce website. If you have trouble using it or need help setting it up then feel free to Contact PluginHive Customers Support. Our team should be able to help you out.