How to show variations on shop pages in WooCommerce

Are your customers tired of visiting individual product pages trying to find the right variation of a product? In this article, we'll guide you on how to show variations directly on the shop page of WooCommerce with just a few clicks.

By showing variations on the shop pages, customers get all the product data they need on a single page. This eliminates the need for them to visit individual product pages, resulting in a more seamless and faster shopping experience.

The best way to do this is by using the WooCommerce Express Shop Page plugin. It is a user-friendly plugin that transforms your WooCommerce shop and category pages by allowing customers to select variations from the dropdowns without leaving the shop page.

In this tutorial, we'll go over how the plugin can help your customers with a better shopping experience. We'll then walk you through the steps of installing and configuring the plugin.

At the end, I'll also show you a completely different way to add variation dropdowns to the WooCommerce shop page. This time, we'll use the WooCommerce Product Table plugin to create a quick order form, complete with variation dropdowns like this:

Why does WooCommerce make it so difficult to select variations?

What are WooCommerce product variations?

WooCommerce product variations are different versions of a single product. They allow customers to choose their preferred option based on features such as color, size, or material.

For example, if you're selling t-shirts, you could offer different color variations like red, blue, or green. Additionally, you could also provide different size options like small, medium, or large. Each combination of color and size is a separate variation of the parent product.

There are lots of benefits to offering product variations because of the flexibility they offer. However, you need to show them in appropriate places on your site - and unfortunately, WooCommerce isn't great at that.

Does WooCommerce allow you to show variations?

Yes, WooCommerce does allow you to show variations on product pages. Customers can visit the individual product pages, select their preferred variation and click the add to cart button:

However, variations are not displayed on the WooCommerce shop and category pages. Instead, WooCommerce shows a Select options button linking customers to the single product page to view and choose the variation:

This process can be inconvenient for customers as it slows down the shopping experience and can be frustrating for those who simply want to select their preferred variation from the shop page itself.

This is where WooCommerce Express Shop Page comes in. It allows store owners to add WooCommerce attributes as dropdowns on shop pages, making it convenient for customers to select their preferred options without having to click through to individual product pages.

Why should you show variations on your WooCommerce shop pages?

Showing variations on your WooCommerce shop pages can have massive benefits for your online store. Here are some:

Use case examples: Products that shine with shop page variations

Below are a few use cases where showing product attributes on the shop page is particularly effective.

• Clothing items with multiple sizes and colorsCustomers can quickly and easily see which size and color combinations are available, allowing for a streamlined shopping experience. By showing WooCommerce variations as separate products, customers can see all the color options at a glance.
• Customizable products with multiple options.eCommerce stores that sell phone cases can simplify their shop pages by displaying individual phone models as a variation option. This makes it easier for customers to select their specific phone model from a dropdown menu and proceed directly to the checkout process.
• Electronics with different specifications.Electronics with different specifications may have different pricing and configurations. With shop page variations, customers can quickly select their preferred configuration, leading to a faster checkout experience.
• Furniture with various materials and finishes.Customers can quickly see the different variations of the same furniture piece and visualize how it'd fit into their home decor.

How the WooCommerce Express Shop Page plugin displays variations

The WooCommerce Express Shop Page plugin works by adding variations dropdowns and quantity fields to the shop and category pages.

This allows customers to quickly select their preferred options without leaving the shop page. The convenience of viewing all variations on the shop page reduces the bounce rate and increases their likelihood of making a purchase.

When the customer chooses a variation, the variation product images update on the shop page. That way, they can see exactly what they're buying.

It works seamlessly on product category pages, tag archives, and other product listing pages by adding variations as dropdown menus. This allows for a faster shopping experience regardless of where they browse your products in WooCommerce.

In the next section, I'll show you how to create variations before displaying them on the shop page. Skip ahead if you've already added your variable products. Afterwards, I'll tell you how to use the WooCommerce Express Shop Page plugin to show them on your shop and category pages.

Before you start, here's how to add variable WooCommerce products

First, you’ll want to have a WooCommerce shop ready to go. You can use either a new or an existing WooCommerce store – the choice is up to you. Let’s get to work! Let’s take a quick look at the process of adding variations in WooCommerce in case you haven't already done this.

First, create product attributes

Imagine that you want to set up a clothing store. To add variations per product, first visit the Products → Attributes tab:

Attributes are key descriptors for your products and are required for variations to work properly. So you’ll want to add in all the attributes here that apply to your products. For more details, check out our complete guide to displaying product attributes in WooCommerce.

Next, use the attributes to create variations

Then, open up a new or existing product in WooCommerce, and scroll down to the Product data section:

At the top, you’ll want to select Variable product from the dropdown menu. This will alter the customization options you see for this product. You may notice that there’s now a Variations tab – but don’t go there just yet.

First click on Attributes, choose one that applies to the current product from the dropdown menu, and select the Add button:

