WooCommerce Product Variations Plugins: 2 Easy Ways to Display Variations

By Updated: September 18, 2019

With WooCommerce, out of the box, you can only display product variations as dropdowns on the single product page. The problem is that this doesn’t offer the best, most intuitive user experience to most customers. It’s much better to add a WooCommerce product variations plugin which will let customers choose variations outside of the single product page.

Displaying WooCommerce product variations in a table layout using WooCommerce Product Table

As you can see, you can let customers view and select product variations from other parts of your shop. For example, you could display product variations on the main shop page, product category pages, or just about any other page in your online store.

With this in mind, in this article, I’ll teach you how to display WooCommerce product variations on any page in your online store using WooCommerce product variations plugins. You’ll learn how to display WooCommerce product variations:

Before we jump into the tutorial, let’s quickly take a look at why displaying WooCommerce product variations only on the single product pages isn’t the best solution.

Why you need a WooCommerce product variations plugin

As an online store owner, you probably already know that WooCommerce is one of the best (and easiest) ways to create an e-commerce site using WordPress. It lets you add all of your products to your store and creates an individual product page for each of them.

For each product you add to your online store, WooCommerce gives you the option to add product variations. WooCommerce products have variations whenever they come in multiple options. For example, this may include, sizes, colors, patterns, flavors, toppings, or materials – depending on the types of products you’re selling.

Although WooCommerce lets customers view and select product variations on the single product page, this isn’t the best possible solution for most store owners.

Here are a few reasons why:

  • Product variations aren’t as prominent as they can be.
  • Comparing the variations on offer with different products is difficult.
  • Customers have to navigate to the individual product page to be able to view the available variations.

The good news is that you can easily address these problems by adding a WooCommerce product variations plugin.

WooCommerce product variations demo: 2 plugins to display product variations

As you can see, WooCommerce’s default single product page isn’t always the best option for displaying product variations. Let’s explore two alternative ways to present product variations to customers:

Check out the WooCommerce product variations demo for each method:

Read about both approaches and choose the one that best fits your needs or use the jump links to skip directly to each section. You can use these plugins in your online store, either individually or together!


Method #1: Use WooCommerce Product Table plugin to list products in a table view

WooCommerce Product Table lets you list products along with their variations in a searchable, sortable, and filterable table layout.

Customers are able to view and select the exact product and variations they’re looking for using its extensive filtering options. In this way, it can be used as a WooCommerce product variations plugin.

WooCommerce Product Table
An easy-to-use plugin for listing WooCommerce product variations in new ways to boost sales!

The WooCommerce Product Table plugin generates fully responsive, mobile-friendly table layouts that customers can search through to find exactly what they’re looking for. As depicted in the WooCommerce product variations demo above, you can display product variations as dropdowns or on separate rows.

Why WooCommerce Product Table is the perfect variations plugin

The WooCommerce Product Table plugin is perfect for anyone who sells products that have variations such as clothes or food.

Reason #1: You can list variations anywhere on your site

The WooCommerce Product Table plugin offers flexible, customizable, and unique ways to display product variations on the front-end. What this means is that you can use it to to list variations anywhere on your online store, including:

  • Main shop page
  • Category pages
  • On any other page in your online store

As a result, customers are able to view and select product variations from any of the pages you choose to display the variation on instead of having to navigate to the individual product pages. This simple difference significantly improves the user experience your site delivers.

This makes WooCommerce Product Table an ideal solution for creating product catalogs, restaurant menus, order forms, and wholesale stores.

Fantastic plugin and outstanding support!
By Ann Lambin
Very easy to set up, this plugin is packed with tons of options to display the perfect product table on any page or post using a simple shortcode. You can choose the columns, rename them, hide the column title, use variations dynamically, add buttons, ... you name it, the plugin does it! Excellent documentation and outstanding support make that plugin a 'must have' for any WooCommerce shop. Simply brilliant.

Reason #2: You’re able to list variations in two different formats

With the WooCommerce Product Table plugin, you’re able to list product variations in two different formats in your table layout. You can choose to display them as either:

  • Dropdowns in the Add to Cart column.
  • As separate rows in the product table layout.

Businesses that sell clothes, shoes, or food might consider displaying product variations as dropdowns in the Add to Cart column. For example, if you sell dresses, customers can use dropdowns to view different dress variations (for example sizes, colors, and patterns).

