How to add a WooCommerce Variations Dropdown of Product Options to the Shop & Category Pages

By Updated: March 5, 2019

WooCommerce variations dropdown plugin

You’ll often see a WooCommerce variations dropdown on the single product page. It’s the standard way to choose different options for variable products. But what if your customers need to select variation options from other parts of your shop – such as the main shop page, product category pages, or any other page on your WordPress website?

In this tutorial, I’ll teach you how to add WooCommerce product variations dropdowns to other parts of your site. You’ll learn how to create a WooCommerce product variation table. You’ll also learn how to add a product variation select directly to the WooCommerce shop page.

Customers can view your products, choose product options from a dropdown, and add to the cart without visiting the single product page. You don’t need to write or edit any code. We’ll do everything with the easy-to-use WooCommerce Product Table display product variation plugin.

WooCommerce Product Table

Add WooCommerce product variations dropdowns to your site today!

VIEW DEMO

Are WooCommerce variations dropdowns available in the WooCommerce core?

WooCommerce product variations dropdownBefore we start, let’s look at what you can do with product variation dropdowns without any extra plugins. The free WooCommerce plugin comes complete with a variable product type. You can add a choice of options for each product.

For example, you might want to create a WooCommerce variations dropdown for color and another for size.

These variations are listed in a product options dropdown on the product detail page. Customers can choose any combination of the variation options from the dropdowns before adding the product to the cart. Their choices will add to the cost of the product, and added to the cart with the correct totals.

This is all built into the WooCommerce core, without needing any extra plugins.

So why do I need a WooCommerce variations dropdown plugin?

Now it’s time for the bad news. The built-in WooCommerce variations dropdown is perfect if customers only need to select variations from the single product page. The limitation is that the product options dropdown doesn’t appear anywhere else on your WooCommerce store.

WooCommerce category page without variations drodown
WooCommerce shop page – no product variations dropdowns!

The variations dropdown doesn’t appear in the list of products on product category pages. You can’t display WooCommerce product variations dropdown on the shop page. Instead, the usual add to cart button (which appears for simple products without variation) is replaced with a ‘Select options’ button linking to the single product page.

This means that customers have to click through to the product details page to buy variable products. They can’t view the variation options or prices on the product listings pages at all. This adds an extra click to the process and lengthens the buying process.

No one wants that, as customers are more likely to get frustrated and give up!

It’s better to list WooCommerce variations dropdown wherever your products are displayed. You’ll get more sales if customers can view all the options and buy straight away, without having to click through to another page.

Case study – variation dropdowns on OrderAmysFood.com

OrderAmysFood.com have a food ordering service on their website. Customers can order a whole meal along with entrees, side dishes, drinks and dessert.

OrderAmysFood.com want to accommodate everyone, so there are variations to most menu items. A customer can choose a larger portion size, or ask for their curry to be extra spicy, or even ask that it’s made vegan-friendly. To make this happen, they’ve created product variation dropdowns using the Woo Product Table plugin.

The order form includes at least one dropdown for each dish. Each time a customer selects a dropdown variation, the cost of the product is recalculated to show how much it’ll cost exactly. It’s extra convenient for the customer to be able make these selections right there and then. And seeing the price change instantly means there’s no surprises around the corner.

Carry on reading to find out how to add your own product variation dropdowns using WooCommerce Product Table.

How to list product options in a table with WooCommerce variations dropdown lists

WooCommerce product variations dropdown plugin
Add a product table with WooCommerce variations dropdowns anywhere on your site

Our popular WooCommerce Product Table plugin lists your products in a table layout. With over 1,000 users, it’s the perfect way to list variation dropdowns and add to cart buttons directly in your product lists.

It’s much more flexible than the default Woo shop and category page layouts. You have full control over what’s displayed in the table. This includes several ways to list variation options including dropdown lists. You can choose your columns, show or hide the images, choose the type of add to cart buttons, and much more.

See the WooCommerce variation dropdowns in action on our demo page.

