Product Addons

7 min read

The Product Addons feature allows you to add custom options and extras to your WooCommerce products. Customers can personalize their purchases with add-ons like gift wrapping, engraving, extended warranties, or any custom option you can imagine—each with optional pricing.


Overview #

What are Product Addons?

Product Addons extend your products with customizable options that customers can select during purchase. Unlike product variations, addons are optional extras that add value (and often additional cost) to the base product.

Common use cases:

  • Gift wrapping – Offer premium or standard gift wrap options
  • Personalization – Custom engraving, monogramming, or printed messages
  • Warranties – Extended protection plans
  • Rush processing – Expedited shipping or handling
  • Accessories – Related items bundled with the main product
  • Custom designs – File uploads for print-on-demand products

Getting Started

  1. Navigate to Swift Commerce → Products → Product Addons in your WordPress admin
  2. Configure global settings in the Settings tab
  3. Customize the appearance in the Customization tab
  4. Add addons to individual products via Products → Edit Product → Add-ons tab
  5. Click Save Changes

Settings Tab #

The Settings tab controls how product addons behave across your store.

Display Settings

Configure how addons appear on product pages.

SettingDescriptionOptions
Addon PositionWhere addons appear on the product pageBefore Add to Cart, After Add to Cart, After Price, Custom (shortcode)

Position Options Explained:

PositionDescription
Before Add to Cart ButtonAddons appear directly above the Add to Cart button (recommended)
After Add to Cart ButtonAddons appear below the Add to Cart button
After PriceAddons appear right after the product price
Custom (via shortcode)Use [swift_commerce_product_addons] to place anywhere

Price Display

Control how addon prices are shown to customers.

SettingDescriptionDefault
Show Prices in LabelsDisplay addon prices next to option labelsEnabled
Include Tax in PricesShow addon prices with tax includedDisabled
Price FormatHow prices appear: Relative (+$5.00) or Absolute ($5.00)Relative
Live Price UpdatesUpdate total price in real-time as customers select addonsEnabled

Price Format Examples:

FormatDisplay Example
RelativeGift Wrapping (+$4.99)
AbsoluteGift Wrapping ($4.99)

Behavior

Configure addon behavior and validation.

SettingDescriptionDefault
Require All FieldsPrevent adding to cart until all required addons are filledEnabled
AJAX Add to CartAdd products with addons to cart without page reloadEnabled

Cart & Order Display

Control where addon information appears throughout the purchase flow.

SettingDescriptionDefault
Show in CartDisplay selected addons in the shopping cartEnabled
Show in CheckoutDisplay selected addons on the checkout pageEnabled
Include in Order EmailsInclude addon details in order confirmation emailsEnabled

File Upload Settings

Configure restrictions for file upload addons.

SettingDescriptionDefault
Allowed File TypesComma-separated list of permitted extensionsjpg, jpeg, png, gif, pdf
Maximum File SizeMaximum upload size per file in megabytes5 MB

Note: Server limits (PHP upload_max_filesize) may further restrict maximum file sizes.


Customization Tab #

The Customization tab lets you style how product addons appear on your product pages.

Templates

Choose a pre-designed template for quick styling, or select “Custom” for full control.

TemplateDescription
CardElegant cards with rounded corners and subtle shadows
MinimalClean and subtle with muted backgrounds
ClassicTraditional styling with defined borders
CustomFull manual control over all styling options

Container Styles

Customize the addon container appearance.

SettingDescription
BackgroundBackground color of addon containers
Border ColorBorder color around addon groups
Border RadiusCorner roundness in pixels
PaddingInterior spacing in pixels

Typography

Control text appearance throughout addons.

Title Styling

SettingDescription
SizeFont size for addon titles (12-24px)
WeightFont weight (Normal, Medium, Semi-bold, Bold)
ColorText color for titles

Other Text

SettingDescription
Description ColorColor for addon description text
Label ColorColor for option labels

Price Styles

Customize how prices appear within addons.

SettingDescription
ColorPrice text color (e.g., green for positive, red for emphasis)
SizeFont size for prices (10-20px)
WeightFont weight for prices

Total Price Display

SettingDescription
BackgroundBackground color of the total price summary
Text ColorColor of the total price text
Font SizeSize of the total price
Font WeightWeight of the total price

Input Styles

Style the form inputs within addons.

SettingDescription
Border ColorDefault border color for inputs
Focus BorderBorder color when input is focused
BackgroundInput background color
Border RadiusCorner roundness of inputs

Image Options

For addons that display images (checkbox/radio with swatches):

SettingDescription
Image SizeWidth and height of image options in pixels
Border RadiusCorner roundness of image options
Selected Border ColorBorder color when an image option is selected
Selected Border WidthBorder thickness when selected

