Add Product Variation Select Directly to Woocommerce Shop, Category and Archive Pages

This tutorial is valid as of Woocommerce 1.6.4, later versions may have moved things around a bit.

So you’ve got a bunch of products that have variations in your Woocommerce store. When visitors come to your main shop page, instead of seeing the option to add a product to their cart, they get a “Select Options” button which will take them to the individual product’s page, where they can choose between the available variations.

But what if you just want your customers to be able to choose a variation right there?

Seems straightforward enough. Here’s how to do it. Note that you’ll need FTP access to your site and a way to edit the files therein.

  1. In your theme, create a folder called woocommerce if you don’t already have one in there.
  2. In your plugins folder, go to woocommerce > templates and copy the content-product.php file from there to the woocommerce folder we created in your theme in Step 1 above.
  3. On line 68 (the last line of code before the closing </li> in that file, look for this:
    <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
  4. Replace that with:
    <?php remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
    do_action( 'woocommerce_single_product_summary' ); ?>

    Up Next: Photoshop Templates for iPhone 6 (Safari & Chrome)