How to show variations on shop pages in WooCommerce

Updated September 11, 2023

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.

Speed up the shop page with variations and quantity fields.

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:

An example of a WooCommerce Product Table with variations.

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.

WooCommerce variations radio buttons

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 product variations on product pages. Customers can visit the individual product pages, select their preferred variation and click the add to cart button:

WooCommerce replace variation price range with from

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:

woocommerce product variation on the shop page

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 by Barn2 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?

WooCommerce Express Shop Page plugin

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

  • Streamlined customer experience Displaying variations on your eCommerce shop pages allows customers to see and select their preferred options directly from the shop page. This saves them from visiting single variation pages.
  • Quicker product selection and purchasing process With the convenience of variation dropdowns on the shop page, customers can quickly select variations of their choice, speeding up the product selection and purchasing process.
  • Reduced likelihood of cart abandonment By showing variations on the shop page, you reduce the likelihood of cart abandonment as customers can quickly find and purchase the product with their preferred options.
  • Increased sales and conversion rates Displaying variations on your online store shop page can help boost your sales and conversion rates by creating a more user-friendly and efficient shopping experience for your customers.

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.
  • 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 by Barn2 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.

Add quantity and variations to WooCommerce shop page screenshot

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:

The Product Attributes section in WooCommerce.

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:

The Product Data section of a WooCommerce product.

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:

Adding a product attribute in WooCommerce.

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:

Customizing a product attribute in WooCommerce.

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:

Adding a variation in WooCommerce.

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.

WooCommerce Express Shop Plugin Settings

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:

WooCommerce product table variations plugin

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. 

List product variations in a quick order form on the WooCommerce shop page.

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:

A WooCommerce product table with drop-down variations.

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:

A WooCommerce product table with variations on individual rows.

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:

WooCommerce Express Shop Page Supercharge the Shop Page

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.

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. You can purchase them individually or get them as part of the All Access Pass, which includes several other powerful plugins for improving the WooCommerce shop experience. 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.

Speed up the shop page with variations and quantity fields.

Please share your thoughts...

Your email address will not be published.