WooCommerce product variations dropdown plugin

However, if you’re selling spare parts or large products (such as furniture or mattresses), you’d be better off displaying product variations on separate rows. For example, if you sell kitchen counters through your online store, you’d want each counter variation (counters with different dimensions) to appear on individual rows in the product table view.

Product table variations separate rows

Simply put, you can use this WooCommerce product variations plugin to list variations on any page in your online store, increase their visibility, deliver a better user experience, and potentially boost sales.

How to use WooCommerce Product Table to list variations and boost sales

To get started, you’ll need WooCommerce set up on your WP online store with products added to it. You’ll also need to purchase the WooCommerce Product Table plugin and install and activate it to your website.

Once that’s done, here’s what you need to do next to use a WooCommerce product variations plugin to boost sales:

Step #1: Add your WooCommerce product variations

First, we’ll add variations to our WooCommerce products. If you already have product variations added, you can skip to Step #2. However, in case you haven’t added variations yet, follow the steps outline below:

  1. Head over to Products -> Attributes and add the different attributes you need for your products.
  2. Open up your products in WooCommerce and scroll down to the Product data section.
    1. Select Variable product from the dropdown menu.
    2. Click the Attributes option and choose an attribute that applies to the product by clicking the Add button.
    3. Make sure the Used for variations checkbox is ticked and select all relevant attributes in the Value(s) field. Click Save attributes to proceed.
    4. Navigate to the Variations tab and click Go. You’ll be able to create your first product variation by selecting one of the product’s attributes and (optionally) fill out specific information related to the variation.
    5. Save changes.

Repeat these steps to add more product attributes and variations as needed.

Step #2: Configure WooCommerce Product Table’s settings

If you haven’t done so already, get the WooCommerce Product Table plugin and install it to your WordPress website. Next, head over to WooCommerce -> Settings -> Products -> Product Tables to enter the plugin’s license key.

WooCommerce Product Table license key

Once you’ve activated the license key, you can begin configuring the plugin’s settings from the same screen.

Scroll down to the Table content section and enter image,name,description,price,add-to-cart into the Columns option.

WooCommerce Product Table settings columns option

Next, scroll down till you reach the Add to cart column section and set the Variations option to Show as dropdown list.

WooCommerce Product Table settings screen variations option

This will display your WooCommerce product variations as a dropdown list in the Add to Cart column. (Alternatively, you can also choose to display each variation on a separate row or link to the individual product page.)

Step #3: Display WooCommerce product variations anywhere on your website

Head over to Pages -> Add New to create a new page that you’d like to display the product table in. If you’ve already created a page that you’d like to add the products to, navigate to Pages -> All Pages and open it up in the Edit Page screen.

For Gutenberg:

Click the (+) sign in the top-left corner of the screen and select the Shortcode option to add it to the text editor. Next, insert the [product_table] shortcode to the Shortcode block.

Adding WooCommerce Product Table shortcode in the Gutenberg editor

For Classic Editor:

Click the Insert Product Table icon in the toolbar. This will automatically add the [product_table] shortcode to the text editor:

Adding WooCommerce Product Table shortcode in the classic text editor

Once you’ve added the shortcode to the text editor, publish the page and preview it on your site’s front-end. It will look something like this:

WooCommerce Product Table with variations displayed as dropdowns

And if you decided to display each variation on a separate row, it should look something like this:

WooCommerce Product Table with variations displayed on separate rows

You can also display WC variations on the main shop page or on product category pages. Check out this live WooCommerce product variations demo for inspiration!


Method #2: Use WooCommerce Quick View Pro plugin to display product variations in a quick view lightbox

Woo Quick View Pro is a different type of WooCommerce variations plugin. It lets you present product variations in a lightbox view. In addition to the variations, you’re also able to display product images and galleries, details, and purchasing options.

Customers are able to open the lightbox either by clicking on the product’s name (or image) or by using the Quick View button. If you choose to enable the option to launch the lightbox by clicking on the product name or image, links to the single product page will automatically be disabled.

WooCommerce Quick View
The easy way to display WooCommerce product variations in a quick view lightbox!

With this WooCommerce product variations plugin, you can choose exactly which product details and purchasing options to display in the quick view lightbox. You can also use the plugin with WooCommerce Product Table to add quick view links to your product tables.

Why WooCommerce Quick View Pro is great for presenting WooCommerce product variations

