---
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
lang: en
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]

## 

- Adds product variation swatches using WooCommerce Products Attributes in Elementor.
- Creates product attributes for size, color, brand, and more with The Plus Addons for Elementor.
- Demonstrates a customizable single product page using WooCommerce and Elementor's Theme Builder.

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/)