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.
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:
- Table layout as dropdowns and as separate rows
- Quick view lightbox
- User-friendly grid or price matrix
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: 3 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 three alternative ways to present product variations to customers:
- Product table view (as dropdowns and on separate rows)
- Quick view lightbox with product details and purchasing options
- User-friendly grid or price matrix with quantity selectors and purchasing options.
Check out the WooCommerce product variations demo for each method:
Read about all three 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.
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!
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).
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.
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:
- Head over to Products → Attributes and add the different attributes you need for your products.
- Open up your products in WooCommerce and scroll down to the Product data section.
- Select Variable product from the dropdown menu.
- Click the Attributes option and choose an attribute that applies to the product by clicking the Add button.
- Make sure the Used for variations checkbox is ticked and select all relevant attributes in the Value(s) field. Click Save attributes to proceed.
- 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.
- 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.
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.
Next, scroll down till you reach the Add to cart column section and set the Variations option to Show as dropdown list.
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.
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.
For Classic Editor:
Click the Insert Product Table icon in the toolbar. This will automatically add the
[product_table] shortcode to the 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:
And if you decided to display each variation on a separate row, it should look something like this:
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.
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)
- 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:
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.
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:
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.
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.
You can choose to display:
- 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:
Further reading: you can use WooCommerce Quick View Pro with WooCommerce Product Table by following these simple step-by-step instructions.
Method #3: Use WooCommerce Bulk Variations plugin to list products in a bulk ordering grid or price matrix
The WooCommerce Bulk Variations plugin lets you list WooCommerce product variations in a user-friendly bulk ordering grid or price matrix.
It makes it easy for customers (particularly wholesale buyers) to quickly see the different product variations available, enter quantities, and add them to their shopping cart. It lets you display all of the attributes and options for a product in a neat grid layout.
You can use the WooCommerce Bulk Variations plugin to list variations with quantity boxes or in a price-only mode. In this way, it works as both an order form and a price matrix. It works seamlessly with the WooCommerce Quick View Pro plugin.
Why WooCommerce Bulk Variations is perfect for displaying product variations
The WooCommerce Bulk Variations plugin is great for displaying product variations for clothing and apparel, wholesale products, and products that are typically sold in large volumes. It’s also the perfect choice for products that don’t require images but may have several variations such as sweets and candies.
Using the WooCommerce Bulk Variations plugin, you can replace the single product page with either a bulk ordering grid or a simple price matrix. This is a great way to boost product variation visibility in your online store and make it easier for customers to buy more from you.
Instead of using dropdowns to select the correct product variation and adding items to their cart one at a time, customers can simply choose how much of each product variation they’d like to purchase, set the quantity, and add them to their cart in one go.
The key benefit here is that customers don’t have to spend time adding variations to their shopping cart one at a time. This is the most intuitive way to sell variable products in WooCommerce.
How to use WooCommerce Bulk Variations to list product variations
We’ll assume you already have the WooCommerce plugin set up and configured with some variable products added to your online store. Once that’s done, here’s what you need to do to achieve the same look and feel as this WooCommerce product variations demo:
Step #1: Install and activate the WooCommerce Bulk Variations plugin
Get the WooCommerce Bulk Variations plugin and install and activate it to your WordPress website. Head over to WooCommerce → Settings → Products → Bulk variations to activate your license key.
Click the Save changes button to continue.
You can enable bulk purchasing for individual WooCommerce products (from the Edit Product page) or do it globally for all variable products in your online store (from the plugin’s Settings page).
Step #2: Display product variations in a grid layout or price matrix
Here’s how you can display product variations using the WooCommerce Bulk Variations plugin:
Click on the Bulk Variations tab from the Product data section on the Edit Product screen. Tick the checkbox next to the Enable bulk variations grid option.
Once that’s done, select the variation attributes you’d like to display in the Columns and Rows of the bulk ordering grid or price matrix using the dropdowns.
Tick the checkbox next to the Display variation images option if you’d like to have product variation images appear in the matrix layout.
The bulk ordering grid layout should look something like this on the front-end:
If you’d like to create a simple price matrix (without purchasing options), simply tick the checkbox next to the Disable purchasing option.
Bonus - Change the variation price format
So far, we're concentrated on WooCommerce product variations plugins which handle how your variable products are displayed. But what about the display of your variation prices?
By default, WooCommerce displays the variation price as a range with the lowest and highest price options. For example, it might say: "$100 - $200".
That isn't suitable for all types of products, so I recommend considering whether it's appropriate for your store. If not, then you can easily replace the variation price range with any other format. Just install the WooCommerce Variation Prices plugin and change the way the prices are displayed.
The updated variation price format will appear in the product table, bulk variations grid or quick view lightbox, depending on which WooCommerce product variations plugins you're using.
Where to get the plugins
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.
- Grid layout with purchasing options or price matrix. Customers can quickly see product variations at a glance, set quantities, and add variations to their cart.
By creating smooth user flows, you're able to deliver a frictionless user experience and ultimately increase sales.
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.