How to Create Complex Product Variations in WooCommerce

When uploading products to your store, you might find standard variations don’t cut it. So here's how to create complex variations in WooCommerce.
Table of Contents

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

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. 

WooCommerce Product Configurator

Use WooCommerce Product Configurator to save time, make your customers’ experience better, and increase conversions.

Start your free trial now

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.
variable product

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.
add attributes WooCommerce
  1. Make sure that both Visible on the product page and Used for variations are checked.
  2. 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…
add variations WooCommerce
  1. Click the row to expand the variation details.
  2. Ensure you have entered a ‘Regular Price’ for the variation.
  3. Ensure the variation is set to ‘In Stock’.
  4. 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.

woocommerce complex variations

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.

WooCommerce Custom Fields

Add custom fields to your WooCommerce products to showcase the right information for each individual product.

Start your free trial now

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.

variation custom fields

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

  1. Go to Products > Variation Field Groups.
  2. Click Add New.
variation field group
  1. Give your field group a title. This will be used to define the group section in the variation edit tab.
  2. 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.

custom fields for variations
  1. Once you’ve filled in everything you need to, click Add Field.
  2. 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.
custom fields WooCommerce
  1. Under the Variation Description field, you’ll see your new fields. Simply fill them in as required and click Save Changes or Update.
complex variations WooCommerce

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.

James is the founder of Iconic, a WooCommerce plugin shop selling premium plugins to enhance your eCommerce store.

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

All suggestions are anonymous.

More from our blog...

Post a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay updated with WP Mayor's newsletter showcase every week

Stay on top of every new WordPress innovation and latest launches. Receive all our fresh product reviews and expert guides directly in your inbox.

Hosting Survey 2024

Are you happy with your hosting provider or are you over-paying for too little? Have your say below!

"*" indicates required fields

What's the main reason you picked this host?*
How happy are you with your host?*

OPTIONAL: If you'd like to receive the results of this survey, please enter your details below.