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

Updated onApril 11, 2026By

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.
Table Of Content
YouTube video

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

▶ Check Complete WooBuilder from The Plus Addons for Elementor –

Visit: https://theplusaddons.com/elementor-builder/woocommerce-builder/

Check our 100% Customizable Single Product Page for WooCommerce – 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
View 120+ Elementor Widgets Demo

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my product variation swatches are not displaying correctly?

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.

What is the best way to create product color attributes for my WooCommerce store?

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.

How do I add variation to my WooCommerce products using The Plus Addons for Elementor?

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.

Does using variation swatches impact the loading speed of my WooCommerce site?

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.

Last reviewed: April 11, 2026

Related Docs