Store Owner’s Guide – Basic Concepts

Installation ↑ Back to top

  1. Download the .zip file from your WooCommerce account.
  2. Go to WordPress Admin > Plugins > Add New.
  3. Click Upload Plugin at the top.
  4. Choose File and select the .zip file you downloaded in Step 1.
  5. Click Install Now and Activate the extension.

Getting Started ↑ Back to top

Every Composite product consists of multiple building blocks called Components. For instance, a complete skateboard is assembled from the following components:

  • a deck (the actual board of the kit),
  • a set of wheels,
  • a set of trucks for mounting the wheels on the deck,
  • a set of wheel bearings,
  • some mounting hardware and
  • optionally, some grip tape.

Each Component includes an assortment of different Component Options to choose from. Component Options are added to Components by choosing product categories, or searching for specific products.

Composite vs Variable Products

If you are familiar with Variable products, it might be easier to understand how Composite products are structured with an analogy: The properties of a Composite product are defined by Components just like Attributes define the properties of a Variable one. Instead of attribute values, Components have Component Options, which are groupings of existing products.

Before you create a new Composite product, some basic preparation is usually required: Once you have decided upon a final list of Components, ensure that all products you need to use as Component Options exist. In our skateboard example, these would be all the individually stock-managed decks, trucks, wheels, bearings and hardware kits that will appear as skateboard options. You can freely add/remove Component Options later, but you will need to have at least a few products ready to start with.

When you are ready, follow these steps to create a new composite product:

  1. Go to WooCommerce > Products > Add Product.
  2. Select the Composite Product type in the Product Data panel.
  3. Go to the Components tab.
  4. Click Add Component to add as many Components as needed.
  5. Assign a Name and Component Options to each Component — these fields are mandatory. To add Component Options, you can either choose the Select products option and then search for and add products one-by-one, or you can choose the Select categories option and then select at least one product category.
  6. Publish to save.
Only simple products, variable products and product bundles can be used as Component Options.

Note that Component settings are organized in two groups: Basic Settings and Advanced Settings. Their configuration is documented in the Component Settings section.

Adding a Deck Component to a Build Your Own Skateboard composite.
Adding a Deck Component to a Build Your Own Skateboard composite.

Dependent Component Options

The Composite type allows you to make specific product/variation selections conditionally available based on compatibility limitations that may exist between products/variations in different Components.

Composite Products vs Product Bundles

Components with a single, mandatory Component Option are called static. A Composite that consists of static Components has many similarities to a Product Bundle. However, there are some key differences between the two extensions that make Product Bundles a much better choice for creating static bundles/kits:

  • Composite products lack the advanced stock reporting functionalities provided by Product Bundles.
  • Product Bundles have a content-aware database structure and API that makes it possible to run complex queries that involve bundled products – for instance, Product Bundles make it easy to get all the bundles that a product belongs to. This is not possible with Composite Products.
  • Some advanced functionalities of Product Bundles such as the ability to exclude specific bundled product variations, override bundled product titles/descriptions, and control the visibility of bundled products in different templates are much harder to achieve with Composite Products, or may require writing custom code.
  • The way Composite products look and behave in various WooCommerce templates is based on the requirements of personalized kitting. In general, Composite Products are agnostic to content in order to scale well – using Composites to create static bundles will yield a sub-optimal user experience in cases where content matters. For instance, a Composite cannot be added to the cart from the shop catalog without viewing the product details page, even if its Components are all static and populated with Simple products.

As a rule of thumb, Product Bundles are ideal for creating static product bundles/kits, while Composite Products are suitable for creating complex product kits with configurable components. If the difference is still not clear to you, compare the Complete Skateboard Bundle against the Build-Your-Own Skateboard Composite, and study the documentation of both extensions in detail.

Pricing ↑ Back to top

The Composite type can be used in a wide range of bundling/kitting applications with diverse pricing requirements, as it allows you to define a static composite price and/or add the individual prices of specific Components to a base composite price.

Composite Products in the Cart/Orders

In the cart, a composite product is displayed as a parent line item – named after the composite itself – followed by a child line item for each Component. Child products are grouped by the composite and their quantities are kept in sync with the quantity of their parent. This separation, which extends to orders, makes it possible to assign a static price to a composite product, and/or to tally the individual prices of some/all Components.

Static Composite Pricing ↑ Back to top

