Show Variations on the Shop Page With a WooCommerce Variations Plugin

By the end of this article, you’ll know exactly how to show single variations on the WooCommerce shop page. The best part? You’ll be able to do it in just 2 steps with the WooCommerce variations plugin, Show Single Variations.

But first, let’s explore why you should show your product variations as simple products in your ecommerce store.

Why show single variations in your product catalog?

As a WooCommerce store owner, you likely have a lot of products with variations. However, your customers have to click through to single product pages before they can even see them. 

This can be a pain, especially when customers then need to use the product variation dropdowns to find the right product attributes they want with their product. All of these clicks, before they even get to the checkout, can result in a lost customer or an abandoned cart.

By showing product variations on the shop page (as individual products), you’ll be able to make variations more appealing to customers. You’ll also reduce the number of clicks they need to make (for a better user experience) and expand your product catalog.

All of this can’t be done in a standard WooCommerce install though, to do this, you’ll need the help of a plugin.

How Show Single Variations works

WooCommerce Show Single Variations allows you to show variations on your WooCommerce shop page, category pages, and search and filter results pages. 

These variations are displayed as if they were ‘simple’ products. They then link through to the selected variation parent variable product page with the variation options pre-selected.

The video below demonstrates this (variations have been labeled with a ‘Variation’ banner for demonstration purposes).

WooCommerce Show Single Variations allows you to:

• Display product variations on the shop page as though they are separate products.
• Determine where variations are displayed – product category/catalog, search results, or filtered results.
• Show accurate filter results by displaying relevant variations and images, rather than a generic parent product.
• Save your customers numerous clicks by enabling them to add a specific variation to the cart, directly on the shop page.

So now we understand how Show Single Variations works, let’s get it up and running on your site with the following tutorial.

How to show variations on the shop page

To show variations on the shop page with WooCommerce, you’ll need to:

1. Install the WooCommerce variations plugin, Show Single Variations.
2. Enable product variations to show on shop/catalog pages.

That’s it. Below we’ll outline these steps in detail so you can start making more sales for your online store.

Step 1: Install Show Single Variations

Purchase WooCommerce Show Single Variations from the Iconic store to get started: iconicwp.com/woocommerce-show-single-variations

Then follow these steps:

1. Go to Plugins > Add New > Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your license key.

Once installed, you’ll see the general settings page.

On this page, there’s a Process Product Visibility button. It’s worth running this now as it will go through all of your products and variations and set their default visibility settings. By default, all variations are hidden until you enable them.

Now that we have Show Single Variations installed, we can move on to enabling product variations to show on the shop page.

Step 2: Enable product variations to show on shop pages

To get your variations to show individually on the shop page in WooCommerce, do the following:

1. Go to Products > All Products in your WordPress dashboard.
2. Select the variable product you want to edit.
3. Scroll down to the Product Data section of the page (usually found below the main text/product description area).
4. Click the Variations tab on the left.
5. Click the expand arrow on the variation you want to show on the shop page.

6. Once expanded, you’ll be able to see a bunch of new options, all added by the Show Single Variations Plugin, including:
   1. Show in Search Results?
   2. Show in Filtered Results?
   3. And Show in Catalog?
   4. Featured – this will show your product in featured product queries.
   5. Disable “Add to Cart”? This will change the ‘Add to Cart’ button to a ‘Select Options’ button. Useful for pre-selecting one attribute like ‘Color’ but having your customers choose the other attribute on the single product page.

7. Continue scrolling and you’ll see a Display Options section. Here you’re able to set a custom title for your variation.
8. Once you’ve customized all your variations, hit Save Changes in the Product Data section of the page and then scroll up to the Publish section of the page and click Update.

Troubleshooting: WooCommerce variations not showing or working

If you’re having trouble with your WooCommerce variations not showing or working, there may be a few things causing the problem.

• First of all, make sure to check you’ve set up your variable product correctly. We have step-by-step instructions on how to do this in our variable product guide. Just scroll down to the how-to section.
• Next, if you’re using Show Single Variations, you need to make sure you’re setting the variations to be visible in the catalog. Please refer to our in-depth documentation which will walk you through it.
• Lastly, if you’re using Show Single Variations and are still having problems after checking our docs. You can get in touch with us via a support ticket.

Bonus: Uplevel your product variations

Show Single Variations on its own is a powerful tool for your WooCommerce product variations. But combined with WooCommerce Attribute Swatches and WooThumbs for WooCommerce, it’s even more powerful.

With all three of these plugins, you’ll be able to:

• Show additional variation images (product images) on the product page.
• Upgrade the default product dropdown variation attributes into variation swatches.
• Show these swatches on the filter, catalog, and search results.

Get all three together and save with our WooCommerce Variations bundle.

Show variations on the shop page with Show Single Variations

That’s it, your store’s now ready to start selling WooCommerce variations with ease. With this up and running, you’ll be able to offer more options for your customers in fewer clicks.

Make this change quickly and easily with WooCommerce Show Single Variations.