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

In this tutorial, I'll show you two ways to display a WooCommerce 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 menu 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? There's where a WooCommerce variations dropdown plugin comes in.

Keep reading to discover two easy ways to add WooCommerce variations dropdowns to other parts of your site. First, you'll learn how to add WooCommerce product dropdown options 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 dropdown menus, like this:

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

Both plugins are excellent ways to add a WooCommerce product drop down list of variations 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 WooCommerce 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.

This type of WooCommerce dropdown menu is listed as product attributes dropdowns on the product detail page. Customers can select 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 menu 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 dropdown menus 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 WooCommerce dropdown menus for variations 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 WooCommerce variation dropdown menus using either the Express Shop Page or Product Table plugins.

You may also like: The best WooCommerce product filter plugins and how to use them.

Method 1: Add WooCommerce variation dropdowns to the 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's why it's the perfect WooCommerce select variation on shop page plugin - customers 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 dropdown options and/or quantity fields to appear on your shop and/or category pages.

And that's it! An incredibly simple way to show WooCommerce 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 product dropdown options to your existing store layout, it actually improves the display of your products. It does this by creating a fast one-page ordering experience.

The Product Table plugin is the perfect way to create quick order forms complete with WooCommerce 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 WooCommerce product dropdown lists. You can choose your columns, show or hide the images, choose the type of add to cart buttons, and much more.

While you can't use it to show the variation price in a dropdown, the price of each variation is clearly displayed when the customer selects a variation. Or to make the variation price even more visible, you can display each variation on its own row in the table instead of as product dropdown options. This keeps the price and other variation data visible all the time.

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 Product Table with WooCommerce variation dropdown menus

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 WooCommerce variation dropdown menus 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 product 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.

Related tutorial: How to add conditional variations to WooCommerce. 

How to display WooCommerce variation buttons instead of dropdown

While we're talking about the WooCommerce Product Options plugin, I'll tell you one more thing it can do.

Some store owners don't like the style of the WooCommerce dropdown menu for variations. Instead, they would prefer to display variation buttons instead of a dropdown.

You can do this by using the WooCommerce Product Options plugin to set up your options instead of using variations. This gives you extra styling options instead of just drop down lists. For example, this screenshot shows a charity donation product with the options added using different types of button instead of dropdowns. The "How much do you want to donate?" option displays text buttons for the customer to click on. The "Which charity are you donating to?" option has image buttons. As you can see, these are much more visual than using 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 dropdown lists:

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. Both options make it easy for customers to select variations on the shop page in WooCommerce - a faster way to shop. Customers 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 product variation dropdown menus in this way can have a big impact on sales. Get your favorite plugin today, and make life easier for your customers!