WooCommerce Mix and Match: How to Let Customers Choose Their Products

WooCommerce is an incredibly powerful and flexible e-commerce platform. You can use it to create just about any type of online store and offer all kinds of online shopping experiences. You can even use it to create a WooCommerce mix and match products website.

WooCommerce mix and match products

Whether you’d like to start selling custom gift hampers, assorted donuts and pastries, or bespoke food boxes, WooCommerce makes it incredibly easy to get started.

Paired with the right plugins, WooCommerce is the perfect solution for selling bespoke mix and match products and taking customized orders. Once you have everything set up, customers will be able to create personalized orders. They can view items in a user-friendly, catalogue-like list, choose options and tick the items they’d like to add to their order, and place their customized order. All from a one-page WooCommerce order form.

In this article, we’ll cover everything you need to know about WooCommerce mix and match products. You’ll discover how people use them, and how your online shop can benefit from letting customers personalize their orders. We’ll also step through a quick tutorial to help you create your own WooCommerce mix and match online store.

Let’s get started!

Some examples of WooCommerce mix and match products

Mix and match products work by allowing customers to select individual products they’d like to purchase and add them to a gift hamper, product box, or bundle. Let’s take a look at some of the most popular types of mix and match products that you can sell with WooCommerce.

Crate with various food jars.

Example #1: Pizza, sandwich, and salads

Customizable food items such as pizzas, sandwiches, and salads are often sold using a mix and match system. For instance, a WooCommerce-based restaurant that allows customers to place orders online usually allows customers to choose toppings and filings to put together their own meal.

Your WooCommerce mix and match products offering may vary slightly depending on what you’re selling. However, the core concept remains the same. Essentially, you allow your customers to build their own meal. For instance, if you were selling pizzas then you’d let customers choose their base, sauce, toppings, and dips. They mix and match the pizza options to create their own customized pizza – all using WordPress and WooCommerce.

Example #2: Gift hampers and product boxes

Buying a hamper as a gift is always more special when you can select the individual items you’d like to add to it. Whether you’re selling face and body products, wines and candles, decadent chocolate, corporate gifts, or gourmet products, you can create a personal gift experience by letting customers mix and match their own selection of items.

There are, of course, a number of different ways you can offer WooCommerce mix and match products through your online store. Some companies, for instance, sell custom meat or vegetable boxes to customers on a subscription basis. Keep reading to learn how to do this and more.

How do customers mix and match products in WooCommerce?

Create a WooCommerce mix and match products order form to let customers build their own customized product boxes. It will look something like this:

An example of a build-your-own-product page.

This is how the mix and match products system works:

  1. You have a page on your online store where you list all of the products (and variations or other options) that customers can choose from. Generally, the products are divided into several categories, each listed separately on the mix and match page. The categories should be based on how the customer would actually put together their mix and match product box.
  2. The customer chooses items to create their own unique mix and match products box. Standalone items appear on individual rows of a table, whereas mutually exclusive items appear as dropdown lists within a single row of the table. The customer simply ticks a checkbox next to each item they’d like to add to their mix and match product box.
  3. Once they’ve picked out all of the items they’d like to purchase, they click the Add Selected to Cart button. This adds all the selected items to the WooCommerce shopping cart.
  4. The customer views their cart and can make changes to it, if necessary. Once they’re happy with the order, they can proceed to the Woo checkout page and make a payment.
  5. As the store owner, you’ll receive an email with the order details. You can then build the customer’s mix and match product box, add the products they selected to it, and ship it to them.

Which WordPress plugins will I need?

Under the hood, the mix and match products system uses WordPress to power your overall website. It requires free WooCommerce plugin to create products and manage the checkout process. You’ll also need the WooCommerce Product Table plugin to list your inventory in a table layout on the mix and match product order form.

WooCommerce Product Table

The easy way to sell mix and match products with WooCommerce.

GET THE PLUGIN

Next, I’ll tell you how to set up your WooCommerce mix and match plugin. But first, let’s look at a real-life case study of a website with this exact setup.

Case studies – How other WooCommerce websites sell mix and match products

Inspire Cosmetics – selling mix and match cosmetics boxes

Inspire Cosmetics have created a multi-step process for ordering mix and match make-up and cosmetics boxes.

They used the Beaver Builder WordPress page builder plugin to create a series of four connected pages in a tabbed layout. Each tab contains a separate list of mix and match products, created using the WooCommerce Product Table plugin.

