When uploading products to your online store, you might find that standard WooCommerce product variations just don’t cut it. Sure, you can add different sizes and color options to your products, but when it comes to anything more complex than that, it’s easy to get stuck.

That’s why in this article, we’ll be discussing complex product variations for your WooCommerce store. These range from customizable products to products with extra information and as a bonus, how to make these more user-friendly in your online store.

What is a product variation?

First things first, let’s get our foundation right by outlining what a product variation is.

A product variation in WooCommerce is a combination of attributes belonging to a product, which might include any of the following:

• Colour
• Fabric
• Style
• Size
• And more

For example, if your store stocks basic t-shirts, they most likely vary in size and color. So you might have a t-shirt that’s a size medium and in the color red – this is a product variation with two different attributes.

Why you might need to create complex WooCommerce variations

Your store might require more complex variations because the type of products you’re offering are in and of themselves, complicated. 

For example, your store might sell watches, but some of the watches have customizable features and add-ons that the customer can select on the product page. They can pick the color of the strap, the face color, and even the material.

In another example, your store sells tech gadgets and computers. Each computer you sell has different variations of the same product. For example, you’re selling a MacBook Pro but there are two different variations of the main computer which have different screen sizes and hard drives. 

These two computers are standard variations, but you still need to provide extra information with each. For example, how much RAM or storage that then gives the computer. To show the customer the difference, you need to be able to add this extra information in the form of custom fields. 

How to create complex WooCommerce variations

Now that we’ve outlined the types of complex variations you might need to create for your WooCommerce store, we’ll dive a little deeper into how you can make these a reality with some tools. 

A group of products with varying colors or styles

Our first variation type is the standard product variation with varying colors or styles. While not complicated, this will act as our foundation.

To add a variable product in WooCommerce, you must first set the product type to ‘variable product’.

1. Go to Products > Add New.
2. Scroll down the page to the ‘Product Data’ section.
3. Select Variable product from the dropdown.

Next, you’ll need to add your product attributes.

1. Click the ‘Attributes’ tab in the ‘Product Data’ section.
2. In the ‘Custom product attribute’ dropdown, keep this selected and click Add.
   1. Enter the name of your attribute in the ‘Name’ field (e.g. ‘Color’).
   2. In the ‘Value(s)’ section, enter the name(s) of your terms (e.g. ‘Blue’).
   3. Make sure to separate each term with a ‘ | ‘ making sure to include spaces.

4. Make sure that both Visible on the product page and Used for variations are checked.
5. Then click Save attributes.

Then you’ll need to create the variations for your variable product. These are the products that the customer will eventually add to their cart. 

1. In the ‘Product Data’ section, click the ‘Variations’ tab on the left.
2. In the drop-down select Add variation and click Go.
3. When your variation is created, leave the attribute dropdowns on ‘Any…’

4. Click the row to expand the variation details.
5. Ensure you have entered a ‘Regular Price’ for the variation.
6. Ensure the variation is set to ‘In Stock’.
7. Click Save changes.

Pro tip: On its own, WooCommerce only allows you to have one image per variation. This image is then displayed when your customer selects the product options. If you want to add extra images per variation, try WooThumbs for WooCommerce.

A customizable product

In our example above, we talked about an online store that sells customizable watches. This store has a large number of attributes for each watch that need to function as customizable options. 

The end goal with this is for the customer to be able to see what they’re going to buy while they’re selecting. This is where WooCommerce Product Configurator by IconicWP comes in. 

Instead of having to create 100s of individual end result images for the different combinations of watches, WooCommerce Product Configurator allows the store owner to upload one transparent image for each attribute which then layers on top of the other images to create the desired result for the customer.

Product Configurator has the potential to save endless hours of image creation. For example, if you had 3 attributes, each with 5 options, you’d need to create 125 final images. With product Configurator, you only need 15.

A product with added extra information

In the second of our above examples, we talked about an online store that sells gadgets and computers. The store owner needs to add extra information to each product variation to make sure its customers are knowledgeable before making a purchase.

Each variation needs completely different information and it needs to be presented in a straightforward way. This is where WooCommerce Custom Fields can come into play.

By being able to add custom fields to each variation, this online store is able to showcase the right information for each individual product, rather than the parent product.

To add these custom fields, do the following (after installing WooCommerce Custom Fields):

1. Go to Products > Variation Field Groups.
2. Click Add New.

3. Give your field group a title. This will be used to define the group section in the variation edit tab.
4. Under Fields click Add Field.

Here you’ll be able to add all the information you need including the field label, description, type, and what the field will look like on the product page.

4. Once you’ve filled in everything you need to, click Add Field.
5. If you’re adding more than one custom field, click Publish.

Now that you’ve added your custom fields, you’ll next want to add them to specific products.

1. Go to the Variations tab of your chosen product.
2. Click on a single variation.

3. Under the Variation Description field, you’ll see your new fields. Simply fill them in as required and click Save Changes or Update.

Roundup 

Adding complex variations to your WooCommerce store can be just that, complex.

But by using WooCommerce Product Configurator and WooCommerce Custom Fields, you’ll save yourself time and make your customers’ experience of your store more enjoyable.

Does your store have complex variations types that aren’t listed here? Let us know in the comments below.