Product Add-Ons allows you to add paid or free options to your products using several field types, including radio buttons, checkboxes, dropdown fields, custom text inputs, and more.
This extension also works with WooCommerce Subscriptions (separate purchase) to add additional pricing to the recurring subscription.
Installation
- Download the extension from your WooCommerce dashboard.
- Go to Plugins > Add New > Upload and select the ZIP file you just downloaded.
- Click Install Now, and then Activate.
Setup and Configuration
To create add-ons, use the Create Add-Ons button shown at the top of the screen upon installation.
Or go to Products > Add-Ons and then select Create New. You can add product-level add-ons by editing a product.
Settings
Add-on settings allow you to configure add-ons that apply to all products or products in selected categories. This includes:
- Name: Used to differentiate add-ons from one another. This is not displayed on the website. By default, this is filled in for you.
- Priority: Specify the order in which to display if there is more than one add-on activated. An add-on with priority 1 would be above an add-on with priority 10.
- Product Categories: Set to All products, or choose categories to apply the add-on. Removing the All products tag will deactivate the add-on, which can be handy for seasonal add-ons or time-specific add-ons.
Save when you are done. Next, we’ll cover adding the actual add-ons.
Field types
Add-on fields are added the same way for both per-product and global add-ons. This panel is found on a new or existing product. To add your first add-on, click the “Add field” button. This will insert a blank add-on:
Select a field type from the top-most select box. As of writing, these options are available:
- Multiple choice – This shows a list of options the user can choose from. Display as dropdowns, images, or radio buttons.
- Customer-defined price – This shows a field where users can enter a numerical value that is added to the product price.
- Quantity – This shows a spinner where users can input a number.
- Checkboxes – Shows a checkbox or checkboxes that can be ticked/unticked by a customer.
- Short text – There are five in-built types. This shows a text field where users can enter either any text, just letters, just numbers, both, or an email address only.
- Long text – This shows a text field where users can write multiple lines of text (character limit possible).
- File upload – This allows users to upload a file.
- Heading – Add a heading between add-ons to group them into sections.
Multiple choice
Customers choose only one option from a set of predefined options. Examples: Color or size.
- Title: Format the title as a Label or Heading, or hide it.
- Display as: Choose how to present options to customers. Display as Dropdowns, Images, or Radio Buttons (see below).
- Add description: Displays more information about the add-on underneath the heading.
- Required field: Prevents product from being added to cart if an option is not selected.
- Options: Add a label for each option as well as a price if needed. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or charge a percentage of the total. To remove an option row, click the ‘X.’
Note: You must add a Label for each option so the information shows when viewing the order and is passed through in the confirmation email to the customer.
If the display option is set to images, an image upload icon will show up next to each option.
Website Display
Radio buttons:
Dropdown
Images
Checkboxes
Customers choose one or multiple options. Examples: Gift wrapping, cards, or upgrades.
- Title: Format the title as a Label or Heading, or hide it.
- Add description: Displays more information about the add-on underneath the heading.
- Required field: Prevents product from being added to the cart if an option is not selected.
- Options: Add a label for each option as well as a price if needed. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or charge a percentage of the total.
Website Display
Short Text
Customers can enter a single line of text. Examples: Email address, names, and engraving text.
- Title: Format the title as a Label or Heading, or hide it.
- Restriction: Limit the type of characters customers can enter from Any Text, Only Letters, Only Numbers, Only Letters, and numbers, Only Email Address.
- Add description: Displays more information about the add-on underneath the heading.
- Required field: Prevents product from being added to the cart if the field is empty.
- Limit character length: Specify the minimum/maximum number of characters.
- Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or charge a percentage of the total.
Website Display
Long Text
Customers can enter multiple lines of text. Examples: A gift note, an address, or special instructions.
- Title: Format the title as a Label or Heading, or hide it.
- Add description: Displays more information about the add-on underneath the heading.
- Required field: Prevents product from being added to the cart if the field is empty.
- Limit character length: Specify the minimum/maximum number of characters.
- Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or charge a percentage of the total.
Website Display
File Upload
A customer can upload their own file. Example: To create custom designs on t-shirts, mugs, or business cards.
- Title: The title is displayed above the multiple-choice options. You can format the title as a Label, Heading, or hide it.
- Add description: Displays more information about the add-on underneath the heading.
- Required field: Prevents product from being added to the cart if the field is empty.
- Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or charge a percentage of the total.
Website Display
The uploaded file will show up below the line item when editing an order:
Customer Defined Price
A customer can set their own price, which is added to the total. Example: Donations, tips. This amount will be multiplied by the quantity ordered.
- Title: Format the title as a Label or Heading, or hide it.
- Add description: Displays more information about the add-on underneath the heading.
- Required field: Prevents product from being added to the cart if the field is empty.
- Limit price range: Specify the minimum/maximum price.
Website Display
Quantity
Quantity field type can be used to create a product add-on where customers can adjust its quantity.
- Title: Format the title as a Label or Heading, or hide it.
- Add description: Displays more information about the add-on underneath the heading.
- Required field: Prevents product from being added to the cart if the field is empty.
- Limit quantity range: Specify the minimum/maximum quantity.
- Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or charge a percentage of the total.
Website Display
Heading
Use headings to separate your add-ons into sections.
Website Display
Pricing
Prices can increase or decrease the total cost of the product. Three price options are available:
- Flat fee: Price applied only once, regardless of the quantity ordered.
- Quantity-based: Price is multiplied by the product quantity.
- Percentage based: Calculates a percentage of the total.
Re-order add-ons
You can change the order of add-ons displayed within groups by dragging and dropping.
Importing / Exporting add-ons
Add-ons can be exported and imported using the buttons when editing a per-product or global add-on. Click ‘export’ to export the existing fields as serialized data. Then click import to paste the serialized data and append them to your existing add-ons.
Import and Export are also available for Global Product Add-Ons.
Per-Product Add-Ons
Per-product add-ons only display the product they are added to. Edit one of your products to add product-level add-ons. They appear in the Product Data panel under the subsection “Add-ons.”
Important Note
Add-ons can be applied to variable products but can only be defined at the product level. Example: You cannot have an add-on for a specific variation of a variable product — for a blue shirt only.
Exclusions
When creating add-ons on a per-product basis, you can choose to exclude all other add-ons that were previously applied to the product.
Frontend display and viewing order add-ons
On the frontend, add-ons are shown on the single product page above the cart button. To see how your add-ons look, select “Preview Changes”:
This is how it will be displayed on the cart page:
Once a customer adds this item to their cart, data will be shown as meta:
Add-on data is stored to the order line items as meta. There is no separate line item for the add-on itself. View your order to see the chosen values.