To assign a static price to a composite product:

  1. Go to WooCommerce > Products and select the composite product you wish to edit.
  2. Select the General tab in the left menu.
  3. Enter a Regular Price and, if needed, a Sale Price. Note that if you only use these fields to define the price of a composite, its contents/configuration have no effect on its price. Despite its limitations, this simple pricing configuration is sufficient in some cases.
  4. Update.

Static Bundle Pricing vs. Reporting Accuracy

Assigning a static price to a composite product causes each sale to be attributed to the parent cart/order line item associated with it – not to its child line items. As a result, the earnings reports of products contained in the kit will be distorted. To maintain accurate earnings reports, avoid static composite prices and only use them if a composite product is a service, process or physical item with a “base value” of its own.

Static Bundle Pricing vs. Tax Law

In some cases, using a static composite price might not be possible due to Tax Law requirements. When creating a composite that includes product options with different tax rates, be aware that a static bundle price limits you to a single tax rate.

Individual Component Pricing ↑ Back to top

In most kitting applications, the price of each component needs to have an individual contribution to the total price, accounting for parameters such as the chosen product, variation (if applicable) and quantity in each Component.

This is possible by checking the Priced Individually option, which is located under the Basic Settings tab of every Component.

When the Priced Individually option is checked, it is possible to define a Component % Discount. This is applied to the regular price of the selected product by default.

The Priced Individually option.
The Priced Individually option.

The example that follows demostrates how to create a configurable Ninja Outfit composite product by grouping the T-Shirts and Hoodies of the Dummy Woo Store in 2 Components. Both Components are priced individually and have a 20% Discount to help boost kit sales. Note that the Regular Price and Sale Price fields of the composite product have been left empty.

Setting Up the Dummy Woo Store

You can experiment with the Dummy Woo Store yourself by importing the dummy-data.xml file located in the /dummy-data/ directory of WooCommerce. To do this, navigate to Tools > Import and ensure that the WordPress importer is installed – then, use it to upload the content of the dummy-data.xml file.

The Build Your Ninja Outfit composite.
The Build Your Ninja Outfit composite in the cart.
The Build Your Ninja Outfit composite.
The Build Your Ninja Outfit composite in the cart.
Configuring the Build Your Ninja Outfit composite.
A quick look at the General tab.
Configuring the Build Your Ninja Outfit composite.
A quick look at the General tab.

In cases similar to the Build Your Ninja Outfit composite, where at least one Component is priced individually, the Regular Price and Sale Price fields of the composite product can be left empty. However, sometimes it might be desirable to define a static composite price and at the same time enable the Priced Individually option of one or more Components. In this case, the defined composite price should be thought of as a base price, since it is always contributing a fixed amount to the total of the composite, regardless of its configuration.

Relative and Negative Component Prices

The prices of all products contained in individually-priced Components must be positive. Additionally, it is not possible to have Component Option prices displayed relative to a base option or configuration.

Individual Pricing and Cart/Order Totals

By default, the cart/order item subtotal of a composite parent item is calculated as the sum of: i) the base/static composite price subtotal and ii) the subtotals of all individually-priced Components. At the same time, the subtotals of individually-priced Components are displayed with an Option subtotal: prefix. To prevent this, download and activate this plugin.

As you will soon find out, the extension provides many options for customizing the structure and appearance of your composite products. In this example, the Ninja Outfit uses the Stacked layout, while Component Options are displayed using the Thumbnails style.

Shipping ↑ Back to top

Introduction ↑ Back to top

From a shipping perspective, WooCommerce products are classified as:

  • Virtual — services or digital items that are not physically shipped.
  • Physical (non-virtual) — products that have a weight and dimensions in the real world and need to be shipped or picked up.

A composite product may contain multiple virtual and/or physical products. However, once a composite is packed and ready for shipping, its physical properties may not be the same as the physical properties of its components. This is very common in physical bundling/kitting applications that include an assembly or packaging process. Consider an example:

Woo Tech is a company that sells computer equipment with WooCommerce. The pro-grade desktop PC of Woo Tech, Woo Pro, is customized online and assembled as ordered. All parts are inventory-managed. Some non-OEM parts are available for purchase individually, in the Woo Tech online store. Once a Woo Pro PC has been assembled, the original packaging of all assembled parts is discarded, and the PC, product manuals and accompanying material are packaged and shipped in one box.
Shipping a kit.
Shipping a kit.

Depending on how its shipping options are configured, a composite product may represent:

  • One or more items produced by an assembly process, whereby one or more products are assembled in a common container, and any unassembled products are shipped individually, in their original packaging.
  • A base product accompanied by a set of “add-on” products, unassembled and shipped in their original packaging.
  • A group of unassembled products, shipped in their original packaging.

