Mastering variations as single products in WooCommerce: A guide

Only displaying variations on single product pages can confuse customers and deliver a poor shopping experience. Instead, learn how to show WooCommerce variations as single products on the shop page, or anywhere else in your store.

If you're selling variable products in WooCommerce, you’re most likely hiding all those variations on the product page. But what if you want to display each variation as its own, standalone product across your store?

Displaying each variation as a separate product allows customers to see all the options without having to click through to separate pages. But surprisingly, WooCommerce doesn’t make this easy out of the box.

In this tutorial, I'll show you how to master product variations by listing them as separate products using the WooCommerce Product Table plugin.

You’ll learn how to display variations alongside your other products in a user-friendly searchable, sortable and filterable table. Each variation will have its own row on the table, allowing customers to view all the options at a glance. They can easily select all the variations they require, and add them to the cart.

Streamlining your WooCommerce store with single product variations

Faster shopping means more conversions. Listing variations as if they were individual products removes several clicks from the buying process, which can make a big difference to sales.

Katie Keith – CEO, Barn2 Plugins

Although WooCommerce allows you to create variable products, it groups all variations onto the single product page. Your main shop pages only displays the overall variable product, without any clue as to what the options are.

For example, imagine that you're selling a hoodie that comes in 3 colors. Only the overall 'Hoodie' product will be visible on the shop page, with no indication of which colors are available. If the main product image is green then customers looking for a red hoodie won't know to click on it. This leads to unhappy customers, and lost sales for you.

Displaying each variation as an individual product helps improve discoverability and findability. Compared to the default WooCommerce method, where customers have to select from a dropdown menu just to see a variation's image, seeing each variation displayed like a product on the main shop page leads to a seamless shopping experience.

When variations are separated out, customers can more easily browse through them, view details, and add multiple options to their cart. This helps increase your store's average order value (AOV) as customers can more easily view and purchase multiple variations.

Can I show variations as single products without a plugin?

To show variations as products using WooCommerce as it comes, you'd have to create individual products for each option. You can't do it using variable products.

Unfortunately, this can be a very time-consuming task, especially if you have several variable products. It also makes tracking sales and managing inventory harder, since you'd have to combine figures from each set of variations yourself to get an accurate picture of what you’re selling.

Thankfully, there's a better way. You can create your variable products in the usual way and use a WooCommerce product variation plugin to display them as if they were separate products on the shop page. WooCommerce Product Table can help you easily achieve this goal.

In the next section, I'll show you how WooCommerce Product Table can showcase variations as individual products and streamline your customer experience.

Setting variations as a single product with WooCommerce Product Table

Product Table is the best plugin for displaying WooCommerce variations as individual products. It lets you create product tables that clearly display all of your product options in a single order form view.

The table displays all of the key data about each variation in individual columns. This includes the variation image, variation description, price, add to cart button, and quantity selector. You can also add extra columns as needed. Customers can view and purchase any variation directly from the shop page, eliminating the need to visit individual product pages.

With WooCommerce Product Table, you get the best of both worlds. You can list dedicated products for each variation, without losing the benefits of linking them to a parent variable product. Customers can view and order variations directly from the table, as well as in the usual way on the single product page.

Now that we know how WooCommerce Product Table can help us achieve our goal, let's install and configure it on your site.

Setup instructions

1. Buy the WooCommerce Product Table plugin and install it on your WordPress site.
2. As soon as you activate the plugin, a setup wizard will start.
3. In the setup wizard, verify the license to unlock all features and future updates. You can also choose from various options to configure your product tables.

Configure WooCommerce Product Table's settings

When you set up your product table, there are over 50 options to choose from. To show WooCommerce variations as single products, I recommend focussing on the following plugin settings:

List one variation on each row of the table

This gives every variation its own dedicated space in the table. Customers can easily scroll through and discover all the available options, since each variation will be separately displayed.

Choose which product details to show

