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-3 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, managing a wide array of products with various attributes and variations is part and parcel of your business. However, the standard WooCommerce setup requires customers to navigate to individual product pages and sift through dropdown menus to find the specific product variations they’re interested in.

This can be a cumbersome process, potentially leading to customer frustration, checkout abandonment, or even loss of potential sales.

👋 Want to see what other important metrics you should be tracking in your ecommerce store? Read our ecommerce metrics guide.

Displaying single variations directly in your product catalog can significantly enhance your customers’ shopping experience. Here’s why:

Improved product visibility

By showcasing individual product variations on the shop page, you make it easier for customers to see the full range of options available.

This can be particularly beneficial for products with visually distinct variations, such as clothing in different colors or patterns. Instead of having to navigate to each product page and manually select different variations, customers can see all available options at a glance.

Improved user experience

Reducing the number of clicks a user has to make to reach their desired product can significantly improve the user experience. Each additional click presents an opportunity for a customer to abandon their purchase.

By displaying product variations on the shop page, customers can directly add their desired variation to their cart, streamlining the shopping process and making it more user-friendly.

Expanded product catalog

Displaying each variation as an individual product effectively expands your product catalog. This can make your store appear more extensive and diverse, potentially attracting a wider range of customers.

It also provides more opportunities for customers to discover products they might be interested in, increasing the chances of additional sales.

Increased conversion rates

By making it easier for customers to find and select the exact product variation they’re looking for, you can increase your conversion rates. A smoother, more intuitive shopping experience can lead to higher customer satisfaction, repeat purchases, and increased sales.

However, achieving this level of customization cannot be done in the standard WooCommerce setup. Instead, it requires a WordPress plugin.

With the right plugin, you can easily display single variations in your product catalog, enhancing your store’s functionality and improving the overall shopping experience for your customers.

How WooCommerce Show Single Variations works

WooCommerce Show Single Variations is a game-changing plugin that revolutionizes the way you display product variations on your WooCommerce store. It allows you to showcase variations on your shop page, category pages, and even in search and filter results, as if they were individual ‘simple’ products.

This means your customers can see all the options available to them right from the start, without having to navigate to individual product pages.

When they click on a variation, they’re taken to the parent variable product page with their chosen variation already pre-selected.

This seamless user experience is demonstrated in the screenshot below, where variations are clearly marked with a ‘Variation’ banner for clarity.

Here’s what WooCommerce Show Single Variations can do for your online store:

Display product variations as individual products

With Show Single Variations, each product variation gets its moment in the spotlight. They’re displayed on the shop page as if they were separate products, giving your customers a comprehensive view of all the options available to them.

Customize where variations are displayed

You have full control over where your variations appear. Whether on the product category/catalog page, in search results, or in filtered results, you decide where your variations are showcased.

Enhance filter results with relevant variations and images

Say goodbye to generic parent product images in filter results. Show Single Variations allows you to display relevant variations and images, providing your customers with accurate and helpful filter results.

Simplify the shopping experience with direct add-to-cart buttons

Your customers will appreciate the convenience of being able to add a specific variation to their cart directly from the shop page. This saves them numerous clicks and streamlines the shopping process, enhancing user experience and potentially boosting conversion rates.

So now we understand the power of Show Single Variations, let’s dive into how you can implement this incredible tool 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.

Now we have Show Single Variations installed, next we can decide where we want our single variations to show. The next steps will give you two options. Setting where you want single variations to appear for all products, and/or on a per-product basis.

Step 2: Show variations site-wide

If you wish to apply this setting to all your products, Show Single Variations makes it easy. With the bulk index settings, you can determine where your single variations will appear in just a few clicks.

Follow these steps to set it up:

1. Navigate to WooCommerce > Show Single Variations from your WordPress dashboard and click on the Index tab at the top of the page.
2. Click on the Run Indexer button.

