Display WooCommerce Product Variations Dropdown on the Shop Page

Remi | September 28, 2016 | in WooCommerce

Riaan, my fellow colleague at Automattic asked me if I had a snippet to display the variations dropdown select on the shop page for variable products so that customers can shop variable product directly from an archive page without having to visit the product page… and I didn’t have such a snippet. So I built it! (that was a long sentence right?)

The idea here is pretty simple, when you visit the shop page, or an archive page, the code checks the product type and if it’s equal to variable, the “Select Options” button is replaced by the regular add to cart button for variable products. In other words, it displays the dropdown selects for the product attributes and the add to cart button on the shop page for all variable products.


If you want to use this snippet, simply copy and place it in the functions.php file in your theme folder!

The author

About the author Remi: Hey! My name is RĂ©mi Corson, i'm a WordPress Expert Developer, i create high level themes and plugins, and i provide free stuff every week on this website!


  1. mgason

    I added the code. I am using Storefront theme from woocommerce. I get a selector and quantity field etc but none of my selectors actually contain the variations. Any ideas?

Leave a reply