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.
By showing product variations on the shop page (as individual products), you’ll be able to make variations more appealing to customers and expand your product catalog in just a few clicks.
By the end of this article, you’ll walk away knowing exactly how to show variations on your 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.
How Show Single Variations works
WooCommerce Show Single Variations allows you to show variations on your WooCommerce shop page, category pages, search and filter results pages.
These variations are displayed as if they were ‘simple’ products, but link through to the parent variable product page with the options pre-selected. The screenshot 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.
- Define where variations are displayed – everywhere, search results, or filtered results.
- Show accurate filter results by displaying relevant variations and images, rather than a generic parent product.
- Save your customers from 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.
How to show variations on the shop page
To show variations on the shop page with WooCommerce, you’ll need to:
- Install the WooCommerce variations plugin, Show Single Variations.
- 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
Or start a free trial:
Then follow these steps:
- Go to Plugins > Add New > Upload Plugin.
- Choose the zip file you downloaded, upload, and then click Activate.
- 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 onto enabling product variations to shop 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:
- Go to Products > All Products in your WordPress dashboard.
- Select the variable product you want to edit.
- Scroll down to the Product Data section of the page (usually found below the main text/product description area).
- Click the Variations tab on the left.
- Click the expand arrow on the variation you want to show on the shop page.
- Once expanded, you’ll be able to see a bunch of new options, all added by the Show Single Variations Plugin, including:
- Show in Search Results?
- Show in Filtered Results?
- And Show in Catalog?
- Featured – this will show your product in featured product queries.
- 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.
- Continue scrolling and you’ll see a Display Options section. Here you’re able to set a custom title for your variation.
- 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.
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.