Other

SettingDescription
Required Indicator ColorColor of the asterisk (*) for required fields

Adding Addons to Products #

Product addons are configured per-product in the WooCommerce product editor.

Accessing the Addons Panel

  1. Go to Products → All Products
  2. Click Edit on any product
  3. Scroll down to the Product Data section
  4. Click the Add-ons tab

Addon Field Types

Choose from multiple field types based on what information you need to collect:

Field TypeDescriptionHas OptionsCan Charge
CheckboxMultiple selections allowed
Radio ButtonsSingle selection from options
DropdownSelect from a dropdown menu
Short TextSingle line text input
Long TextMulti-line text area
File UploadAllow customers to upload files
Custom PriceCustomer enters their own price
QuantityNumber input with per-unit pricing
HeadingSection divider (display only)

Creating an Addon

  1. In the Add-ons panel, click the Add field… dropdown
  2. Select the field type you want to add
  3. Configure the field settings:

Basic Settings

FieldDescription
TitleThe name displayed to customers
DescriptionOptional help text below the title
RequiredWhether customers must complete this field

Options (for Checkbox, Radio, Dropdown)

For fields with multiple choices, add options:

FieldDescription
LabelThe option name displayed to customers
PriceAdditional cost for this option
Pricing TypeHow the price is calculated

Pricing Types

Control how addon prices are calculated:

TypeDescriptionExample
Flat FeeFixed price regardless of quantity+$10.00 for gift wrapping
Quantity BasedPrice multiplied by product quantity+$2.00 per item for rush handling
PercentagePercentage of the product price+10% for extended warranty

Percentage Example:

  • Product price: $100.00
  • Addon: 10% warranty
  • Addon cost: $10.00
  • Total: $110.00

Managing Addons

ActionHow to Do It
ReorderDrag the handle icon (☰) to rearrange fields
Expand/CollapseClick the arrow to show/hide field settings
DeleteClick the trash icon to remove a field

How Addons Work #

Customer Experience

  1. Product Page – Customer views product and sees addon options
  2. Selection – Customer selects desired addons (prices update in real-time)
  3. Add to Cart – Product is added with selected addons
  4. Cart – Addons appear as line item details with adjusted pricing
  5. Checkout – Addons are visible in the order summary
  6. Order Confirmation – Email includes addon details

Price Calculation

The final price is calculated as:

Final Price = Base Product Price + Sum of All Selected Addon Prices

For quantity-based addons:

Addon Price = Addon Unit Price × Product Quantity

For percentage addons:

Addon Price = Base Product Price × (Percentage / 100)

Order Storage

All selected addon information is saved with the order:

  • Addon titles and selected values
  • Calculated addon prices
  • Any uploaded files (stored securely)

This information is available in:

  • Order details in admin
  • Customer order confirmation emails
  • Order notes and history

Shortcode Usage #

For custom placement, use the shortcode:

[swift_commerce_product_addons product_id="123"]
AttributeDescriptionRequired
product_idThe WooCommerce product IDOptional (uses current product if on product page)

Usage Examples:

On a product page (uses current product):

[swift_commerce_product_addons]

In a custom template or page builder:

[swift_commerce_product_addons product_id="456"]

Troubleshooting #

Addons Not Appearing on Product Page

  1. Ensure Swift Commerce Pro is active
  2. Check that addons are configured for the specific product
  3. Verify the addon position setting matches your theme layout
  4. Clear any caching plugins

Prices Not Updating in Real-Time

  1. Enable Live Price Updates in Settings
  2. Check for JavaScript errors in browser console
  3. Ensure AJAX is not blocked by security plugins

File Uploads Failing

  1. Check Allowed File Types includes the file extension
  2. Verify file size is under the configured Maximum File Size
  3. Check server PHP settings (upload_max_filesizepost_max_size)
  4. Ensure upload directory has write permissions

Required Fields Not Validating

  1. Ensure Require All Fields is enabled in Settings
  2. Check that the specific addon has Required checked
  3. Verify JavaScript is loading correctly

Addons Not Showing in Cart/Checkout

  1. Enable Show in Cart and Show in Checkout in Settings
  2. Clear any object caching
  3. Check for theme compatibility issues

Best Practices #

  1. Keep it simple – Don’t overwhelm customers with too many options
  2. Clear labels – Use descriptive titles that customers understand
  3. Transparent pricing – Always show addon prices so there are no surprises
  4. Logical grouping – Use Heading fields to organize related addons
  5. Test the flow – Complete a test purchase to verify the customer experience
  6. Mobile-friendly – Test addons on mobile devices
  7. Reasonable file sizes – Set upload limits that balance quality with server resources
Updated on December 28, 2025
Scroll to Top