WooCommerce calculates shipping rates by using the shipping configuration of a composite product to construct its physical representation. Therefore, when configuring a composite, it is necessary to ensure that its shipping configuration reflects the way it is handled and shipped in the real world.

The following table makes this information easier to understand:

Physical Composite Virtual Composite
The kitting process produces a new physical item that needs to be shipped, or the composite is a standalone physical product. The kitting process does not produce a new physical item, or the composite consists of virtual products only.
ComponentShipped Individually? Yes If the chosen product is physical, it is shipped in its original packaging.
If the chosen product is virtual, it is not shipped at all.
Yes If the chosen product is physical, it is shipped in its original packaging.
If the chosen product is virtual, it is not shipped at all.
No If the chosen product is physical, it is packaged or assembled in the bundle. It is not shipped on its own.
If the chosen product is virtual, it is not shipped at all.
No The chosen product is not shipped at all.

Configuration ↑ Back to top

To configure a composite product for shipping, follow these steps:

  1. Determine if the composite is the result of a physical assembly or packaging process, or a standalone physical product that requires shipping:
    • If the answer is yes, then leave the Virtual option unchecked, and click on the Shipping tab to configure the physical properties (weight and dimensions) of the composite product.
    • If the answer is no, or if there is nothing to ship – e.g. the composite contains only virtual products – then check the Virtual option.
  2. Go to the Components tab.
    • If the composite contains virtual component options only, no further action is needed.
    • If the composite contains physical components, determine which of them will be packaged in the bundle, and which will be shipped in their original packaging (if applicable). For each component shipped in its own packaging, ensure that the Shipped Individually option is checked.
The Shipped Individually option.
The Shipped Individually option.

Note that the Shipped Individually option is configurable at component level only. The extension is not able to handle cases that require some Component Options in a Component to be packaged in the composite (if chosen) and some to be shipped individually.

By default, the weight of a non-virtual composite is assumed to be static and equal to the value entered in its Weight field, even when it contains components that are not Shipped Individually. It is also possible to use the value defined in the Weight field as a base composite weight, and have the weight of all packaged components added to this base weight.

Notes on External Order Fulfillment, Shipping and Inventory Management Services

The shipping configuration options of the Composite type allow shipping methods and other business logic that relies on the WooCommerce Shipping API to calculate shipping costs accurately.

When using an external service that works by importing WooCommerce order data, you might encounter issues with composite products that involve an assembly process (this means you have unchecked Shipped Individually for one or more Components). For example, you may find that the physical properties of imported composite products are inaccurate, or that Component SKUs do not appear at all.

External fulfillment, shipping and inventory management services typically rely on SKUs from WooCommerce order data to calculate shipping costs, keep inventory updated and manage logistics of order fulfillment.

Some of these systems do not support fulfilment, shipping, or inventory management of kits/bundles at all. Those that do usually work by splitting up a static or dynamic bundle/kit SKU to a number of component SKUs. This means that, in most cases and depending on the features and requirements of the system you are using, some additional integration work might be needed.

Composite Products provides an API that allows you to restore the physical representation of your composite products when reading order data, and possibly generate custom kit SKUs for composites that contain packaged items.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with using an API, select a WooExpert or Developer for assistance.

Component Settings ↑ Back to top

So far, you have learned how to:

  • Assign a title to a Component using the Name field.
  • Add product options to a Component using the Component Options field.
  • Have the price of specific Components added to the price of the Composite by enabling the Priced Individually option.
  • Apply a discount on all Component Options using the Discount field.
  • Keep the Shipped Individually option disabled for Components that are physically “packaged” in their container.

In this chapter, you will learn how to use the remaining Component settings, located under the Basic Settings and Advanced Settings tabs.

Basic Settings ↑ Back to top

Component Description

Used to provide details about the Component or its configuration. HTML and shortcodes are supported and will be rendered in the front-end.

Component Image

Placeholder image displayed by default in configuration summary sections. When a Component Option is chosen, the placeholder image of the Component is replaced by the image of the chosen product or variation. Summary sections are displayed:

  • In the final Review step of the Stepped layout.
  • In the Configuration Summary of the Componentized layout.
  • In the Composite Products Configuration Summary widget.
In the Layout Options section, you will learn how all the different layout options work and when/how to use the Configuration Summary widget.
Component Images - a welcome touch when using the Componentized layout.
Component Images – a welcome touch when using the Componentized layout.

 