Select which product data is shown to customers on the product table. In our use case, you may want to show important information like the product name, description, image, categories, attributes, and more.

Add a separate “add to cart” button per variation

In addition to listing each variation in a separate table row, WooCommerce Product Table adds an individual "Add to Cart" button per variation. You can choose to have the add to cart button and/or multi-select checkboxes so that customers can tick multiple variations at once.

Add quantity field to each variation

WooCommerce Product Table also lets you add a quantity field to each variation. This allows customers to order multiple quantities of the same variation directly from the table.

Display filter dropdowns above the table

You can also add filter dropdowns above the table to allow customers to easily narrow down the list to find their desired variations. This option is quite helpful if you have a lot of products.

For example, if you're selling clothes then a 'Color' filter dropdown is really helpful. It lets customers quickly view products and variations in their preferred color.

Enable table layout on the frontend

Once you've configured the plugin's settings, the final step is to decide where to display the product table. You can:

1. Automatically enable the table layout on the default shop page, category page, and other product listing pages.
2. Use a shortcode to list specific products and variations in different parts of your store.

That's it! You can now visit your shop's frontend to see the variations listed as single products. In the following section, we'll go over some tips to help you make the most of WooCommerce Product Table.

Best practices for maximizing your success with WooCommerce Product Table

Optimizing product findability with filterable variation attributes

Most customers don't want to sift through your entire catalog to find what they want. Instead, they prefer to be able to seamlessly filter down to the exact product variation they want.

WooCommerce Product Table allows for this streamlined shopping experience through filterable attributes. Customers can easily filter variations based on color, size, style, and other attributes to see only the relevant results.

For example, someone looking for a green t-shirt could filter by "Product Category: Clothes" and "Color (attribute): Green" to show relevant matches.

Filterable attributes greatly improve product discovery, conversion, and the overall shopping experience. The easier you make it to find the right products, the more likely customers will make a purchase.

However, for the best user experience, you must keep your product attributes straightforward and user-friendly. Avoid overly niche or confusing attributes and use clear and descriptive names from the customer's perspective.

If you're unsure where to start with attributes, consider surveying your customers directly. Learn how they would describe or look for your products and then build your attributes around their needs and natural terminology.

Advanced usage tip for better variation filtering

So far, we've learned about the filter dropdowns which come with the WooCommerce Product Table plugin. For even more helpful filters, you can buy WooCommerce Product Table with its sister plugin - WooCommerce Product Filters.

This adds more visual filtering options to your store, such as color swatches and other customer-friendly features:

Customizing add to cart options for improved user interaction

WooCommerce Product Table lets you customize the add to cart experience for a smoother user journey. Right out of the box, it gives you several options to tailor the add to cart process.

For example, you can choose between three add to cart button styles - standard button, checkbox, or both together. The checkbox together with the button allows customers to seamlessly select and buy multiple variations all at once. No need to add items one by one.

You can also toggle the AJAX cart option to prevent the page from reloading each time a customer adds an item to their cart. This creates a smooth, uninterrupted workflow as customers browse and purchase your products.

It also lets you adjust the placement of the cart button around the product table when using checkboxes. You can position it above, below, or on both ends of the product table.

Lastly, it integrates perfectly with the free WooCommerce Custom Add to Cart plugin, so you can easily customize the design, text, and styling of the buttons.

Optimizing the add to cart process in this way can significantly improve customer interaction, reduce cart abandonment rates, and increase your sales.

Transform your store with single product variations

The default WooCommerce way of displaying variations makes it difficult for customers to see all the product options you offer. A better solution would be to show each variation as a single product on the shop page.

While there’s no simple way to do this in WooCommerce, you can use the WooCommerce Product Table plugin to achieve this goal. It lets you:

As you can see, WooCommerce Product Table significantly improves the findability and discoverability of variations in your eCommerce store. Ready to improve the customer experience for variable products? Get the plugin today!