How to Display Product Variations in WooCommerce

The default WooCommerce product page is best for selling simple products. However, that’s not ideal for selling products with a lot of variations.

There are tons of stores that sell products with multiple variations. 

Whether these choices are simple to size selections or multiple color options depending on what you sell, the thing that won’t change is using variation products to view and select the right options with a few simple steps. 

Setting up your variations is straightforward. However, making those variations easy to demonstrate, browse, and purchase — that’s where you might need a helping hand.

In this tutorial, we will explain how you can display WooCommerce product variations easily. Also, we will show you the use of a plugin to create a new experience for your WooCommerce variations product.

Display product variations in WooCommerce

The basic concept of the WooCommerce variable product as outlined above. It’s time to put the knowledge into action. 

Note: We assume you have your WooCommerce store up and running, and you have created a simple product for your online store.  

Step 01: Create a variable product

You need to follow the given steps to setup variable products for your store – 

  • Head to your WordPress admin dashboard.
  • Select Products, and Add new to get started.
  • Enter product details and scroll down to the Product data section.
  • Select the Variable product from the drop-down menu at the top.
variable product
Step 02: Add product attributes:

Then click on the Attributes tab.

From the dropdown menu, select the type of WooCommerce product variation you want to add. 

The default options are color, size, and variety (I have created for demonstration purposes).

variable product
  • Click on the Add button to apply your chosen attribute. 
  • Select one of the attributes from the list.
  • Then list your attribute values.
  • Check both Visible on the product page and Used for variations.
  • If your product has multiple variable attributes, you can also repeat this process.
product data
Step 03: Generate your variations
  • Now head to the Variations tab.
  • There you’ll see a drop-down menu with two options –Add variation and Create variations from all attributes.
product data

The second option will automatically generate WooCommerce product variations for every possible combination of attributes that you’ve specified.

If you would add the options manually, select Add variation and use the available menus to build each one.

variation tab

Now you can fill out the product information for each variation. There are options to upload an image, add the price, stock status, dimensions, and more. But it’s mandatory to set a price for variation.

product data

Once you’ve done this for each of your WooCommerce product variations, click on Save changes.

Step 04: Preview and publish your variable product

Once you’re done entering all the relevant information, you can save all your changes and preview the item. You can make the product live by clicking on the Publish button in the editor.

After that, you can see the live results. This is how your variable product options should appear.

product dropdown

Extend with powerful tools

WooCommerce includes everything you need to set up product variations. However, there are some extensions and plugins you may want to use to enhance the functionality of your product variations.

1. WooCommerce Variation Swatches

This WooCommerce swatches plugin turns product attribute select dropdown into beautiful swatches like color, button, radio, and image swatches. 

Your website visitors can quickly select their desired variation without pressing any extra click. It’s not only less hassle for them, but at the same time, it saves their valuable time.

2. Additional Variation Image Gallery

product gallery

Additional Variation Images Gallery plugin is helpful when it comes to displaying multiple images for WooCommerce product attribute variation.

Your customers might want to have a look at the available options. The plugin helps customers to compare a particular product from multiple variations.

3. Duplicate Variations for WooCommerce

variation product duplicate

Duplicate Variations for WooCommerce Plugin comes with an option to duplicate variable product variations in a single click.

This is useful if you create a new WooCommerce store and your variable products contain similar attributes or variations.

Final Words

Variable products makes your store much easier to navigate for the end-users, and you have less information to manage. WooCommerce already gives you the ability to display product variations. 

We hope the tutorial helped you display WooCommerce product variations easily.

If you have any questions on creating product variations in WooCommerce, ask in the comments section below.

Leave a Comment

Your email address will not be published.