WooCommerce composite products: how to build your own product [+video]

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

We’ll look at three different examples of composite products:

• The first scenario looks at how to create a ‘build your own computer’ product in WooCommerce
• The second scenario looks at how to create a gift hamper product
• The third scenario shows how to create a build your own bike composite product

You should be able to use the techniques in these examples for any composite product you want to build.

All three scenarios feature links to fully functioning demo products so you can see exactly how the finished product works.

We’ll also look at other aspects of composite products – like how to track stock of your components and some different ways to display fields in the product page and in the cart.

There’s also a list of WooCommerce composite products demo products.

What are composite products?

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 Pro version of 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.

Track stock levels of add-ons

Using child products as your add-ons means that you can track your stock levels.

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.

Assign SKUs to your add-ons

Because child products are also standard products, you can assign them with SKUs.

Set weight and dimensions of add-ons

If you’re using child products as add-ons, then you can assign them weight and other dimensions like length and width. This means that you can ensure your add-on options will affect shipping costs.

Hiding 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. But you still get all the benefits above of using real products as add-ons.

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.

Other features

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.

Variations

You can use either simple or variable products as your child products.

Conditional logic

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.

Grouping

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, in an accordion layout so that users can toggle visibility on and off, or in a stepped layout.

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.

Discounts

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.

Required fields

Do you need to ensure that some or all components are selected? Add-Ons Ultimate allows you to specify which fields are required.

WooCommerce composite products video

You can check out this video for an overview of many features covered in this article.

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:

1. Install WooCommerce Product Add-Ons Ultimate
2. Create your components as products
3. Create your main product
4. 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:

• Processor
• Motherboard
• RAM
• Graphics card

We’re also going to let them configure some periphals, e.g.:

• Monitor
• Keyboard

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.

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.

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:

1. Click ‘Add Group’
2. Click ‘Add Field’
3. Select ‘Select’ as the field type
4. Click ‘Add Option’ to start adding options

Your field might look something like this:

Create product fields for the component products

1. Add another field and select ‘Products’ as the field type.
2. Enter all your gift items into the ‘Child Products’ field.
3. 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)
4. 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.

Scenario 3: How to create a build your own bike composite product

In this example, we’ll look at how to let customers build their own bike. They’ll be able to select different components like handlebars and frames. The layout will be slightly different to the previous example – using steps to help the user see their progress through the build.

You can see the working demo product here.

Step 1: Install WooCommerce Product Add-Ons Ultimate

As before, install and activate Add-Ons Ultimate. Don’t forget: you’ll need the Pro version.

Step 2: Create each component as a product

In our example, the user can select different components for their bike including frame, handlebars, wheels.

First, we create these as standalone products. There’s a guide to adding products in WooCommerce here.

Step 3: Create the build a bike product

Now it’s time to make the main build a bike product. Create a new product and give it a title.

In the ‘Product Data’ section, click the ‘Product Add-Ons’ tab and create a new group. Each group will be a different step in the process of building a bike.

Give your group a name. In our example, this group will be for the user to make some selections for the bike frame. You can also add some description to help guide the user.

Now we can add some fields:

1. Click ‘Add Field’
2. Give your field a label, e.g. ‘Frame’
3. Choose ‘Products’ as the field type
4. Enter the products that you previously created in the ‘Child Products’ fields. In this case, you’d be entering the frame products
5. Choose ‘Radio’ in ‘Products Layout’ – this means that the user will only be able to choose one of the frames, not multiple frames
6. Choose ‘One Only’ in ‘Products Quantities’ – this means that the user will only be able to choose a single frame for their bike

Now you can create new groups for each step in the process. In the example product there are steps for Frame, Wheels, Handlebars, Seat and Extra Options.

Step 4: Choose your layout

We’re going for a stepped process in this example. So in the ‘Groups Layout’ field, choose ‘Steps’.

This will give us a layout on the front end like this:

The user can click through the tabs at the top or use ‘Next’ and ‘Previous’ buttons.

Step 5: The finished build a bike product

When you’ve added all your groups and fields, you’ll end up with a finished product like this:

You can check this out here.

Composite product price totals and summary panel

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.

Product summary panel

Alternatively, you can provide the user with a summary of their selected options in a single panel.

To enable this summary panel, go to the Customizer then click the Product Add-Ons Ultimate > General tab. Select the ‘Enable summary panel’ option.

Composite products in the cart

By default, all component products will be listed as separate line items in the cart.

However, when you have a lot of components in your composite product, this can make the cart cluttered. By checking a couple of options in the settings, you can remove the child products as line items and display them as metadata within the main product – like this:

To achieve this, just go to WooCommerce > Settings > Product Add-Ons > Products and check the following options:

• Hide child products in the cart
• Display child products as metadata

Editing composite products

It’s easy to allow your customers to edit composite products, even after they’ve already added them to the cart.

Go to WooCommerce > Settings > Product Add-Ons and check ‘Enable editing’.

Customers will then see an option to edit their options for products in the cart.

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
• Build a bike
• 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:

Further reading

If you like case studies like this, you might like the following posts too:

• There’s an article on creating mix and match wine cases here
• How to create a takeaway order form for restaurants
• How to build a ‘create your own cereal’ product in WooCommerce
• How to create a mix and match product in WooCommerce