Add separate variation selections inside quantity swatches

Starting from version 2.0 of WooCommerce Quantity Discounts, Rules & Swatches, it’s possible to display variation selections inside quantity swatches. This is a useful feature because it allows customers to select separate variations for each quantity they want, which is currently not possible in default WooCommerce.

You can test our interactive demo here. The feature looks like this:

This tutorial explains you how to enable this feature in 3 easy steps.

A couple of notes

Here are a couple of important notes before we’re getting started:

• This feature is currently in beta, so we may still update it in the future.
• This only works if all WooCommerce variations of your product have the same price/discount.
• This works with classic themes. Due to WooCommerce limitations, it doesn’t work with block themes yet.

Step 1: enable the feature in the WooCommerce settings

Go to WooCommerce → Settings → Quantity Manager → Quantity Swatches Settings and enable Variant Selection Inside Swatches:

If you don’t see this setting, it means you are running a new Block Theme. Due to WooCommerce limitations, this feature only works with classic themes.

Step 2: configure your swatch design

The next step is to create your quantity swatches design, as explained in detail here. When selecting your Design Type, either choose “Full Width Swatches” or “Full Width Image Swatches”. This feature only works with those 2 designs as it requires enough space to layout variants beautifully.

Step 3: enable the final setting

Next, edit your product and navigate to the Quantity Options tab inside the Product Data box, and enable the Variants Inside setting:

That’s it! Your customers can now select separate variations per quantity they choose!