Video Tutorial – How to replace the drop down fields on your WooCommerce variable products with Swatches

Video Tutorial - How to replace the drop down fields on your WooCommerce variable products with Swatches 2

Today we built a WooCommerce website where we needed to have the option of visual Swatches instead of the standard variable products drop down. Luckily the
Variation Swatches and Photos WooCommerce Extension allows you to add lovely looking swatches ‘out of the box’. In the following 3 video tutorials I show you how to implement swatches on your own WooCommerce websites.


Step 1: Installation, and how to Product attributes and terms

Step 2: How to create your product with Swatches

[box type=”info”] Want more? For over 10 hours of WordPress, WooThemes and WooCommerce video tutorials take a look at the PootlePress Academy.


6 thoughts on “Video Tutorial – How to replace the drop down fields on your WooCommerce variable products with Swatches”

  1. Hi Guys,
    This plugin looks fantastic… Thanks for the walkthrough. I just built a fabric store shop with woocommerce and I wish this was out then! It would have saved uploading about half of the products. Will think about recommending this as it will save a ton of time on the user end searching for all the variants.

    I’m having a similar issue now with a art website I am building a woocommerce shop on. I’d like to only have one product but then have two selections, paper or canvas, that can be added to the cart. As it stands I have to create two products with their own range of attributes as opposed to having one product with two unconditional attributes. So the user could pick either canvas or paper from the product page. Woocommerce does not support this as it stands, Shopp does as far I know, so if your looking for more plugin ideas there you are. Please hurry!

    Thanks for the great content. Love it!


    1. Jamie Marsland

      Great glad it was useful!. Thank you very much for taking the time to comment Jordan 🙂


  2. This is great but it’s too bad you can’t set the thumbnail once in the attribute section and it show up in the single product variation selection.

    Meaning every time you create a new product you have to go through the whole process of adding images and customization.

    In my case I have artwork for sale and each artwork can have a black or silver frame.
    an attributes for framing with black or silver frames as terms.

  3. I need to group the colors using this plugin.
    I want to create a variable products having three grades of colours.(Grade 1 , Grade2 , Grade3).
    Each grade has different sets of colours.
    Is it possible to create a dropdown of grades and then show colours?

  4. This is great, I am doing a paint website and there are about 130 colors. This means teh “Add Cart” button is way down the bottom.

    It would be great if you could float the Add Cart button so you can add the product as soon as you find the one you want.

  5. Hi. I followed all the steps, but still only get a silly dropdown for selection, and cannot see my images or swatches. Am I missing something?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top