WooCommerce Composite Products: build your own product

The simple way to configure products in WooCommerce

WooCommerce composite products are a way of letting your customers configure their own products. This article will show you step by step how to set up composite products with a couple of real-life examples looking at how to create a ‘build your own computer’ product in WooCommerce and how to create a gift hamper product. 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.

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.

WooCommerce Product Add Ons Ultimate - WooCommerce composite products plugin

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.

Other features

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.

Find out more about conditional logic here.

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, 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.

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.

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.

WooCommerce build your own computer product

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.

WooCommerce Product Add Ons Ultimate - WooCommerce composite products plugin

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.

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.

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:

Product Add-Ons Ultimate tab

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.

Create add-on fields for components

You’ll need to repeat this 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:

Component field

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:

WooCommerce build your own computer product

You can preview this product here.

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:

  1. Install and activate the WooCommerce Product Add-Ons Ultimate plugin
  2. Create each gift item as a product
  3. Create the main gift box product
  4. Set up the gift item products as add-on fields in the main product
  5. 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.

WooCommerce Product Add Ons Ultimate - WooCommerce composite products plugin

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:

WooCommerce Product Add Ons Ultimate panel
  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:

Select field

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
Gift items field

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:

Conditional logic

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:

Conditional logic

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.

Free gift product

The finished gift hamper product

You should end up with a composite product something like this:

Create your hamper product WooCommerce

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).

Hide price label

Combined product price totals

Product 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.

WooCommerce composite product order screen

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:

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:

WooCommerce Product Add Ons Ultimate - WooCommerce composite products plugin

Further reading

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


Popular Posts

One thought on “WooCommerce Composite Products: build your own product

Hey There,
Do you know of a composite plugin that would adjust the product photo as the component selections were being made? For example if I have a primary and secondary color choice that I could see each selection populate the designated section of the photo (line drawing vector in this case) so that customers could actually “see” the product they are designed prior to purchase?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *