WooCommerce Variation Swatches and Photos
In this tutorial, learn how to set up Variation Swatches and Photos in WooCommerce on your WooCommerce store.
The WooCommerce Variation Swatches and Photos plugin allows you to show colors and photos as an alternative to dropdowns for variations of variable products.
Once you’ve read this article about the WooCommerce Variation Swatches and Photos plugin you’ll understand just how beneficial it can be for any apparel company looking to properly display their color options!
Instead of adding in generic plaids or stripes you’ll be able to update your swatches with the exact fabric that your customer will be ordering.
Ready to learn how this useful WooCommerce plugin works? Let’s get started.
Table of Contents
Step 1: Purchasing & Installing the WooCommerce Variation Swatches and Photos plugin
The first step is Purchasing and Installing the WooCommerce Variation Swatches and Photos plugin which you can do by navigating to your WooCommerce dashboard.
Once on your WooCommerce dashboard, click on the Plugins tab located on the left half of your screen and select Add New. See the screenshot below for quick reference.
Once you’ve clicked on Add New you’ll want to click on Upload Plugin and choose your downloaded WooCommerce Variation Swatches and Photos plugin.
After you’ve clicked Install Now, you’ll be taken to a screen where you’ll see a button labeled Activate Plugin, see the photo below for visual reference.
Step 2: Selecting Swatches
In the Tutorial Video I will walk you through the appearance of your WooCommerce store before and after the installation of the WooCommerce Variation Swatches and Photos plugin.
Below you can see what your store may look like before you’ve installed and activated the plugin. For this example we’ll be looking at a basic Hoodie.
As you can see the colors only show up as text in the dropdown menu. In order to activate the Swatches function we will need to go back to our WooCommerce Dashboard.
Once on the WooCommerce Dashboard, click on Products along the left hand side of your screen and select Attributes.
Once you’re on the Attributes tab, your screen should look similar to the screenshot below:
The next step is to click on the word Color and then on Configure Terms, indicated in the above screenshot. You won’t need to click on Edit Color for this tutorial.
Once you’re on the Configure Terms screen you’ll see that it’s time to individually set up your color swatches. In the video and screenshot below you can see that I’ve selected to use the color Blue as an example.
Once you’ve clicked on Edit, navigate past the Name, Slug and Description boxes to the Swatch Type selector.
Once you selected Color Swatch, enter your HEX value that corresponds to the correct color. In our case the HEX value for Blue was #040585.
This same process applies to each different color which I demonstrate in the video tutorial.
When it comes time to choose a Swatch Type for a pattern such as Camo or Plaid, selecting the Swatch Type Photo may be beneficial.
When you select the Swatch Type option Photo instead of Color Swatch the plugin will give you the option to upload your own image to better illustrate clothing color or design.
In order to double check everything on the backend of the product, go back to your WooCommerce Dashboard and click on Products then Swatches and then Color. You do not need to edit Attributes or Variations because these settings will be autofilled from your previous selections
Below you can see the settings that you’ll want to make sure every color is set to. The most important one here is Type, where you’ll want to select Taxonomy Colors and Images.
After making all of these changes be sure to click Update!
Step 3: Realizing the Benefits of this plugin for WooCommerce
Below you can see the after photo which shows all of the color swatch as well as the color labels:
Your WooCommerce store is now set up with the WooCommerce Variation Swatches and Photos plugin!
If you are more of a visual learner head on over to our YouTube Channel where you can view the tutorial video that goes along with this article.