How to add quantity swatches in WooCommerce

Looking for a way to make it easier for customers to place bulk orders? This tutorial explains how to easily add quantity swatches in WooCommerce.

Quantity swatches allow customers to order more units of a product and improve the overall user experience on your WooCommerce site. By displaying quantity swatches, you can also let customers know how much they save by buying more from you. This is perfect for stores that sell products customers typically buy in bulk.

In this article, we’ll talk more about WooCommerce quantity swatches and show you step-by-step how to add them to your WooCommerce site using a plugin.

Examples of quantity swatches in WooCommerce

Before we jump into creating quantity swatches to show quantity-based discounts, it’s important to first understand what they look like and why you might consider using them.

The term “quantity swatches” can be a bit confusing. That’s why this section shows you some visual examples. Furthermore, you’ll find that quantity swatches are often referred to as:

• quantity buttons
• clickable quantity swatches
• quantity selectors

Instead of the boring, unhandy quantity input box that WooCommerce includes out-of-the-box, you can use quantity buttons (swatches) like thousands of sellers do on Amazon.

Here are 4 different examples of quantity selectors made with WooCommerce:

What are quantity swatches (selectors) in WooCommerce?

Quantity swatches in WooCommerce allow you to display attractive quantity buttons that show the price of a product when bought in various amounts. For instance, you can sell a product for $10 if customers purchase one unit and set the price to $8 if they purchase at least 4 units.

Instead of displaying information as plain text, you can show it in quantity swatches. Customers prefer to click on easy-to-read buttons. This not only makes it easier for users to view quantity discounts but also encourages them to spend more when shopping from your online store. It’s an up-sell within your product page!

Advantages of using quantity selectors in WooCommerce

Let’s dive deeper into some of the main benefits of using quantity swatches on your WooCommerce site:

• Receive bulk orders. One of the main benefits of displaying quantity swatches is to highlight products you sell in bulk. You can let customers know that they can place bulk orders for specific products when purchasing from your online store. So, when customers visit the product page, they will see the quantity discounts in attractive swatches, which makes it easier to place bulk orders.
• Improve user experience. Making it easier for customers to see bulk discounts by displaying them in quantity swatches is a great way to improve their overall user experience. Especially on mobile, it is easier to click on a quantity selector than to enter a number in an input field. It’s all about removing friction!
• Increase average order value. Displaying quantity swatches also helps increase the average order value on your online store. You can encourage customers to purchase more units and avail themselves of discounts. For instance, customers can purchase a product that costs $20 per unit for $16 per unit if they buy 5 or more units. This not only encourages customers to spend more but is also a great way to generate more revenue for your business.
• Boost sales. Quantity swatches inform more customers about the ongoing quantity discount offers on your online store. This is a great way to improve product visibility while also increasing your online sales.

Quantity buttons are a great addition to any online store selling products in bulk. They’re also a great way to highlight the ongoing discount offers for products. By displaying easy-to-read quantity swatches on single product pages, you encourage customers to place larger orders and increase your store’s average order value.

How to add quantity buttons to your WooCommerce site

WooCommerce doesn’t have built-in functionality that lets you display quantity buttons on single product pages. Instead, you can use a WooCommerce quantity swatches plugin like WooCommerce Quantity Discounts, Rules & Swatches.

The WooCommerce Quantity Discounts, Rules & Swatches plugin offers an all-in-one solution for creating and displaying quantity discount rules.

You can change the generic-looking quantity buttons and display bulk discounts on your site in a more visually appealing way. Customers can learn about bulk discounts at a glance and select the number of products they want to purchase using one-click quantity swatches.

In addition to this, the plugin is intuitive and easy to use, even if you’re not very tech savvy. You can create tiered pricing for any product on your online store and display discounts on the front-end that are easier for customers to understand. It’s the perfect solution if you’re looking for a plugin that lets you create discount rules while also letting you display them in beautiful-looking quantity swatches.

Here, we’ll show you how to use the WooCommerce Quantity Discounts, Rules & Swatches plugin to add quantity swatches to your store.

Step 1: install the WooCommerce Quantity Discounts, Rules & Swatches plugin

Start off by getting the WooCommerce Quantity Discounts, Rules & Swatches plugin and installing it on your WooCommerce site.

