---
title: "WooCommerce Variations Swatches for Elementor – based on Product Size, Colour, Brand etc [Video Tutorial]"
url: https://theplusaddons.com/docs/woocommerce-variations-swatches-elementor-based-product-size-colour-brand/
date: 2023-07-05
modified: 2026-04-11
author: "Aditya Sharma"
description: "https://www.youtube.com/watch?v=lcZwce3oY_w Video Duration: 15 : 10 Video Overview In this Elementor tutorial, we will add product variation swatches with WooCommerce Products Attributes - the Only WooCommerce store builder plugin you..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/maxresdefault-53-1024x576.jpg
word_count: 147
---

# WooCommerce Variations Swatches for Elementor – based on Product Size, Colour, Brand etc [Video Tutorial]

## Key Takeaways

- WooCommerce Variations Swatches for Elementor allows users to add product variation swatches based on attributes like color, size, and brand.
- The tutorial demonstrates creating product size attributes using buttons and color attributes using color swatches.
- The Plus Addons for Elementor provides a customizable single product page for WooCommerce.

https://www.youtube.com/watch?v=lcZwce3oY_w

#### Video Duration: 15 : 10

## Video Overview

In this Elementor tutorial, we will add product variation swatches with WooCommerce Products Attributes - the Only WooCommerce store builder plugin you will ever require for Elementor. We will be adding product color attributes, size attributes, length, pattern, and image attributes.

The possibilities are limitless, as you can combine any of these product variations on your website.

▶ LIVE Swatches Demo Website - [https://theplusaddons.com/elementor-builder/woocommerce-builder/#single-prodct](https://theplusaddons.com/elementor-builder/woocommerce-builder/#single-prodct)

▶ Check Complete WooBuilder from The Plus Addons for Elementor -

Visit:[ https://theplusaddons.com/elementor-builder/woocommerce-builder/](https://theplusaddons.com/elementor-builder/woocommerce-builder/)

Check our 100% Customizable Single Product Page for WooCommerce -[ https://youtu.be/y2KrybXgwV8](https://youtu.be/y2KrybXgwV8)

---

Time stamps

0:00 Introduction

01:11 Activating the Widgets for WooCommerce Swatches

02:41 Creating Product Size Attributes - Button

04:22 Creating Product Colour Attributes - Colour

05:26 Creating Product Brand Attributes - Image

06:56 Adding Variation to WooCommerce Products

10:32 Making Single Product Page with Theme Builder

## 15:00 End Notes

[Get The Plus Addons for Elementor](https://theplusaddons.com/pricing/)

[View 120+ Elementor Widgets Demo](https://theplusaddons.com/elementor-widgets/)

## Frequently Asked Questions

**Q: What should I do if my product variation swatches are not displaying correctly?**
A: If your product variation swatches are not displaying, first check if you have activated the widgets for WooCommerce swatches in The Plus Addons for Elementor. This is crucial as the plugin requires specific widgets to be enabled for the swatches to function properly. If they are activated and still not showing, ensure that your product attributes are correctly set up in WooCommerce.

**Q: What is the best way to create product color attributes for my WooCommerce store?**
A: To create product color attributes effectively, use the color swatch option in The Plus Addons for Elementor. This allows you to visually represent colors, making it easier for customers to choose. Ensure that you have defined the color attributes in your WooCommerce product settings before applying the swatches, as this is essential for them to display correctly.

**Q: How do I add variation to my WooCommerce products using The Plus Addons for Elementor?**
A: To add variations to your WooCommerce products, navigate to the product attributes section in your WooCommerce settings. From there, you can define the variations such as size, color, or brand. Once set up, use The Plus Addons for Elementor to apply the swatches to these attributes, enhancing the visual appeal and functionality of your product pages.

**Q: Does using variation swatches impact the loading speed of my WooCommerce site?**
A: Using variation swatches can have an impact on loading speed, especially if you have many variations and high-resolution images. It's important to optimize your images and limit the number of attributes displayed to maintain performance. Regularly check your site's speed and consider using caching solutions to mitigate any slowdowns caused by additional features.