2 ways to display a WooCommerce product variations dropdown to shop & category pages

In this tutorial, I'll show you 2 ways to display a WooCommerce product variations dropdown on the shop page and category pages. This makes it much faster for customers to add products to their cart, helping to grow your conversion rate.

By default, WooCommerce only shows a 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?

Keep reading to discover 2 easy ways to add WooCommerce product variations dropdowns to other parts of your site. First, you'll learn how to add product variation dropdowns to your shop and category pages like this:

We'll do this with the WooCommerce Express Shop Page plugin.

After that, I'll tell you how to take this a step further by displaying your products in a one-page order form complete with variation dropdowns, like this:

We'll do this with the WooCommerce Product Table plugin.

Both plugins are excellent ways to add a product variation select directly to the WooCommerce shop page. Customers can view products, choose variations from a dropdown, and add to the cart without visiting the single product page.

How does WooCommerce display variations?

Before 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 attributes 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.

The variations dropdown doesn't appear in the list of products on the shop or category pages. 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.

Related tutorial: How to let customers select product variations on the WooCommerce Shop 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 either the WooCommerce Express Shop Page or WooCommerce Product Table plugins.

Method 1: Add variation dropdowns to the WooCommerce shop page

Our first method for creating shop page variation dropdowns is super-simple. After all, the WooCommerce Express Shop Page plugin was designed exactly for this purpose!

This simple plugin takes the variation dropdowns from the single product page, and displays them on the main shop page and category pages. It does the same for quantity boxes. That way, customers can use the variation dropdowns and quantity fields directly on the main shop and category pages.

Unlike method 2, the overall layout of your shop pages won't change. The only difference is that after installing the plugin, you will have variation dropdowns and quantity fields on these pages - keeping your existing store layout.

Setup instructions

1. Install the WooCommerce Express Shop Page plugin on your WordPress site.
2. A quick setup wizard will open when you first activate the plugin.
3. Use the setup wizard to choose whether you want the WooCommerce product variation dropdowns and/or quantity fields to appear on your shop and/or category pages.

And that's it! An incredibly simple way to show product variation dropdown lists on your main shop pages.

Method 2: How to list attribute options in a table with WooCommerce variations dropdown lists

Method 2 takes a different approach to showing variations on the shop page. Instead of just adding the dropdowns to your existing store layout, it actually improves the display of your products to optimize the one-page ordering experience.

The WooCommerce Product Table plugin is the perfect way to create quick order forms complete with variation dropdowns and add to cart buttons.

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!

Set up WooCommerce Product Table with product variation dropdowns

Before you start, 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.

Then, follow these easy steps to list variation dropdowns on the shop page and other parts of your store:

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.

Now it's time to list variation dropdowns in a table. There are two easy ways to add variation dropdowns to the WooCommerce shop page:

1. Use the options on the plugin settings page to enable the product table layout on the shop and/or category pages, replacing the default layouts in your theme.
   
   
2. Use a [product_table] shortcode to add product tables to normal pages in your site, which you can use instead of the default shop page.

Option 1 is ideal for most people because it uses the product table layout for ALL the product lists on your website. Customers will see a variation dropdown for each variable product on all your product lists.

Option 2 is good if you want to create product tables for certain variable products only. You can use the 50+ shortcode options to choose which products to include in each table.

Either way, once you've finished you'll see a WooCommerce table with variations dropdowns.

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 add-on fields that you can create with the WooCommerce Product Options 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 it with either the WooCommerce Express Shop Page or WooCommerce Product Table plugin to show the extra product options on the shop page. Here's an example of what it looks like with the Express Shop Page plugin:

That way, you can show all sorts of product options on the shop page - not just WooCommerce variation dropdowns.

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 lightbox. 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:

Now you're ready to create variation dropdowns in WooCommerce

That wraps up our guide on 2 easy ways to add WooCommerce product variation dropdowns to the shop page:

• Either add variation dropdowns to your usual store layout with the WooCommerce Express Shop Page plugin, or;
• Create quick order forms with variation dropdowns using the WooCommerce Product Table plugin.

Either way, this is a great way to improve the shopping experience for your customers. They no longer have to click to the product detail page to view variation attributes 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 your favorite plugin today, and make life easier for your customers!