How to Add Variation Photos and Swatches to WooCommerce

Variable products are a crucial opportunity for many WooCoomerce sites to increase sales of specific product lines. But the options offered in the default WooCommerce setup are an uninspiring combination of a couple of basic dropdowns on single product pages and simple words with checkboxes when filtering. 

Not only does this offer a less than impressive customer experience, but it hurts conversion rates. Fortunately, there’s an easy way to enhance variable product attributes to give customers more reasons to buy your products. By adding photo and variation swatches to your WooCommerce store.  

So, by the end of this article, you’ll know exactly how to add variation photos and swatches to your WooCommerce store. The best part? You’ll be able to do it in 2 steps with the swatch plugin, WooCommerce Attribute Swatches.  

woocommerce-swatches-for-variations

How WooCommerce Attribute Swatches Work 

With WooCommerce Attribute Swatches installed, you, as the store owner, will be able to: 

  • Display color swatches for your product options.
  • Add image swatches to show fabric types or details.
  • Add text or radio buttons customers can select.

You’ll also be able to set prices based on specific product options. For instance, a picture frame with glass can be priced higher than the default frame with perspex. 

total

Better yet, you can also display your product attribute swatches on both product-category and product-filtered pages, maintaining consistency across your store. 

From the customer’s perspective, while products will be displayed as expected, they will now be accompanied by swatches. 

Clicking through the swatch options will also display the corresponding variation photo. Should they like what they see, they can immediately click through to the product page with those pre-selected options.

select attribute

Additionally, customers can filter products on category pages in a much more visually appealing way. For example, customers will be able to filter results to show only black clothes. This is a crucial feature for fashion retailers since customers are often looking to color coordinate their outfits or ‘looks’. 

filter swatch

How to add photo swatches to your variations in WooCommerce

With the benefits of adding WooCommerce photo and variation swatches covered, it’s time to walk you through the steps of getting them set up on your WooCommerce store. The great news is it only takes a few minutes with the help of WooCommerce Attribute Swatches. 

Step 1: Install WooCommerce Attribute Swatches

To get started, you need to purchase WooCommerce Attribute Swatches from the Iconic store.

Once the purchase is complete, you need to take the following steps:

  1. Go to Plugins > Add New > Upload Plugin.
  2. Choose the zip file you downloaded, upload it, and then click Activate.
  3. Once activated, you’ll need to enter your license key.

Now you’ve successfully installed WooCommerce Attribute Swatches, we can move onto adding your photo swatches.  

Step 2: Add your photo swatches

You first need to create product attributes to customize how they appear in your WooCommerce store. Once they are set up, you can use WooCommerce Attribute Swatches to add and customize your swatches. In this example, we will use photo swatches, but the process is the same for other visual swatch types, such as color.

To set up image swatches for your variable products, follow these steps:

  1. Navigate to Products > Attributes. (If you already have an attribute to use, click Edit on the relevant attribute and skip to step 4.) 
  2. Enter your attribute name into the Name field.
attributes
  1. Choose Select as your Type. This will tell WooCommerce that this attribute is specifically for variable product options.
  2. Now you can select your Swatch Type. In this case, you are going to choose the Image Swatch option. 
  3. Upon selecting an Image Swatch, you will note that there are two further configuration options, which are as follows: 
    1. Swatch Shape
      Select whether you want these swatches to be displayed Round or Square.
    2. Enable Tooltips?
      Select Yes if you’d like the attribute label to be displayed on hover.
display swatch
  1. Once you’ve made your selection, there is one final configuration option:
    1. Show Swatch in Catalog? 

Select Yes if you’d like available swatches to be displayed in the catalog listing for each product. They will also click through to the product page with those options auto-selected.

  1. Click Add Attribute or Update to finish. 

Because you have chosen a visual swatch type (photo/image), you need to finish the process by adding the photo associated with the attribute terms created above. 

To do this, simply take the following steps:

  1. From the attribute list, click on the Attribute Name or the Configure Terms icon. 
  1. Enter your attribute term name into the Name field.
  2. Now add/upload an Image Swatch using the “+” icon.
  3. Click Add New [attribute] or Update.

Add Variation Photos and Swatches to your WooCommerce store

That’s it! You’ve just learned how to add WooCommerce photo and variation swatches to your store. Now when customers browse through your products, they will be met with far more visually appealing representations of your variable products.  

To add photo, color, or text swatches to your WooCommerce products, get your copy of the WooCommerce Attribute Swatches today.