1. Documentation /
  2. Product Add-Ons

Product Add-Ons

Product Add-Ons allows you to add paid or free options to your products using several field types including radio buttons, checkboxes, drop-down fields, custom text inputs and more.

This extension also works with WooCommerce Subscriptions (separate purchase) to add additional pricing to the recurring subscription.

Installation

↑ Back to top
  1. Download the extension from your WooCommerce dashboard.
  2. Go to Plugins > Add New > Upload and select the ZIP file you just downloaded.
  3. Click Install Now, and then Activate.

Setup and Configuration

↑ Back to top

To create add-ons, use the Create Add-Ons button shown at the top of the screen upon installation.

Create add-ons via the Create Add-Ons button shown at the top of the screen upon installation of the extension.

Or go to Products > Add-Ons and then select Create New. You can add product level add-ons by editing a product.

This page also has a Settings section with the option to show Show incomplete subtotal.

The Show Incomplete Subtotal setting determines if the subtotal is shown before all required add-ons have been selected.

It determines if the subtotal is shown before all required add-ons have been selected. If left unchecked, all required add-ons need to be selected before the subtotal is shown.

Settings

↑ Back to top
Create add-ons setting comprises Name, Priority, and Product Categories fields.

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

↑ Back to top

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:

The Field Types section of Product Add-ons is visible when added directly to a product.

Select a field type from the top-most select box. As of writing, these options are available:

  • Multiple choice – Shows a list of options the user can choose from. Display as dropdowns, images, or radio buttons.
  • Customer-defined price – Shows a field where users can enter a numerical value that is added to the product price.
  • Quantity – 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 –  Shows a text field where users can write multiple lines of text (character limit possible).
  • File upload – Allows users to upload a file.
  • Heading – Add a heading between add-ons to group them into sections.

Multiple choice

↑ Back to top

Customers choose only one option from a set of predefined options. Examples: Color or size.

The Multiple Choice Product Add-on
  • 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.

Illustrating the Display as Image option

Website display

Radio buttons:

Display as radio buttons

Dropdown

Display as dropdown

Images

Checkboxes

↑ Back to top

Customers choose one or multiple options. Examples: Gift wrapping, card, 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.
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.

Website display

Short text

↑ Back to top

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

↑ Back to top

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

↑ Back to top

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

↑ Back to top

A customer can set their own price, which is added to the total. Example: Donations, tip. 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

↑ Back to top

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

↑ Back to top

Use headings to separate your add-ons into sections.

Website display

Pricing

↑ Back to top

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

↑ Back to top

You can change the order of add-ons displayed within groups by dragging and dropping.

Importing / Exporting add-ons

↑ Back to top

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

↑ Back to top

Per-product add-ons only display for 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

↑ Back to top

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”:

Front-end Checkbox Add-on

This is how it will be displayed in the cart page:

Cart Checkbox Add-on

Once a customer adds this item to their cart, data will be shown as meta:

Order details Checkbox Add-on

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. 

Keeping uploads secure

↑ Back to top

Uploads are stored in randomized folders under wp-content/uploads/ to make them hard to find. However, some hosts enable directory listing, which allows people to browse your file/folder structure. To disable this ‘feature’, add the following to your main .htaccess file:

Options -Indexes

Troubleshooting

↑ Back to top

The upload field type doesn’t work

↑ Back to top

This can be due to the length of the field name. Try to reduce the field name length or contact your hosting company to increase the value of post.max_name_length.

Frequently Asked Questions

↑ Back to top

Can Product Add-Ons be imported via the Product CSV Import Suite?

↑ Back to top

No, Product Add-Ons are made up of complex serialized meta data that would be difficult to do in a product CSV row as plain text. CSV Import can only import meta that is unserialized unless otherwise stated. However Product Add-Ons itself allows you to import and export settings.

Can an add-on have a separate SKU for sales/tracking purposes?

↑ Back to top

No. An add-on is treated as an option, not a separate product. Products and their variables have SKUs.