Options Style

Can be used to change the presentation of the Component Options assigned to a Component:

Style Description
Thumbnails Component Options are displayed as product thumbnails, paginated and arranged in columns similar to the main shop loop.

Using the Thumbnails style with the Stepped layout
Using the Thumbnails style with the Stepped layout.
By default, the Thumbnails style produces a paginated view of the available product options and places the selected product details at the top of the Component. Alternatively, use this plugin to replace pagination controls with a Load More button.
Dropdown Component Options are listed in a drop-down menu. No pagination or lazy-loading functionality is supported. Suitable for displaying up to 10-15 Component Options.

Using the Dropdown style with the Stepped layout
Using the Dropdown style with the Stepped layout
Radio Buttons Component Options are listed as radio buttons. No pagination or lazy-loading functionality is supported. Suitable for displaying up to 6-7 Component Options.

Using the Radio Buttons style with the Stepped layout
Using the Radio Buttons style with the Stepped layout

 

Minimum/Maximum Quantity

Can be used to define an allowed quantity range for the selected product.

Exception: When choosing a product that is Sold Individually, the Min/Max Quantity field values are ignored if higher than 1.

Optional

Component selections are validated and a composite product cannot be purchased unless all of its Components have a valid selection. Additionally, the Progressive and Stepped layouts – which implement a step-based UI – prevent users from proceeding to the next step unless a valid selection is made in the current one.

When a Component is saved as Optional, it can be skipped without choosing any option.

Advanced Settings ↑ Back to top

Default Option

Allows you to choose a product to use as the default, pre-selected Component Option.

Placeholder Options in Dropdowns

When using the Dropdown style without defining a Default Option, a Choose [Component Name]… placeholder option will appear at the top of the drop-down menu. This placeholder option is omitted when you define a Default Option.

Selected Option

By default, the product details that appear when choosing a Component Option include its product title, short description, price (when the Priced Individually option is enabled) and possibly additional configuration fields associated with the chosen product, such as variable product attribute fields and/or Product Add-Ons fields.

Hide Title — Controls the visibility of the product title.
Hide Description — Controls the visibility of the product short description.
Hide Thumbnail — Controls the visibility of the product thumbnail.
Disable Product Add-Ons – Disables any Product Add-Ons fields associated with the selected product. Applicable when the Product Add-Ons extension is installed.

Allow Options Sorting

Toggles the display of a “Sort options by” dropdown, which can be used to sort Component Options by popularity, rating, newness or price.

Sorting Component Options.
Sorting Component Options.

Allow Options Filtering

Toggles the display of layered attribute filters, which can be used to narrow down Component Options based on specific product attributes.

Using attribute filters to narrow down Component Options.
Using attribute filters to narrow down Component Options.

Layout Options ↑ Back to top

The extension covers a wide range of kitting applications that range from small, static bundles to complex product kit builders that may include thousands of Component Options.

Once the contents of a composite product are defined, the next step is to adjust its layout and presentation. To keep customers involved from start to finish, the configuration process should provide sufficient amount of information without requiring guesswork or unnecessary user input.

The layout and presentation of your composite products can be adjusted by configuring the following options:

  • Composite Layout, found at the top of the Components tab.
  • Options Style, found under the Basic Settings tab of each Component.
  • The Composite Product Summary widget, which can be activated from the Appearance > Widgets menu.

Additionally, you can:

These options give you a lot of freedom to decide how the configuration process of a composite product should look and work. However, in some cases you may not be able to obtain exactly the result you had in mind. If you are looking to change the way a particular element looks or works, the Tips, Tricks and Snippets guide includes a collection of the most common customizations. Alternatively, select a WooExpert or Developer for assistance.

Composite Layout ↑ Back to top

The Composite Layout field allows you to modify the way Components are laid out on the screen. Four layout options are provided:

  • Stacked
  • Progressive
  • Stepped
  • Componentized

The following table summarizes their differences in detail.

Layout Description
Stacked Components are vertically stacked. The add-to-cart button is placed at the bottom.

The Stacked layout is recommended if the Components of your product kit contain a few options, or if you want to keep the configuration process quick and simple.

The Stacked layout with the Dropdown style applied to all Components.
The Stacked layout with the Dropdown style applied to all Components.
Progressive Similar to the Stacked layout, with 3 key differences:

  • Components must be configured in sequence.
  • Components are wrapped in toggle-boxes.
  • Only a single Component is visible at a time.
Using Toggle-boxes with the Stacked layout

