How to create bulk variations forms in WooCommerce

In this tutorial, you’ll create a WooCommerce bulk variations form that lets customers add multiple variations of a product to their cart in one go. WooCommerce doesn’t allow you to do this by default – so you’ll need the WooCommerce Bulk Variations plugin.

After completing this tutorial:

• Customers will be able to:
  • Enter a quantity for each variation of a product
  • Filter the grid to focus on specific terms
  • Add multiple variations to the cart with one click
• As the store owner or admin, you’ll be able to:
  • Display variations in a grid for products with one or two attributes
  • Show prices, stock levels, and images in the grid
• As a bonus, we’ll also look at how to:
  • Use swatches as filters
  • Add extra fields like file uploads
  • Let customers request a quote

In this tutorial, we’ll assume that you already have WordPress and WooCommerce installed and ready to go.

What is a WooCommerce bulk variations form?

A bulk variations form lets customers order different variations of a product in different quantities from a single form. Say you sell T-shirts, possibly through a wholesale store, and your customers want to bulk order different sizes and colors of the same T-shirt.

With standard WooCommerce, customers select a variation, choose a quantity, and add it to the cart. They then repeat this for every variation they need, which is highly laborious.

A bulk variations form lets customers add multiple variations to the cart with one click. This simplifies ordering for customers and should result in better sales for you. It’s ideal for any store that uses bulk ordering, like wholesale and B2B stores.

This method is specifically for ordering variations of a product direct from the product page. If you need to allow bulk ordering of simple and variable products, you can read our article on how to create a bulk order form in WooCommerce.

What do bulk variations forms look like?

The screenshot below shows a variable product with one attribute. Each variation has its own quantity field, with price and stock levels displayed. Customers can pick as many of each variation as they like and add them all to the cart in one click.

There’s a working demo product here.

In this example, the variable product has two attributes.

You can view this demo product here.

How do you create a bulk variations form?

The WooCommerce Bulk Variations plugin allows you to display quantity fields for every variation in a product that uses one or two attributes. It’s compatible with all themes and page builders.

Step #1: Create your variable product

Create a variable product that uses one or two attributes. In our example, we’ll use Size and Color, but it can be any attributes.

Create your attributes globally in Products > Attributes rather than creating custom attributes for each product. There’s more information on creating product attributes here.

Add your variations, give each one a price, and assign stock.

You now have a variable product that’s ready to display in a grid. Next, let’s set the display mode.

Step #2: Set your display mode

Go to WooCommerce > Settings > Bulk Variations and set the ‘Display mode’ setting to ‘Grid’.

That’s it. Now all your variable products with one or two attributes display in a grid. Now let’s look at some additional settings.

Step #3: Optionally adjust the grid settings

These settings determine how the grid is displayed.

Which mobile layout should you use?

Set ‘Mobile layout’ to ‘Responsive’ to stack the variations in a single column on mobile devices. Set it to ‘Scrollable’ to keep the table layout on smaller screens, so customers can scroll horizontally and vertically.

How do you enable images?

Enable the ‘Enable images’ option to display an image next to each attribute term. Then go to Products > Attributes, select the attribute, edit each term, and upload an image.

How do you show prices?

Enable ‘Show price’ to display the variation price in the grid.

How do you show stock?

Enable ‘Show stock’ to display the stock status for each variation.

How do you display the grid at full page width?

Select the ‘Display grid full width’ option to display the grid at the full width of your product page. The grid moves down the page, below the main product image.

Save your settings. Your grid now displays exactly the way you want it. Now let’s look at how to filter it.

How do you filter the bulk variations form?

Filtering lets customers narrow the grid to a matching row or column instead of scrolling through every combination. It’s particularly useful if you have a lot of variations, because customers can focus on specific terms, for example just ‘Large’.

Customers can filter by one or two attributes using dropdowns. If you use WooCommerce Variation Swatches, they can filter using swatches instead. We’ll look at that in the Integrations section below.

How does filtering work?