Can I add a datepicker?

↑ Back to top

WooCommerce Product Add-Ons does not have a datepicker. However, we are looking into adding this possibility in a future version of the extension.

How to customize “Grand total” and “Options total”?

↑ Back to top

Both “Grand total” and “Options total” can be targeted via CSS, granted it is a bit tricky. Here is how using the nth-child selector:

View on Github
Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer  for assistance.

How can I set default input values?

You can use a custom script to set default values, by inserting this code into a JavaScript file. Alternatively, you can use the free Custom CSS JS to add the code snippet.

Note that this code example only sets the value for the Custom price input field to 0 , so make sure to personalize it to your needs.

View on Github
Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer  for assistance.

Can I add custom fields to variable products?

↑ Back to top

Yes! Here is a sample:

product-addon-variable-product
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 (e.g., for a blue shirt only).

Can I have Product Add-Ons applied once to the product, no matter the quantity ordered?

↑ Back to top

Yes. Product Add-Ons version 3.0x introduced a flat fee feature.

Why are my add-ons blank?

↑ Back to top

It might be due to not clicking Save, after adding/deleting/editing any fields.

Where do I place my language files?

↑ Back to top

.mo and .po language files for Product Add-Ons must be placed in the following path: /wp-content/languages/plugins/. Learn more on translating extensions here.

How can I change the position of the add-ons on my product page?

↑ Back to top

If you are using our Storefront theme, the add-ons will appear neatly between the short description and the Add to Cart button.

However, on many other themes, the Add Ons are displayed beneath the Add to Cart button, which can be confusing for the customer.

To change the position, you can overwrite the template structure via a theme. Note that in the case of Product Add-Ons you need to place those template override files into a folder named addons within woocommerce-product-addons in your WordPress theme (instead of placing them directly into the WooCommerce folder in that theme). That would be: Theme-Folder/woocommerce-product-addons/addons/template-file.php

Can Product Add-Ons be used to apply a discount

↑ Back to top

Yes! Product Add-Ons can be configured to reduce the price of a product – just add a negative value to the Pricefield:

Is this compatible with Smart Coupons (separate purchase)?

↑ Back to top

Yes, as of version 2.9.0, Product Add-Ons works with Smart Coupons, including the gift card feature.

Is this compatible with WooCommerce Bookings (separate purchase)?

↑ Back to top

Yes! Learn more on how the extensions work together here.

Is this compatible with WooCommerce Blocks?

↑ Back to top

Yes, since version 3.4.0.

Does Product Add-Ons allow me to use conditional logic?

↑ Back to top

Product Add-Ons does not have support for conditional logic. If you want to show customers different fields based on information they fill out, we recommend that you use Gravity Forms along with the Gravity Forms Product Add-Ons extension.

Can I add orders via the admin backend with Product Add-Ons for phone orders?

↑ Back to top

The cart and checkout pages are required to automatically complete the complex calculations often involved with Product Add-Ons. As such, when manually adding orders on the admin side, these calculations are not currently automated. You can submit a feature request for this via our Feature Request.

That said, Product Add-Ons data is saved as metadata, so there is a manual workaround. Follow the instructions for manually adding an order as usual. Once the Add-Ons product has been added, hover with the mouse over the Total and click the Pencil icon to edit the item.

Click the Add meta button that appears underneath the item to add a field pair into which the relevant Add-Ons metadata can be added. You can add as many field pairs as you require.

Name (required) – input the Add-Ons Field Title plus the cost of the add-on in brackets.

Value (required) – input the name of the Add-Ons option.

Note: The item’s cost plus the cost of the add-on(s) have to be manually calculated and added to the Total (and if applicable, Tax) fields. Once saved, the order’s Recalculate button does not automatically do that for you.

Can I set quantities for each add-on?

↑ Back to top

At the moment, quantities can only be set for add-ons created with Quantity field type.

Questions and Feedback

↑ Back to top

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch with a Happiness Engineer via the Help Desk.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment