Skip to content

How to Set Up and Extend Variable Products in WooCommerce

variable-products-woocommerce

What Are Variable Products in WooCommerce?

Variable products in WooCommerce lets you create specific products that have multiple variations, for example, different colors, sizes, prices, and other data. When you create them, you will apply attributes, terms and variations to your products, as well as add specific images for each variation. T-shirt products are a good example of of a variable product in WooCommerce.

How to Create Variable Products in WooCommerce

Attributes

Before creating your variable product, you need to create the attributes. If you go to Products > Attributes, you get this screen. As you see, I have already created the attribute size. Now I’m going to add colors.

add attribute

Attribute Terms

Once I have created it, I will now configure the terms (see above), which, in this case, is the specific color.

Here I will add blue and give it a short description, which may or not show, depending on your theme.

add color attributes

Once I add them, they appear here.

all color attributes added

And also will appear on your attribute page.

attribute list

Creating the Variable Product

The next step is creating your Variable Product. Under Products, click on Add New. Below your description, you need to assign the product date to Variable Product.

You will of fill in all the other necessary data and descriptions. Now let me show you information specific to Variable Products.

Adding Attributes to Products

Here you will select the attribute or attributes that you want to add to the product.

add your variables to you product

If I select colors, I have the options to add all terms or none. If you want to add only certain terms to this specific product, if you click on it. you will see a dropdown. Make sure to select Used for variations. This box is not toggled by default and if you add your terms, it will disappear.

adding terms to variable product

If I were to click on Select All, all the terms I created for this variable would be added. Also, I can add a new term if I choose to.

all terms added to variable product at once

After doing the same for sizes, I save both.

all attributes added

Creating Your Product Variations

Now you will create all the variations of your product. Simply click on Variations and you will have the option to add variations or create variations from all attributes.

options for adding variations

If you click on the add variation, for example, you can fine-tune what variations you want, based on attributes. In this example, I chose to have the variations created for black and all sizes. I also set the default form values to pre-select the black, large t-shirt on the front end of the store.

And you have several other options when creating the variations.

options for variable

If we expand that variation, we can fill in the rest of the details, such as prices, images, stock, etc.

expanded variation options

Or we could add them all at one time

add all variations

You will get this confirmation message.

run all variation warning

And here are the results.

Now I would go into each of these and set them up, filling in the necessary information.

setting up one variation

Now if we view it on our store, this is what it will look like (depending on the theme you have installed.)

front end product

This helps you create the variations of the different products you are selling.

Products by Attributes Block

With WooCommerce comes several blocks to allow you to add products to posts or pages. Included in these is the Products by Attribute Block.

Simply add the block to where you want it on the page or post, then select which attributes you want to display. Or you can add all attributes.

And this is how they look in the editor.

Need To Expand Your Variable Products?

Here a four other extensions that we have written about that will help you extend your variations.

How to Control Where a Single Variation Displays

Variations of product are often buried and WooCommerce doesn’t give you much control over displaying any single variation. With the WooCommerce Show Single Variation plugin, you get more control over where and how a variation will show up. You can even add them to your shop page. Check out our post here.

How to Link a Group of Any Type of Product by Attributes

The ability to link products together using their attributes via variations, can help with search, filtering and better archives. It also adds the benefit of giving each product variant a title, description and a unique URL. As a result, it really helps Google to index your products for a lasting long-tail SEO. Read more about it here.

How to Let Customers Add Multiple Variations to Their Carts with a Single Form

If you sell to businesses and your customers order bulk from variations of a single product, giving them an easy form to use could keep them as customers. This is useful with a number of products, from clothing to tech. A simple form could save them a lot of time on your store. Read more about how the extension Bulk Variation Forms gives you the ability to offer such an option.

How to Add Custom Fields to Variations

If you create variable products a lot using WooCommerce, I’m sure there have been times when you wished for a field that did not exist, one that would only be used in a variation. But you need to make it easy. When someone, whether yourself or a team member, adds product variations, they can easily add the extra information or data as needed for the product. Read out post on how the WooCommerce Custom Fields for Variations plugin will help you with this.

A Few More Extensions…

Bulk Stock Management

If you need to closely manage your stock for all your variations, you may want to check out this extension. It gives you a new section in your dashboard to list your products and variations along with their stock properties. They can be filtered by product type, stock management status and stock status. You can also filter them by name, ID, SKU or stock quantity. Check it out here.

Variation Swatches and Photos

With this extension, you can replace drop-down fields on your variable products using color and image swatches. This is an excellent way to display the available colors of a product, their available styles and anything else you can think of that would display either an image or a color. Check it out here.

Additional Variation Images

This extension lets you add additional gallery images per variable product. By default, you are only able to swap the main variation image when you select a product variation, not the gallery images that are below it. But this cool extension lets your customers swap different gallery images when they select a variable product. For example, it will allow your customers to view different images of a product all in the same color and style. Check it out here.

Bulk Variation Forms

With this extension, your users can easily add multiple variations of a product to their cart from a single form. It really is great with helping to simplify the bulk ordering process for B2B sites, wholesalers or any user who likes the convenience of adding several variations of the same product easily and efficiently. Check it out there.

Subscription Variations

If you are moving to subscription-based products, the Subscriptions extension can do that for you. You will be able to create variable subscription products and allow your customers to choose the subscription that fits their specific needs. You can also allow customers to choose their own billing cycle. Check it out here.

17 Comments

  1. Christina Nelson on June 30, 2018 at 10:10 am

    Thanks for this great tutorial! Is there also a way to make the price go up automatically by a specified date? i.e. the price for a course is $500 until September 15 2018, and after that it automatically goes up to $600?
    Thanks so much!

    • BobWP on June 30, 2018 at 10:38 am

      Actually, the easiest way to do this without adding any plugins for extensions is to put it on sale and you can then schedule when it starts and when it ends.

      • Christina Nelson on June 30, 2018 at 11:46 am

        OK, that won’t quite fit the bill for this particular situation. The client won’t want it to appear as ‘on sale’ (it’s a little complicated to explain 🙂 Thank you for replying so promptly on your weekend Saturday!

        • BobWP on June 30, 2018 at 12:15 pm

          Yeah, it’s not always the best fit. I was trying to think of what is built in and now you can do that. There is an extension though, that will do specifically that plus give you some more control over pricing. Here’s the post on that if you are interested.

          • Christina Nelson on June 30, 2018 at 1:29 pm

            Cool. I will take a look. Again I appreciate so much that you’ve taken the time today to answer my questions. All the best! Christina

  2. newsdrag on August 21, 2018 at 2:13 am

    Hi, great article, thanks! Followed your instructions, and all went perfectly, but… the variation product does not show up in the search results (‘?s=…’ page) ;-( It shows up in the browse catalog page (‘/products/), but not in the search results page. Am I missing some option?

    TY

    m

    • BobWP on August 21, 2018 at 7:41 am

      I’ve never used this plugin, but supposedly it does include variations.

  3. Dreamtex Home on December 4, 2018 at 12:33 pm

    Maybe you can solve a mystery. I have followed all of your instructions to set up color and size but when I look at the front end, it says size and size, although it has the correct variations.

    • BobWP on December 4, 2018 at 12:47 pm

      Yeah, just based on that not sure what could be going on. Sounds like you need someone to drop into your site and do a bit of troubleshooting if you don’t end up figuring it out.

  4. Kenya on December 10, 2018 at 6:35 pm

    Christina! Great information. The first time I did it without googling anything, I was able to do it perfectly as far as retrieve the “view options” from the front end, but now it just says “add to cart” and every time I publish a product, it goes right back to simple product. Any idea why?

  5. Joe Burnham on April 15, 2019 at 12:09 pm

    This is great, but once I load everything in, the images of different designs aren’t linked to the product variation selection buttons. Is there any way to make sure that when I click on a design image that it selects the design button and shows the sizes that particular style is available in?

    • BobWP on April 15, 2019 at 1:31 pm

      So assuming you have the product image set for the variation, are you using thumbnails to display and choose variations. I know that Storefront has drop downs. The reason I ask is if they are dropdowns as long as you select all options the image should change.

  6. Patrick Quirke on May 22, 2019 at 7:30 am

    Question: If i am selling a stone pave stone in two sizes size 1 is sold as a pack and size 2 is sold each. The attributes are ‘each’ and ‘pack’, currently you select either size 1 or size 2 from the dropdown and then on the attribute dropdown you select each or pack but as size 1 is only sold as a pack and size 2 is only sold each is there a way to when you select your size the attribute is automatically chosen for you rather than having to use the attribute dropdown to select the only option of ‘pack’?

  7. gasanaline on September 4, 2019 at 2:05 am

    Thank you so much for answering my question.

  8. Brittany on September 5, 2019 at 8:47 pm

    Thank you this helped me a lot.

  9. JAMES on October 15, 2019 at 1:04 pm

    Thank you for this in-depth tutorial. I am trying to work on prudct variations but not getting the actual results as I have already gone through several resources and following this resource https://wpitech.com/woocomm… to implement the product variation process. Can you please describe me further how to do this? This is the code that I think is somehow wrong. Is there any other way to set product variations?

    $variation_id = woo_insert_post( $variation_post );
    $variation = new WooCommerce_Product_Variation( $variation_id );
    foreach ($variation_data[‘attributes’] as $attribute => $term_name )

    • BobWP on October 16, 2019 at 7:14 am

      Sorry, I’m not a coder. You might try the Slack group for WooCommerce or one of the Facebook groups 🙂

Your thoughts...