When filtering is enabled, a dropdown appears above the grid for each filterable attribute. Customers select a term such as ‘Red’ to hide every row or column that doesn’t match it.

With two attributes, both filters work independently and simultaneously. Selecting Color and then Size narrows the grid to their intersection. Selecting ‘Any’, or clicking a selected swatch again, clears that filter.

Filtering only changes what’s visible. The grid keeps any quantities already entered, even if a later filter change hides their row or column. A customer can filter to Large, enter quantities, filter to Medium, enter more, and then add everything to the cart in one go.

The filter pre-selects the product’s default attribute term, if one is set. The grid then opens already narrowed to it.

How do you enable filtering?

Filtering has three settings tiers:

• Global default. Go to WooCommerce > Settings > Bulk Variations > General and tick ‘Enable filtering’. It’s off by default.
• Per attribute. Go to Products > Attributes > Configure terms > Edit on a global attribute. Set ‘Grid filtering’ to ‘Use global setting’, ‘Yes’, or ‘No’ to override the global default for that attribute site-wide.
• Per product. Set ‘Grid Filtering’ in the ‘Attributes’ tab of the ‘Product data’ section.

The per-product setting takes precedence over the per-attribute setting, which takes precedence over the global default.

Filtering only works when Grid mode is active for the product. Grid mode requires one or two variation attributes.

Your customers can now filter the grid to find the variations they need. Now let’s look at how Bulk Variations works with other plugins.

Integrations

Bulk Variations works with WooCommerce Variation Swatches, Product Add-Ons Ultimate, and Request a Quote. Each one extends what customers can do from the grid.

Can you use swatches to filter the grid?

WooCommerce Variation Swatches works with the grid filters. If an attribute uses color, image, text, or radio swatches, the filter for that attribute renders as matching swatches instead of a dropdown.

The filter uses the same styling and per-term settings you’ve already configured in Variation Swatches. Swatches are always deselectable in the filter, regardless of the ‘Deselectable swatches’ setting. Click the selected swatch to clear the filter.

You can see a working demo product here.

Can you add extra fields to the bulk variations form?

Bulk Variations is compatible with the WooCommerce Product Add-Ons Ultimate plugin, so you can add extra fields to your products. In the screenshot below, you can see a variable product with a variations grid, plus extra fields like the option to upload an image and select its placement.

How do you add a file upload field?

Let’s look at how to add a file upload field as an example:

• Click the ‘Product Add-Ons’ tab in the ‘Product data’ section
• Click ‘Add Group’, then ‘Add Field’
• Select ‘Upload’ as the ‘Field Type’
• Enter a name for your field
• Optionally, add a price

Save and publish your product. Now customers can upload a file alongside their selected variations.

How do you price add-on fields?

Add-Ons Ultimate allows you to assign a price to each add-on field. You can choose whether the price is multiplied by the number of items in the cart or applied once.

Say you want to charge customers extra to add a logo to their product, for every item they order. Add a value in the ‘Field Price’ setting, and the price is multiplied by every item. If a customer chooses 5 of one variation and 6 of another, the add-on field is charged 11 times.

To charge a one-off fee instead, select the ‘Flat Rate’ option. This is ideal for a set-up fee, because the charge is applied as a single fee in the cart regardless of how many items are in the order.

Can customers request a quote for their selection?

Yes. With WooCommerce Request a Quote, you can add a quote button to the product page. Customers choose their variations, then send them to you in a quote request. There’s more information on setting up Request a Quote here.

WooCommerce bulk variations form – recap

So that’s how to create a bulk variations form in WooCommerce using the Bulk Variations plugin. We set the display mode to Grid, adjusted the grid settings, and added filtering so customers can focus on the variations they need. We also looked at integrations with Variation Swatches, Product Add-Ons Ultimate, and Request a Quote.

Bulk Variations is compatible with all themes and page builders, including Astra, Flatsome, and Woodmart, and page builders like Elementor and Divi. If you have any questions, our world-class support team is on hand to help. And it’s backed by a 14-day money-back guarantee, so you can try it risk-free.