Once the plugin is installed on your site, navigate to WooCommerce → Settings → Quantity Manager and enter your license key to activate the plugin. Click on the Activate button and then the Save changes button to continue.

Step 2: add quantity (bulk) discount tiers

Adding quantity swatches to any WooCommerce product is pretty simple. All you need to do is navigate to the product’s edit page and set a few options.

But before adding a quantity swatch, it’s essential to create some sort of bulk discount (often referred to as “tiered pricing” too), so users receive a discounted price per unit after selecting a larger quantity. Scroll down to the Product data meta box and click on the General tab.

Using the Tiered pricing type dropdown menu, you can select how you’d like to configure your discounts. You can choose between 2 options:

• Fixed price: the price you enter is the discounted unit price.
• Percentage: the number you enter is the percentage discount the customer will receive.

Next, you can add tiers by clicking the Add tier button. A tier has only 2 settings:

• Starting quantity: the minimum quantity the customer has to purchase before they get this discount.
• Discount: the percentage discount (if Tiered pricing type is set to Percentage), or product unit price (if Tiered pricing type is set to Fixed price).

Here’s an example:

You can offer a 5% discount if customers get 2 pieces and a 10% discount if they purchase 5 units. You’d implement it like this:

As you can see, we’ve added 2 tiers for a quantity of 2 and 5.

Step 3: display the discounts with quantity swatches

Once you have created your quantity discounts, you can start setting up the quantity swatches to display the offer on the front-end (almost like an up-sell).

Click on the Quantity options tab from the same Product data meta box and select Swatches using the Quantity selector design dropdown menu:

You can set the Quantity title field to display a title for the quantity selector on the product page. If you don’t want a title, you can leave it blank. You can also specify how many items will appear in each row using both the Items per row and the Items per row on mobile fields. Now using the Design your quantity selector section, you can start adding quantity swatches:

The Quantity field is for specifying the button with the quantity that the customer selects. You can set a main heading or title for your quantity swatch using the Label field. You can also display additional information on the quantity swatch button using the Byline field. And, finally, the Highlight field comes in handy to show the discount or to display more information about the quantity discount. For example, you can use the highlight to display a “most popular” label.

In the example above, we showcase a total of 3 buttons. One specifies that the customer will receive no discount if they purchase only one unit, the second button will display the 5% discounted price, and the third button will let customers buy 5 units at once and receive a 10% discount.

Adaptable design

None of these fields in the quantity selector design are required, meaning you can change the final look of the clickable buttons by omitting information. Here is a visual guide of where information appears on your swatches:

In the image above, you can see the first swatch only has a label. No other information is needed and the design adapts accordingly.

Once you’ve set it up, make sure to click on the Save changes button to continue.

Dynamic codes

Note that we used a pricing number in the settings above, but you can also use dynamic shortcodes that will automatically translate to the correct numbers. You can add things like: [price], [old_price],[discount_percent]

This is handy because when you change your product price, you don’t have to change your swatches settings, as the shortcode will automatically pick up on it & calculate the correct amounts! You can find a full list of shortcodes in our “getting started” article.

Step 4: set swatch colors

The WooCommerce Quantity Discounts, Rules & Swatches plugin also lets you showcase the quantity swatches buttons in your brand’s colors. You can customize the style of your quantity swatches by navigating to WooCommerce → Settings → Quantity Manager and clicking on the Quantity settings link from the top.

You can set custom colors for almost all parts of your quantity swatches and make sure they’re on brand. Other changes can always be made using custom CSS code. We’re happy to help you with that!

When you’ve saved everything, the quantity buttons should look something like this on your website:

Compatibility

WooCommerce Quantity Discounts, Rules & Swatches works particularly well with our other plugins. For example, with Advanced Product Fields for WooCommerce. This powerful combination allows you to create unique & complex products within WooCommerce.

Conclusion

Adding quantity selectors (swatches) in WooCommerce is a great way to encourage more sales and increase the average order value. This is because you help customers visualize the discount they will receive once they purchase more quantities of a product.

The WooCommerce Quantity Discounts, Rules & Swatches plugin is a great option for creating and displaying quantity swatches on your online store, with no coding necessary. It lets you create attractive-looking product pages on your online store, even if you’re not very tech savvy.

Ready to start adding quantity swatches to your WooCommerce site? Get WooCommerce Quantity Discounts, Rules & Swatches today!