The WooCommerce Quick View Pro is ideal for products that are best presented with images and galleries e.g. fashion items, food, and tech products. It’s also perfect for products that don’t require images, but have multiple variations.

Either way, the plugin lets you replace the single product page with a lightbox. What this means is that you can display the information customers needs to make a buying decision and choose variations directly in the quick view lightbox. So, instead of clicking through to the single product page, customers can select product variations and make a purchase directly from the main shop page or category pages. There’s no need to visit a separate page for each product.

With the WooCommerce Quick View Pro plugin, you can display the following information in the lightbox:

  • Product name
  • Product image (and full gallery)
  • Reviews
  • Price
  • Quantity selector
  • Product variations
  • Add to cart button (including variation dropdowns and quantity picker)
  • Product details (such as SKUs and categories)

How to present WooCommerce product variations in a quick view lightbox

To get started, you’ll need to have WooCommerce set up and configured with some products added to your online store. Once that’s done, here are the steps you need to follow to achieve the same look and feel as this WooCommerce product variations demo:

WooCommerce Quick View Demo

Step #1: Configure WooCommerce Quick View Pro’s settings

First, get the WooCommerce Quick View Pro plugin and install it to your website. Head over to WooCommerce -> Settings -> Products -> Quick view to activate the plugin license.

WooCommerce Quick View Pro license key

Click the Save Changes button to proceed.

The WooCommerce quick view variations plugin automatically displays all products in a quick view layout once you activate it. So, if you head over to your main shop page, it should look something like this:

Main shop page in WooCommerce with Quick View links

Step #2: Display product variations in the quick view lightbox

With WooCommerce Quick View Pro, you can choose exactly what information and options you’d like to display in the lightbox. Here’s how:

From the WooCommerce -> Settings -> Products -> Quick view screen, find the Quick View contents option. Next, use the dropdown menu to select what you’d like to display in the lightbox.

Quick view content options

The available options include:

  • Image only. This option only displays product images and galleries.
  • Product details only. By selecting this option, you’re able to display product details (including product variation dropdowns) in the lightbox. Go for this option if you only want to display information and not images.
  • Image and product details. This option lets you display both images and product details (including product variations) in the lightbox. If you want to let customers view product images (with image zoom functionality) then we recommend selecting this option.

Step #3: Choose which product details to display in the lightbox

If you go for either the Product details only option or the Image and product details option in Step #2, you can also choose which product details to display in the quick view lightbox. Here’s how:

From the same settings screen, scroll down till you reach the Product details section.

Available product details to display in the quick view lightbox

You can choose to display:

  • Reviews
  • Price
  • Short description
  • Add to cart button
  • Meta information (such as product SKUs and categories)

… in the quick view lightbox.

In order for product variations to show up in the lightbox, you must make sure that the Show add to cart button checkbox is selected.

For example, if you wanted to display the product variations, add to cart button, and price only, the lightbox would look something like this:

WooCommerce Quick View Pro with price and add to cart button

Further reading: you can use WooCommerce Quick View Pro with WooCommerce Product Table by following these simple step-by-step instructions.

Conclusion

You can use a WooCommerce product variations plugin to display product variations in a:

  • Table layout as dropdowns or as separate rows. Displaying variations in a table layout improves their visibility, makes it easy to add to cart, and allows customers to compare different variations. Making it easier for customers to browse through your products and buy from you can have a huge impact on sales.
  • Quick view lightbox complete with images, details, and purchasing options. This way, customers are able to purchase products directly from your main shop page or category archive pages instead of having to go to the single product page first.
  • A hybrid approach. You can use WooCommerce Quick View Pro with WooCommerce Product Table to add Quick View buttons to your product tables.

By creating smooth user flows, you’re able to deliver a frictionless user experience and ultimately increase sales.

GET WOO PRODUCT TABLE GET WOO QUICK VIEW

We shared a WooCommerce product variations demo for using product tables and another for using quick view lightboxes to display WooCommerce product variations on your site. We also showed you how you can achieve the same functionality in your own online store. Hopefully, you’re in a good position now to take the next steps.

Maria Ansari

From C++ to PHP, the language Maria thinks in is code, and translates it to English for humans to understand. She has a degree in Computer Science and is the writer of choice for many organizations. She is also The Big Boss at BloggInc., calling all the shots and personally supervising every word and piece of content.

Please share your thoughts...

Your email address will not be published.