Mastering variations as single products in WooCommerce: A guide

Mastering Variations as Single Products in WooCommerce

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 online 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, Woo 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 KeithCEO, 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 variant 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 variants 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. First, make sure you have a WooCommerce store set up and add variations as needed.

Setup instructions

Either watch this video or read the written instructions below:

  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/table builder will start. This takes you through the process to show single variations:
    • On the first page, decide whether you want to list variations as separate products on your main shop pages or whether you want to manually add a table of variations to a different page. You can then select the shop page or other product listing page templates. Or if you chose the manual option then you can select specific products, categories etc. to list the variations for.
      Create page of table builder
    • Select which columns of product data to display for your variations. For this use case, you may want to show important information like the product name, description, image, categories, attributes, taxonomy terms, and more.
      Customize columns in WordPress table plugin
    • On the Add to Cart page, change the variation option to show them as separate products.
      Add to cart page of WooCommerce product table builder
    • On the same page, you can choose to have the add to cart button and/or multi-select checkboxes. This adds a separate “add to cart” button per variation. With the checkboxes, customers can tick multiple variations at once.
    • You can also add a quantity field to each variation. This allows customers to order multiple quantities of the same variation directly from the table.
    • 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.
      WooCommerce Product Table builder filter dropdowns
    • Finally, create a page and insert the shortcode onto it. You can find this on the final page of the table builder or at Products → Product Tables. (Skip this step if you opted to enable the table view on your shop pages.)

View the page, and you'll see your variations listed as single products in the frontend.

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.

Filter variable product by attributes

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 Product Table WooCommerce plugin. For even more helpful filters, you can buy 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:

WooCommerce Product Filter plugin with product count

Customize the variation name format

By default, WooCommerce Product Table lists variations as single products with the product name followed by the variation attributes. As you can see, that becomes a bit repetitive when a single product has multiple variations:

Product table variations separate rows

You can change the variation title using the advanced options on the plugin settings page. Find this at Products → Product Tables → Settings.

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. Do this at Products → Product Tables → Settings. 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.

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:

  • Display products and variations in a user-friendly order form view, with each variation displayed as if it was a separate product.
  • Keep variations linked to the parent product in the backend.
  • Add a separate add to cart button or checkbox for each variation.
  • Add a quantity field for each variation.
  • Allow customers to filter variations by their product attributes such as color and size.

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!

Please share your thoughts...

Your email address will not be published. Required fields are marked *