There’s plenty you can do with product tables. But for the purposes of this tutorial, we’re looking at how to add the WooCommerce variations dropdown lists for variable products. Now we’ll get started!

WooCommerce variations dropdown plugin reviews
Praise for how WooCommerce Product Table lists variation options

Set up WooCommerce Product Table with product variation dropdowns

First, I’ll show you how to add a product table with variation dropdowns to a standard page in WordPress. This is really easy! Afterwards, I’ll teach you how to use this layout on the main WC shop page and product category archives.

Before you follow these instructions, I expect you to have a WordPress website with WooCommerce installed and some variable products added. If you don’t know how to do this, then the official WooCommerce documentation will walk you through it.

  1. Get WooCommerce Product Table.
  2. Follow the instructions in the ‘Getting Started’ email to install and activate the plugin.
  3. Go to WooCommerce > Settings > Products > Product Tables. Enter your license key and choose the default options for your product tables. Make sure you include the add-to-cart column in the ‘Columns’ section, and select the variations dropdown option under ‘Variations’. This will show your WooCommerce variations as dropdown lists in the add to cart column. All the other settings are optional. Choose whichever are most suitable for your store.
  4. Next, go to the page where you want to add your product table with variations dropdown lists. Add a [product_table] shortcode to the page. Save the page and view it.

You’ll see a WooCommerce table with variations dropdowns and the options you chose on the settings page.

WooCommerce variations dropdown plugin

Add product tables to the WooCommerce shop and category pages

The easiest way to list items with WooCommerce product options dropdowns is to add product tables to standard WP pages. You can link to these pages instead of directing customers to the default layouts used on the main WooCommerce shopfront and product category pages.

If you prefer, then you can add the product table view – complete with variation dropdown lists – directly to the WooCommerce shop and category archive templates. This is a bit more technical, but we provide sample templates to get you started.

This is ideal because it uses the product table layout for ALL the product lists on your website. Not just the pages where you’ve chosen to add a product table with variations listing the options. Customers will see a variation dropdown for each variable product on all your product lists.

How to add WooCommerce variations dropdowns to the shop and category pages:

  1. Follow steps 1-3 from the previous section.
  2. Use these knowledge base links to add WooCommerce tables to the shop page and/or product category archive templates.

Can I create dropdown lists of other types of option?

So far, we’ve just talked about how to create WooCommerce variation dropdown lists for your variable products. Everything in this tutorial equally applies to the extra product options that you can create with the official WooCommerce Product Add-Ons plugin.

This plugin adds extra options for your products including more flexible dropdown lists, checkboxes, radio buttons, text entry fields for custom messages, and more. You can use WooCommerce Product Table to list any of these options in your store. They’ll appear in the table in exactly the same way as the variations dropdown.

Further reading: How to list product add-on options in a WooCommerce table.

Bonus tip – Show WooCommerce variation dropdowns in a quick view lightbox

So far, you’ve learned how to display WooCommerce variation dropdowns within a product table layout. You can also list variations as dropdowns in a quick view license – either with or without product tables. To do this, you need the WooCommerce Quick View Pro plugin.

The quick view plugin is super-flexible. Here are some suggestions of how you can use it for your product variation dropdowns:

GET WOOCOMMERCE QUICK VIEW

Now you’re ready to create variation dropdowns in WooCommerce

That wraps up our guide to using Product Table as a WooCommerce variations dropdown plugin. Customers can buy variable products more quickly and easily. They no longer have to click to the product detail page to view product options and pricing.

By saving your customers time and making it easier to buy from you, displaying variation dropdowns in this way can have a big impact on sales. Get WooCommerce Product Table today and put it into action.

WooCommerce Product Table

Add WooCommerce product variations dropdowns to your site today!

Katie Keith

An active member of the global WordPress community, Barn2 Co-Founder Katie loves collaborating with other plugin companies. Her articles have been published on high profile sites including WPTavern, Torque and IndieHackers. She oversees all plugin support and deals with 'Tier 2' support requests about how to use Barn2's plugins in advanced ways.

Please share your thoughts...

Your email address will not be published.