This makes it quick and easy for customers to choose a box, select the contents and place their order in WooCommerce.

Build your own hamper website WooCommerce

Barks & Squeaks – selling mix and match pet hampers

Barks & Squeaks use WooCommerce and WooCommerce Product Table to sell mix and match gift hampers for pets.

They list the items from each category on a single page. The customer chooses their box options first, then scrolls down to mix and match the contents.

Now you’ve learned all about how a WooCommerce mix and match plugin works. Next, I’ll tell you how to set it up on your own WordPress website! Keep reading and we’ll get started straight away.

How to create a WooCommerce mix and match products website

Letting customers put together their own product bundles using a product configurator can help you increase sales and make the customer feel special.

This tutorial assumes you already have WooCommerce installed on your WP website. If not, check out fantastic guide on how to create a WooCommerce online store. When you’re ready, continue this tutorial to transform it into a WooCommerce mix and match product configurator.

Here’s a video on how to set it all up. You can also read our detailed written instructions below.

Step 1: Create the mix and match product categories

First, figure out how you’d like to design the mix and match products user flow. Decide which categories you’d like to divide the mix and match ordering system into.

For example, if you wanted to let customers build their own gift hampers, you might consider creating a category for box (or hamper), the contents, and wrapping and filling:

WooCommerce mix and match products categories

It’s a good idea to create a logical category structure that takes the customer on a journey and helps them put together their WooCommerce mix and match product in an intuitive and user-friendly way. In the above example, customers would order using a three-step process:

  1. Select a box or hamper.
  2. Choose the items they’d like to add to the box or hamper.
  3. Configure padding and wrapping options.

This way, your customers can mix and match their own bespoke gift hampers and personalized product boxes.

Once you’ve settled on which categories you’d like to create, head over to Products -> Categories and create as many as you need.

Step 2: Plan out products and add them to your online store

Next, we’ll add the individual items we want to sell to our WC online store. The items that customers can mix and match to build their product box should be added as WooCommerce products.

Following our example, here are some of the WooCommerce products you might add under each mix and match category:

Box/Hamper

  • Hamper
  • Box

Contents

  • Candied Nuts
  • Luxury Biscuits
  • Decadent Chocolates
  • Red Wine Bottle
  • White Wine Bottle

Packaging

  • Gift Wrap
  • Ribbon
  • Straw Filling

Items added as products in WooCommerce.

First, jot down all of the products you’d like to sell. Categorize them under one of the categories you created in the previous step. Once that’s done, you need to decide whether you’d like to create each item on your list as an individual product or group it into variations.

To decide whether a particular product needs to have variations, consider whether the customer would have to make an either/or choice. In the example outlined above, the customer would have to pick either the hamper or the box. Whereas in the second stage, they’d simply be asked to select all of the items they’d like to add to their product box (or gift hamper).

Add products and/or variations based on these principles:

  • For ‘or’ choices where the customer can only choose one option, create a WooCommerce variable product. Add each option as a variation.
  • For ‘and’ choices where the customer can choose multiple options, create a standalone WooCommerce product for each item.

Tip: If you want to add multi-select options to individual products, keep reading to learn how.

Step 3. Add products to WooCommerce

Once you’ve planned out your products, add them to your WooCommerce store by following these steps:

  1. Navigate to Products –> Add New from the admin panel.
  2. Enter the mix and match product’s details such as product title, description, and featured images.
  3. Assign categories and tags.
  4. From the Product Data section, choose a product type based on the format you’ve decided:
    1. Simple Product. For standalone products that customers can add to their mix and match product bundles without variations, select the Simple Product.
    2. Variable Product. Select Variable Product for all mutually exclusive items that customers can personalize before adding to their shopping carts. Follow these instructions to add variable products.
  5. Click the Publish button.

Follow these steps to add all of your products to your online store.

Step 3: Create a mix and match products page

Now we’re getting to the fun part! This is where your WooCommerce mix and match product configurator comes to life.

By now we’ve added all of the products to our WooCommerce store and categorized them. Next, we’ll list everything in a mix and match product order form. By doing so, customers will be able to mix and match products and build custom gift boxes.

How to set it up

  1. Purchase the WooCommerce Product Table plugin and install it on your WordPress website. You’ll receive a confirmation email with installation instructions and a plugin license key.
  2. Head over to WooCommerce –> Settings –> Products –> Product Tables. Configure the following settings in the Add to cart column section:

