How to create bulk variations forms in WooCommerce

Avatar

In this tutorial I’m going to show you a couple of ways to create WooCommerce bulk variations forms. A bulk variation form allows the user to add multiple variations of a product to their cart in one go. As an extra feature, your users will also be able to include add-on fields with their variations (if required).

Creating a WooCommerce bulk variations form

Let’s quickly look at what we mean by a bulk variations form in WooCommerce. Essentially, it’s a quick way of allowing your users to order different variations of a product in different quantities.

A simple example would be tee-shirts. Let’s say you’re selling tee-shirts (possibly through a wholesale store) and your customers will want to bulk order different sizes and colours of the same basic tee-shirt.

With the standard way that WooCommerce works, the customer would need to go to the product page, select their variation, choose the quantity, then add it to their cart. They’d then need to repeat this process for every variation required. It’s highly laborious.

So let’s look at two much better methods.

Method #1: Create a bulk variations form in a grid

In this method, we’ll create a grid of our variations on a product page. It’ll look like this:

See how the product’s size and colour variations are now displayed in an easy to read grid? The customer can just enter how many they need of each variation and click add to cart.

As an optional extra, we’ll also look at how to include additional fields on the product page so that your customers can personalise the product. For instance, they can specify some text or image to be printed on the tee shirts.

Let’s take a look at how to create this.

Creating a bulk variations grid

To create a variations grid like this, you’ll need the Pro version of the WooCommerce Product Add-Ons Ultimate plugin.

WooCommerce Product Add-Ons Ultimate

Enhance the shopping experience on your store by allowing customers to personalise your products

Find Out More

The Add-Ons Ultimate plugin allows you to add extra fields to your products so that your customers can personalise the products. To create our variations grid, we’re going to use a specific feature called ‘Child Products’. This allows you to use other products as extra options within a main product.

Step 1: Create your variable product

The first step is to create your variable product. Note that to create a grid, the product will need to use two attributes for its variations. In our example, that’s going to be Size and Colour – but it can be any two attributes.

Add all your variations, give them a price, assign stock, etc.

WooCommerce variations

For more detailed information about creating variable products, take a look at this article.

Step 2: Create your bulk order product

This method uses two products: the first is your variable product, the second is the main product where you’ll embed the bulk variations order form.

To create your bulk order product:

  • Create a new, simple product
  • In the ‘Product Data’ section, click on to the ‘Product Add-Ons’ tab
  • Click ‘Add Group’ then ‘Add Field’
  • Give your field a name, e.g. ‘Order Form’
  • Choose ‘Products’ as the ‘Field Type’
  • Enter the variable product that you just created in the ‘Child Products’ field
  • Select ‘Variations Grid’ in the ‘Products Layout’ field

You’ve now created your WooCommerce bulk variations form. It will look something like this on the front end.

WooCommerce bulk variations form

Bonus step: Including product add-ons with your variations form

Many stores want the ability to allow their users to customise products. This can be something like adding a message or gift wrapping through to more complex customisations like uploading files.

Because we’ve used the WooCommerce Product Add-Ons Ultimate plugin to create the bulk variations form above, we can easily add some extra options.

In our tee-shirts example, we’re going to allow our users to specify some text and upload an image which we’ll then print on the tee-shirts.

Adding a text field

To add a text field to the variations form:

  • Click on the ‘Product Add-Ons’ tab in the ‘Product Data’ section
  • Click ‘Add Group’ then ‘Add Field’
  • Select ‘Text’ as the Field Type
  • Give your field a name, e.g. ‘Text’
  • Optionally, you can add extra parameters like a price for the text field or even a price per character
  • If you only want to charge once for the text field, regardless of the quantity of items ordered by the customer, check the ‘Flat Rate’ field. Otherwise the field price will be multiplied by the quantity ordered.
Text field settings

Adding a file upload field

Let’s say that we would like to allow our customers to have an image printed on their tee-shirts. To add a file upload field to the variations form:

  • Click on the ‘Product Add-Ons’ tab in the ‘Product Data’ section
  • Click ‘Add Group’ then ‘Add Field’
  • Select ‘Upload’ as the Field Type
  • Give your field a name
  • You can add a price if you wish
File upload settings

Your product page will now look something like this:

WooCommerce bulk variations form with add-ons

And you can view a working demo here.

Method #2: Create a bulk variations table

Now let’s look at the second method to create a bulk variations form. For this method, we’ll use the WooCommerce Product Table Ultimate plugin. This will allow us to list our products in a table format, making it easy for our users to order multiple items in one go.

Using the same tee-shirts example as above, our page will look something like this:

WooCommerce bulk variations table

There’s a working demo page here.

You can see that all the variations are listed in a neat table. The user can select multiple variations and specify quantities for each.

You can get the Product Table Ultimate plugin here:

WooCommerce Product Table Ultimate

Display your WooCommerce products in a table and let your customers buy multiple products from one place

Find Out More

Let’s look at how to use the plugin to list variations in a table.

Step 1: Create your variable product

Just as in Method 1 above, we create our variable product. However, in this case, you don’t need to have two attributes. You could have as many or as few attributes as you like.

In our example, we’ll stick with two attributes: size and colour.

Step 2: Add your product table

Now we can use the Product Table Ultimate plugin to create a table to display our variations:

  • Go to Pages > Add New
  • Give your page a name
  • Add your table. There are two ways you can do this, either via shortcode or block. In this example we’ll use a Gutenberg block
  • Click the icon to add a new block then search for the ‘Product Table Ultimate’ block
WooCommerce Product Table Ultimate block

When you add the block, you’ll see some parameters on the right. The important one for our example is called ‘Variations Display’. You’ll need to set this to ‘As separate rows’.

This will now list each variation on its own row in the table.

There are heaps more features in the Product Table Ultimate plugin. You can find out more in this article on how to display your products in a grid.

WooCommerce bulk variations form – recap

Okay, we’ve looked at two methods to create a bulk variations form in WooCommerce. Both methods listed each variation individually, allowing your customers to choose multiple variations and quantities at once.

The first method embedded a bulk variations form on the product page itself and was particularly useful if you wanted to allow the customer to choose some add-ons. This method used the WooCommerce Product Add-Ons Ultimate plugin.

WooCommerce Product Add-Ons Ultimate

Enhance the shopping experience on your store by allowing customers to personalise your products

Find Out More

The second method listed all the variations in a table. This method made use of the WooCommerce Product Table Ultimate plugin.

WooCommerce Product Table Ultimate

Display your WooCommerce products in a table and let your customers buy multiple products from one place

Find Out More

Leave a Reply

Your email address will not be published. All fields are required.