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

May 20, 2014

—

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.

Introduction

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.

[/box]

Comments

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

Jordan Keats

May 21, 2014

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!

JK

Reply
1. Jamie Marsland
  
  May 22, 2014
  
  Great glad it was useful!. Thank you very much for taking the time to comment Jordan 🙂
  
  Jamie
  
  Reply
Matt

June 15, 2014

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.

Reply
Deepen

August 11, 2014

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?

Reply
AndyLockhart

October 22, 2016

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.

Reply
Heidi

February 16, 2017

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?

Reply