WooCommerce Product Table settings page.

  • Set the Add to cart button option to Checkbox only.
  • Set the Variations option to Show as dropdown list.
  • Choose Below table next to the ‘Add Selected’ position
  1. Go to Pages –> Add New to create a new page where we’ll list the WooCommerce mix and match products. Add any text that will appear above the order form, such as instructions or information about the ordering process.
  2. Divide the page into sub-headings. Each sub-heading will be based on the categories you created in Step 1. Following our example, the sub-headings might be Step 1 – Choose a Box, Step 2 – Choose your Contents, and Step 3 – Choose the Finishing Touches.
  3. Finally, add the following shortcode under each sub-heading: [product_table category="toppings"]. Replace toppings with the slug of the corresponding category. You can get the category slug from the Products > Categories.

Tip: Use the other settings and the Product Table knowledge base to further customize your WooCommerce mix and match products order forms. For example, you can choose which columns to include in the product list. 

That’s it! Now hit the Publish button and preview your page on the front-end. It should look something like this:

Mix and match products order form on the front-end

Bonus tip #1 – Add extra mix and match product options

Variation Dropdowns with Addons in Product Table

Product add-ons appear in the add to cart column of the mix and match product configurator.

So far, you’ve learned how to use variations to add a choice of options for each mix and match product. This is fine for most WooCommerce mix and match configurators. However, variations aren’t suitable if customers need to be able to select more than one option at a time.

Fortunately, you can easily do this with the WooCommerce Product Add-Ons plugin. This fantastic extension makes it easy to add extra options to your mix and match products. For example, you can add multi-select checkboxes to each product. You can even add text boxes where the customer can enter a personalized message.

Bonus tip #2 – Sell mix and match product subscriptions

Most mix and match WooCommerce product configurators sell products on a one-off basis, with a single payment.

If you prefer, you can create mix and match product box subscriptions. The instructions are the same as above, but you need to add the WooCommerce Subscriptions plugin to take repeat payments.

WooCommerce Subscriptions makes it easy to accept free trials and regular payments for each product. You can choose whether to offer a free trial and whether customers will be billed weekly, monthly, or whatever frequency you like.

Bonus tip #3 – Restrict how many mix and match items the customer will order

So far, you’ve learned how to sell mix and match products by setting a fixed price for each product or variation. The total order cost is the sum of all the products that the customer selects and adds to their cart.

Some WooCommerce mix and match websites prefer to set a fixed cost for the entire product box. If you do this, then you’ll need to add a price for the box itself, and set the price of the contents products as $0.00. (You can easily hide the price column of the tables listing the box contents.)

If you do this, then you’ll want to restrict the number of products that the customer can order. You can easily do this with the Min-Max Quantities or YITH Maximum Quantities plugin. These plugins let you create minimum and maximum quantity rules. They prevent customers from ordering the wrong amount – essential for selling fixed price mix and match products in WooCommerce.

Bonus tip #4 – Sell mix and match packages with quantity-based discounts

Perhaps you want to sell WooCommerce mix and match products with a choice of packages, with discounts based on the number of products ordered. This is a good way to give discounts based on the number of photos purchased, without having to restrict the number of products that each person can buy.

To do this, use the Dynamic Pricing plugin to dynamically change the price based on the number of products in the cart.

Next, you need to display the information on the page in a format that will encourage people to buy more:

  1. At the top of the page, add information about the different packages and prices.
  2. Underneath, use WooCommerce Product Table to list your mix and match products.

Customers can choose as many photos as they like and they will automatically be charged the correct price for their package.

Conclusion

Letting customers mix and match products to create personalized product boxes and gift hampers is a great way to deliver an exceptional customer experience. And the best part is that it’s incredibly easy to do with WooCommerce and the WooCommerce Product Table WordPress plugins.

WooCommerce Product Table

The ultimate WooCommerce mix and match products plugin.

GET THE PLUGIN

Now you know how to create your own WooCommerce mix and match products order form. Hopefully, you’re in a good position to take things further.

Also, be sure to check out our step by step tutorial on how to use WooCommerce to sell ‘build your own’ products for inspiration and detailed instructions!

How do you use mix and match products in your WooCommerce store? We’d love to hear from you so let us know by commenting below!