Toggle-boxes can be enabled with the Stacked layout by using this snippet.

The Progressive layout with the Dropdown style applied to all Components.
The Progressive layout with the Dropdown style applied to all Components.
Stepped Components are presented and configured individually and in sequence, in a step-by-step manner. The chosen options are summarized in a final Review step, at which point the composite product can be added to the cart.

The Stepped layout is recommended for kitting applications that involve Components with long, complex contents.

The Stepped layout. The Deck Component is presented using the Thumbnails style.
The Stepped layout. The Deck Component is presented using the Thumbnails style.
Componentized Components are presented and configured individually, but not necessarily in sequence. A key element of the Componentized layout is the Summary section, which provides an overview of all Components and lists the chosen options. To configure a Component, the Summary section is temporarily hidden from view. The final configuration can be added to the cart by returning to the Summary.

The Componentized layout is also recommended for kitting applications that involve Components with long, complex contents.

By default, the Componentized layout does not require Components to be configured in sequence. This can be changed by activating this snippet.
The Componentized layout. Viewing the initial Summary screen.
The Componentized layout. Viewing the initial Summary screen.
The Componentized layout. Viewing the Deck Component.
The Componentized layout. Viewing the Deck Component.

Rules of Thumb

Configuring a composite product should be easy and painless – the entire process must keep customers involved and guide them quickly from start to finish. Here are a few rules of thumb for optimizing customer interaction:

  • Choose the Thumbnails style when you need to show images of the available Component Options, or when dealing with a large number of options. The Thumbnails style makes Component Options look similar to your WooCommerce shop archives and provides the ability to sort and filter products by attribute – useful for narrowing down results quickly.
  • When dealing with multiple Components that include rich content – such as long descriptions and product images – consider displaying them in sequence. Avoid choosing the Stacked layout and experiment with the Progressive, Stepped and Componentized options, which are easier to follow from start to finish.

In contrast:

  • Product images are not always important or meaningful when it comes to choosing a Component Option. In these cases, it is recommended to use the Dropdown or Radio Buttons style: drop-down menus are great space-savers, while radio buttons provide a better overview of the available options.
  • The Stacked layout is ideal if you want to make it easy and quick for customers to customize and purchase a composite product. When using it, make sure that the length of the resulting form is as short as possible – endless vertical forms are confusing and tiresome.
Using Storefront?

If you are using Storefront, the Storefront Powerpack allows you to tweak the layout of individual product pages. The extension adds a number of layout options grouped under a custom Storefront tab, which can be used to allocate more viewport width to composite products by stacking all component content below the main product image.

A similar result can be achieved with the free WooCommerce Stacked Product Layout plugin. The plugin, which has been used in this example, should work well with most themes, including Storefront.

Composite Products Look Squeezed?

If the layout of your composite products appears very narrow or squeezed and your theme does not allow you to allocate more width to specific products, it is recommended to try the free WooCommerce Stacked Product Layout plugin before looking at other options. The plugin, which was used in all examples seen in this guide, should work well with most themes – including Storefront.

Configuration Summary Widget ↑ Back to top

The Composite Product Summary widget, which can be added to any widgetized area from the Appearance > Widgets menu, is only displayed when viewing single-product pages of the Composite type and provides:

  • Dynamically updated configuration details for all Components, including subtotals.
  • Navigation functionality – click on a Component in the widget and you’ll be taken there.
  • Quick access to validation messages and the add-to-cart button.

The widget can be seen in all examples provided so far in the Layout Options section.

Managing Inventory ↑ Back to top

The sale of a product in a Composite has the same effect on its stock as an individual sale – there are no separate inventory settings for the products purchased in a composite product.

When configuring a composite product, if the available stock quantity of a chosen product is below the minimum threshold required by the Component it belongs to, then the Composite appears with an Insufficient Stock status and cannot be purchased.

With Composite Products, it’s possible to define composite SKUs and manage inventory for composite SKUs. The ability to set stock quantities for composite SKUs allows you to place constraints on the bundling process itself, e.g. associated with time, manpower or another limited resource. Go to the Inventory settings tab of a composite product to enable stock management and set stock quantities at composite level. Note that availability limits imposed by bundled products are not overridden by enabling stock management for a composite product.

Composite SKUs are static by default. If you plan to use the extension with an external order fulfillment, shipping or inventory management service and need a way to generate dynamic composite SKUs, please refer to the Shipping section for details.

Use Cases ↑ Back to top

The following use cases are useful for gaining a better understanding of what is possible with Composite Products:

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top