3. A popup will appear, prompting you to select where you want your single variations to be displayed. Check the box next to each desired location.
4. If you wish to override any display settings applied to individual products, check the box next to Overwrite existing variation settings.
5. Click Next.

6. The following screen will ask you to set the visibility for the parent variable product. You can choose to display it in certain places or hide it completely.

7. Once you’re satisfied with your settings, click Submit, and the indexer will run.

After setting your product variations site-wide, you can further refine your settings by editing individual products.

Step 3: Display variations on a per-product basis

If you want to modify how specific products are displayed, or if you prefer to set your single variations display settings for each product individually, Show Single Variations has got you covered.

Here’s how to show variations on a per-product basis:

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

5. Click on the expand arrow on the variation you want to display on the shop page.
6. Once expanded, you’ll see a range of new options, all added by the Show Single Variations Plugin, including:
   • Show in Search Results?
   • Show in Filtered Results?
   • Show in Catalog?
   • Featured – this will display your product in featured product queries.
   • Disable “Add to Cart”? This will change the ‘Add to Cart’ button to a ‘Select Options’ button, which is useful if you want to pre-select one attribute like ‘Color’ but have your customers choose the other attribute on the single product page.

7. Check the box next to each setting you want to apply.
8. Once you’re satisfied, click Save Changes in the Product Data section of the page, then scroll up to the Publish section of the page and click Update.

Now, when you view your shop pages, filter, or search, you’ll see the products you’ve edited displayed as individual products.

Troubleshooting: WooCommerce variations not showing or working

If you’re having trouble with your WooCommerce variations, such as them not appearing or not working as they should, don’t worry. There are several common reasons for these issues, and most can be fixed with a little bit of troubleshooting.

Here are some steps you can take to resolve these issues:

Check your setup of variable products

The first thing you should do is double-check that you’ve set up your variable product correctly. Sometimes, issues with variations not showing or working can be due to a mistake made during the setup process.

If you’re not sure how to set up variable products, we have a detailed guide that provides step-by-step instructions. Just look for the how-to section in our variable product guide.

Check your settings in Show Single Variations

If you’re using the Show Single Variations plugin, another thing to check is whether you’ve set your variations to be visible in the catalog. This is a common setting that can often be overlooked, but it’s crucial for your variations to display correctly.

For detailed instructions on how to do this, you can refer to our SSV documentation.

Elevating your product variations: a triple threat approach

While Show Single Variations is a potent tool for enhancing your WooCommerce product variations, its power is exponentially amplified when used with the WooCommerce plugins WooCommerce Attribute Swatches and WooThumbs for WooCommerce.

This trio of plugins can transform your online store, creating a more dynamic, engaging, and user-friendly shopping experience.

Here’s how these plugins can work together to elevate your product variations:

Enhanced variation images

With WooThumbs for WooCommerce, you can showcase multiple images for each product variation directly on the product page. This allows customers to see exactly what each variation looks like, helping them make a more informed purchasing decision.

It’s a great way to provide more detailed information without overwhelming the customer with text.

Upgraded variation attributes

WooCommerce Attribute Swatches takes the default product variation dropdowns and upgrades them into visually appealing and user-friendly swatches.

This not only simplifies the selection process but also provides a more interactive and engaging shopping experience. Customers can see all available colors, sizes, or other attributes at a glance, making it easier for them to find their desired product variation.

Expanded variation swatch visibility

When combined, these plugins allow you to display these swatches not just on the product page, but also on the filter, catalog, and search results pages.

This means that customers can see the available variations of your products wherever they are in your store, making it easier for them to find exactly what they’re looking for.

Bundle and save

To make things even better, you can get all three of these powerful plugins together and save with our WooCommerce Variations Bundle.

This bundle offers a comprehensive solution for enhancing your product variations, providing you with the tools you need to create a more engaging and user-friendly shopping experience.

By investing in this bundle, you’re not just buying plugins – you’re investing in a better shopping experience for your customers and a more profitable future for your online store.

WooCommerce 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.