Check the box labeled Used for variations, and pick all the relevant attributes in the Value(s) field that apply to your variable product. For example, these can be different colors or sizes. You can also set global attributes for all products or individually per product. Then, select Save attributes:

Now head to the Variations tab, and click on Go to create variations. On the next screen, you can create your first variation by selecting one of the product's attributes:

You can now fill out any specific information that applies to your specific variations. This includes the item’s price, size, and so on. Save your changes when you’re done, and you can continue adding more attributes and variations as needed.

After that, you’ll want to do the same with all other products that come in multiple options. 

Now that you've set up your variable products, you're ready to display them on the shop page. I'll tell you how to do that next. 

How to display variations on shop pages in your WooCommerce store

Follow these simple steps to display product variations on the WooCommerce shop pages:

1. Purchase and install the WooCommerce Express Shop Page through the plugins page in your WordPress dashboard.
2. Once installed, enable product variations on shop pages by using the setup wizard provided by the plugin. The plugin gives you fine control over where you want to show the variations on the WooCommerce shop page. Tick the shop page option to add variations to the shop page and the Category pages option to add them to the taxonomy pages. The same options are also available in the WooCommerce settings, which you can find by navigating to WooCommerce → Settings → Products → Express shop page.

Alternate method: Create a product order form with variation dropdowns

WooCommerce Product Table Pro is a WordPress variations plugin that lists variable products in an organized, attractive order form. And even better, it can display WooCommerce variations on the shop page in two ways: as separate products or as dropdown lists:

Plus, you can customize how the table looks and what it contains. To show the order form with variations on the shop page, just tick the relevant box in the settings page.

Use WooCommerce Product Table instead of Express Shop Page if you prefer the order form layout to just adding variation dropdowns to your existing store layout. 

How to use WooCommerce Product Table to select product variations on the WooCommerce shop page

Setting up a product table and using it to display product variations couldn’t be easier. 

1. First, get WooCommerce Product Table and install it on your WordPress site.
2. When you activate the plugin, the setup wizard will open automatically.
3. Tick the boxes to show the product order form on the main shop page, category pages, and any other product listing pages as required.
4. Go through the rest of the setup wizard and choose how you want your product tables to work. You can choose your columns, and choose how you want variations to appear in the table (i.e. as dropdowns or as individual products with one variation per row).

2 ways to display variations on the shop page

Which variations option you choose is completely up to your personal preference. Show as dropdown list is the first choice, and will place a drop-down menu for each variation next to the Add to Cart buttons:

This lets customers easily select product variations on the WooCommerce shop page, and then add whatever they want to their carts by ticking the checkbox. 

If you select Show as separate rows, on the other hand, here’s what you’ll see:

Each hoodie and t-shirt variation is now its own row in the table. This is a bit less concise – and takes up more space – but it makes the shop page variations more prominent. It also lets customers choose more than one version of a product (for instance, they could buy both a blue and a red hoodie). It does this without creating a new product in WooCommerce.

Ultimately, either of these options will be effective, and will make it much simpler for customers to select product variations on the WooCommerce shop page. We’d suggest experimenting with both, to see what looks better to you.

Once you're done, visit the WooCommerce shop page and test it. You'll see the variations appearing on the shop page, making it much easier for customers to choose variations.

Additional plugins to enhance your store even further

So far, we've learned how to use the WooCommerce Express Shop Page and Product Table plugins to show variations on the main shop page. To enhance your store even further, you can use either WooCommerce plugin with these additional extensions:

Display WooCommerce product add-ons on the shop page

Let's be honest - variations are a pretty basic way of displaying product options. They can only be displayed as dropdowns (or as individual products, if you're using the "separate variations" option in WooCommerce Product Table). This isn't ideal for letting customers personalize your products.

For more flexibility, you can create product add-ons using the WooCommerce Product Options plugin instead of (or as well as) using product variations. For example, this screenshot shows products with a wide variety of options including checkboxes, color variation swatches, text fields, and radio buttons:

When you use WooCommerce Product Options with either the Express Shop Page or Product Table plugins, you can display these add-ons on the shop page. This means that customers don't have to navigate to the single product page. They can easily view and select from all available options for a product, including add-ons, directly from the shop page.

WooCommerce Product Options works with both simple products and variable products. This means that you can either add extra options to simple products, or alongside your existing variations.

Ready to show variations on the shop page?

Displaying variations on shop pages can improve the overall user experience and boost sales. In this article, we've looked at two different ways to display variations on the shop page and category pages:

• With the WooCommerce Express Shop Page plugin, you can easily display variations as dropdowns on shop pages, making it easy and intuitive for customers to choose their preferred options. This plugin adds variations and quantity boxes to the shop page without changing the overall layout of your store.
• Alternatively, you can use WooCommerce Product Table to transform your shop page with a quick order form layout - complete with variation dropdowns.

Both plugins are easy to set up and work with any theme. The best part? They each come with a 30-day money-back guarantee, so you can try and see if it's a good fit.