WooCommerce composite products are a way of letting your customers configure their own products. This tutorial will show you step by step how to set up composite products with a couple of real-life composite products scenarios.
WooCommerce composite product scenarios
The first scenario looks at how to create a ‘build your own computer’ product in WooCommerce and the second scenario looks at how to create a gift hamper product. You should be able to use the techniques in these examples for any composite product you want to build.
Both scenarios feature links to fully functioning demo products so you can see exactly how the finished product works.
There’s also a list of WooCommerce composite products demo products.
What are composite products?
Good question. Essentially, WooCommerce composite products are a way of assembling a customised product out of several other products. For example, think of a gift hamper where the customer chooses which products are included. Or a computer where the user configures all the components – from motherboard to keyboard. This is the best way to create a WooCommerce build your own product.
Composite products are also sometimes referred to as kit-builders, kit-building products, or custom product builders. The user builds up the composite product out of multiple sub-products.
We’ll look at some specific examples in WooCommerce below, with clear guidance on how to build them, plus links to composite products demo pages.
How to create WooCommerce composite products
Out of the box, WooCommerce doesn’t have the ability to create composite products. So, to create them, you’ll need the Product Add-Ons Ultimate plugin. This will give you all the extra functionality you’ll need.
Product Add-Ons Ultimate allows you to add extra fields and options to WooCommerce so that customers can personalise your products.
The Pro version of the plugin allows you to add ‘child products’ as options within a main product. Child products will be the components of your composite products.
The benefits of using child products
A key feature of WooCommerce composite products is the ability to treat each component of the build-your-own product as a standalone product in its own right.
Let’s take the example of a custom PC product that allows the user to choose their own processor, graphics card, and RAM.
The customer should be able to build their own PC from one page – the ‘Build Your Own PC’ product page. On this page, they should have options to pick the processor they want, the graphics card, and the RAM.
However, let’s imagine that you only have a limited number of each processor available. So having these set up as products means that you can track their inventory level. When they’re out of stock, they won’t be available to the customer.
The Pro version of Product Add-Ons Ultimate gives you the ability to use child products, which is essential for your composite products. And it has a number of other, advanced features to make your products even more powerful, including:
Minimum and maximum quantities
Add-Ons Ultimate gives you several options for specifying quantities for your components. You can:
- Link the quantity to the main product
- Ensure that the component can only be ordered in a quantity of one
- Allow the customer to choose how many of each component they want to add to their composite product
- Allow the customer to choose the component’s quantity – but set minimum and/or maximum quantities
We’ll look at how you might want to use different settings for component quantities in the gift box example below.
You can use either simple or variable products as your child products.
Conditional logic is an essential feature of any advanced composite product. Certain components might only be available depending on choices the customer has made. For example, your gift box might include different products depending on the size of the box. Conditional logic makes this possible.
Find out more about conditional logic here
Components can be organised in different fields and groups. This streamlines the purchasing process for the customer.
Groups can be displayed in a single column, as tabs, or in an accordion layout so that users can toggle visibility on and off.
Composite product pricing
You can price your composite products in a couple of different ways:
- Either set a fixed product price for your composite product. Whatever components the customer chooses, the price will always be the same.
- Or let the combined price of the component products determine the price.
Maybe you want to offer your customers a discount for purchasing products as part of a kit. With Add-Ons Ultimate, you can specify a discount for a child product bought as part of a composite product that wouldn’t be available if the product was purchased by itself.
Component display options
You can choose between different layout options for your components. All options allow you to display product images for each component.
Do you need to ensure that some or all components are selected? Add-Ons Ultimate allows you to specify which fields are required.
Scenario 1: How to create a custom ‘build your own computer’ product in WooCommerce
Let’s look at a couple of specific use cases. These are just examples of how you can build WooCommerce composite products, which you can modify as needed for your own requirements.
To create a build your own computer product in WooCommerce, just follow these steps:
- Install WooCommerce Product Add-Ons Ultimate
- Create your components as products
- Create your main product
- Add fields for each component
You can also refer to this working example of the composite product on the demo site.
Step 1: Install WooCommerce Product Add-Ons Ultimate
You’ll get an email when you purchase Product Add-Ons Ultimate. Download the plugin from the link contained in that email.
Upload and install the plugin by following these instructions.
Step 2: Create your child products
With the Add-Ons Ultimate plugin installed, you can start to create the products that will be used as components for your ‘build your own PC’ product.
In this example, let’s say that we’re going to allow our customers to configure the following items:
- Graphics card
We’re also going to let them configure some periphals, e.g.:
You may have far more components than these, but hopefully this should be enough of an example.
So you need to create each component as a separate product. Let’s take the first component, processors, as our example. Perhaps your store specialises in Intel processors. You need to create a product for each processor that you stock, e.g.:
- Intel Core i3 Quad Core Processor
- Intel Core i5 Quad Core Processor
- Intel Core i7 Quad Core Processor
- Intel Core i9 Quad Core Processor
Create each one as a separate product.
Once you’ve set up all your processors, you’ll need to repeat for all your different product types.
Hide your child products
If your components are not available to be purchased separately and can only be bought as part of the composite product, you can choose to hide them. This will prevent these products from appearing in shop archives.
If you don’t want users to be able to find or access the hidden products at all, even with the direct URL, you can check the ‘Redirect hidden products’ option in WooCommerce > Settings > Product Add-Ons.
So even if the user knows the direct URL to the hidden product, they won’t be able to view it or purchase it unless it’s part of the composite product.
Step 3: Create your main product
When you’ve created all your components, you need to create one single product that will be the main ‘Build Your Own PC’ product. This will be the composite product.
Composite product prices
If you want to set a base price for your composite product, just enter a value in the ‘Regular price’ field. The total price of the product will be a sum of this price and the price of all the selected components.
Step 4: Add fields for each component
Finally, you need to add the components as add-on fields to your main product.
In the main product edit screen, click on the Product Add-Ons tab here:
Create component groups
From this panel, you can add your extra fields. Let’s create two groups, one for Core Components and one for Peripherals.
- Click ‘Add Group’ and enter the name of the first group, e.g. ‘Core Components’
- Click ‘Add Group’ and enter the name of the second group, e.g. ‘Peripherals’
- You can enter descriptions for each group if you wish.
Set group layout
You might like to organise groups on the page to help your user and create a more ‘step-by-step’ feel for the composite product.
To do this, you can choose either ‘Accordion’ or ‘Tab’ in the ‘Group Layout’ setting.
In the build your own computer demo, I’ve used the ‘Accordion’ layout so that only the fields from one group is visible at a time. The other group is collapsed and all its fields are hidden. This makes it easier for the user, especially when you have a large number of fields.
Create add-on fields for components
You’ll need to repeat the following process for each component:
- In the first group, click ‘Add Field’
- Give the field a name, e.g. ‘Processor’
- Choose ‘Products’ as the field type
- Type the names of your processor products into the ‘Child Products’ field
- Choose the layout for your component, e.g. a select field
- Because the PC will need a processor, select the ‘Required Field’ option
The field will look something like this:
Repeat for each component, ensuring that you add the field to the correct group.
The finished build your own computer product
When you’ve added all your child products as components, you can publish your main product. It should look something like this:
You can preview this product here.
Scenario 2: How to create a WooCommerce gift box product
In this example, we’ll look at creating a gift box or gift hamper product in WooCommerce using composite products. We’ll also incorporate some conditional logic to see how that can be used.
Our example will be a breakfast hamper where the customer can choose different sizes. The number of items included in the hamper will vary depending on its size.
Because we’re such nice people, we’re also going to give the customer a free gift if they pick the larger hamper. Life doesn’t get better than this.
Also, instead of using select fields for each component like the custom PC above, we’ll make it more visual and include an image for each item.
So the steps to create a gift box product in WooCommerce are:
- Install and activate the WooCommerce Product Add-Ons Ultimate plugin
- Create each gift item as a product
- Create the main gift box product
- Set up the gift item products as add-on fields in the main product
- Assign some conditional logic
It’s a bit more complex than the PC product but, again, it’s mainly to help give you some ideas of what’s possible.
Step 1: Install WooCommerce Product Add-Ons Ultimate
Follow the step above to install and activate Add-Ons Ultimate. Don’t forget: you’ll need the Pro version.
Step 2: Create each gift item as a product
Let’s imagine that our customers are going to be able to choose a certain number of items to fill their food hamper. Depending on the size of hamper they choose, they’re going to be able to add different teas and coffees.
Then, if they select the ‘Deluxe’ hamper, they get a free mug.
Okay, I admin this is probably not the most exciting hamper you’ll receive as a gift but hopefully it’s a good example.
In the demo product, I’ve created several coffee, tea and mug products as individual standalone products. You can do the same for your own hamper items.
Step 3: Create the hamper product
With all your items added, you can create the main product. Again, like the custom built computer, a hamper is just a composite product made up of different components – in this case, teas and coffees.
Step 4: Set gift items as add-on fields in the hamper product
We’re going to create some add-on fields for our hamper product:
- A select field for the user to select the size of hamper
- Two products fields where we’ll enter the component products. Only one of these fields will be displayed at any one time, depending on the value of the select field
- Another products field for the free mug. This will only be displayed if the customer chooses the deluxe option in the select field
Create a select field
In your hamper product, click on the ‘Product Add-Ons’ tab:
- Click ‘Add Group’
- Click ‘Add Field’
- Select ‘Select’ as the field type
- Click ‘Add Option’ to start adding options
Your field might look something like this:
Create product fields for the component products
- Add another field and select ‘Products’ as the field type.
- Enter all your gift items into the ‘Child Products’ field.
- Set the ‘Products Layout’ to ‘Checkboxes’ and the ‘Products Quantities’ to ‘Independent’ (this means that the customer can set their own quantities for each child product)
- Set the ‘Minimum Child Products’ and ‘Max Child Products’ to the same value – in this case, 4. This will ensure that the customer will have to select 4 items from this field if they want to buy the hamper
Now, duplicate this field and update the minimum and maximum child products to 6 (or whatever you’re using in your product). We’re going to use these duplicate fields in our conditional logic.
Note also that the ‘Products Layout’ is set to ‘Checkboxes’. This will mean that users can pick different component products as if they were checkboxes – so they can pick more than one, or deselect a previously selected one if they wish.
Also, the ‘Product Quantities’ field is set to ‘Independent’. This means that the customer can choose how many of each component they want: e.g. I’ll have one Colombian blend coffee and two Earl Grey teas.
Step 5: Assign some conditional logic
In your first products field, click ‘Add Condition’.
Set the parameters to ‘Show this field if’ ‘All rules match’. Then choose your select field in the first column and the first value in the last column:
Now, your first products field will only be displayed when the user picks the first hamper type.
Repeat this for the duplicate products field, but change the condition so that it will only be displayed if the user selects the second option:
So this field will only be displayed if the user selects the other option from the select field. In this way, only one products field will ever be displayed at one time.
Add a field for a free gift
Remember that we’re going to tantalise our users with the offer of a free gift if they choose the ‘Deluxe’ hamper option?
We’ll do this by adding another ‘Product’ field and adding a single product to it. We choose a select field as the layout and ‘One only’ as the quantity option. In this way, it will automatically get added to the cart when the user clicks ‘Add to cart’.
The condition is the same as the field above.
The finished gift hamper product
You should end up with a composite product something like this:
Or you can see it working here.
Price totals and composite products in orders
Let’s look at a couple of other aspects of composite products built using WooCommerce Product Add-Ons Ultimate.
The product price
You can choose an alternative label for the composite product price (or even to hide it altogether).
Combined product price totals
On the front end, note the pricing table just above the Add to cart button. Add-Ons Ultimate breaks down the costs of each component in your composite product.
The table shows the base cost of the product, the combined cost of any selected components, and a combined total.
You can edit the labels if you wish, or hide the table and just display the combined total.
Receiving orders containing composite products
When a customer purchases a composite product, you’ll receive a standard WooCommerce email itemising every component.
And in the order screen, you’ll also be able to see each component.
Because the components are products in their own right, stock and inventory levels are adjusted, and the correct weight is calculated for shipping purposes.
WooCommerce composite product demo examples
Here’s a list of WooCommerce composite products currently on the demo site:
- Build your own breakfast hamper – product demo
- Build your own computer – product demo
- Complete the look – product demo
- Create your own cereal – product demo
- Mixed wine case – product demo
You can see a complete list of composite product examples on the demo site in the ‘Build Your Own’ category.
WooCommerce Product Add-Ons Ultimate for build your own products
Hopefully this article has given you some great ideas and some concrete methods for creating WooCommerce composite products.
All you need is Product Add-Ons Ultimate:
If you like case studies like this, you might like the following posts too: