Tired of your WooCommerce product pages showing boring dropdown menus for colors, sizes, and styles? Your customers are probably tired of them too. When shoppers have to click open a dropdown just to see what variations are available, you’re adding unnecessary friction to the buying process — and friction kills conversions. The good news is you can fix this for free. With the ShopLentor plugin, you can replace those clunky dropdowns with beautiful visual swatches — clickable color circles, image thumbnails, and styled text buttons — without touching a single line of code. This step-by-step tutorial covers everything: what variation swatches are, why they matter for your store, how to install and configure ShopLentor’s free variation swatches module, and how to set up color, image, and label swatches on your WooCommerce products. Whether you’re running a clothing store, a beauty brand, or any shop with variable products, this guide will help you give your customers a much better shopping experience.
Watch step by step video tutorial: https://youtu.be/kCTS76R7Aa0
💬 Prashant’s Note
When I first set up variation swatches for a clothing boutique client in the UK, she could not believe how simple the change was — we swapped out dropdowns for color swatches in under 20 minutes and she saw an immediate improvement in how customers were engaging with her product pages. I always recommend ShopLentor to my WooCommerce clients because it plays nicely with Elementor, which is my go-to page builder, and the free version gives you everything you need to get started without spending a rupee. The setup looks more complex than it actually is, so let me walk you through it exactly as I do it for clients.
Table of Contents
What Are WooCommerce Variation Swatches?
By default, WooCommerce shows your product variations — things like color, size, or material — inside plain dropdown menus. Customers have to click the dropdown, scroll through a list of text options, and guess what they’re picking. It’s not a great experience, especially on mobile. Variation swatches solve this problem by replacing those dropdowns with visual, interactive selectors. Instead of a text dropdown, your customers see: – Color swatches — clickable color circles or squares that show the actual shade – Image swatches — small product thumbnails that change the main product photo when selected – Label/button swatches — styled text buttons (like S, M, L, XL for sizes) that are easy to tap on any device The result is a product page that looks polished, is easier to use, and does a much better job of showing customers exactly what they’re about to buy.
Why Your Store Needs Variation Swatches
This is not just a cosmetic change — it is a conversion change. When customers can see product options clearly, they make decisions faster and with more confidence. Research consistently shows that visual swatches have a measurable impact on eCommerce performance. Here is why variation swatches matter for your WooCommerce store: – Better product visualization — customers immediately see what colors and styles are available without any extra clicks – Faster purchase decisions — visual cues reduce thinking load so shoppers choose faster when they can see, not just read – Higher conversion rates — less friction at the product selection stage means fewer abandoned carts – Improved mobile experience — swatches are touch-friendly and far easier to use on phones than dropdown menus – More professional appearance — swatches make even a simple store look like a premium brand If you are selling any product that comes in multiple colors, sizes, styles, or materials, variation swatches are one of the easiest wins you can add to your store today.
What Is ShopLentor and Why Use It?
ShopLentor (also known as WooLentor) is an all-in-one WooCommerce addon plugin built specifically for Elementor users. It is developed by HasThemes and is one of the most actively maintained WooCommerce builder plugins in the WordPress ecosystem. Beyond variation swatches, it includes features like abandoned cart recovery, wishlist, product compare, AJAX product filters, quick view, a Shopify-style checkout, flash sale countdowns, and much more — all built into a single plugin. The reason I recommend ShopLentor specifically for variation swatches is that it integrates seamlessly with Elementor, which is the page builder I use on almost every client site. If you are already running ShopLentor or planning to use Elementor for your WooCommerce store, adding variation swatches is literally just turning on a module — no extra plugin needed. One thing to know upfront: the variation swatches feature is a module inside ShopLentor, not a standalone plugin. This means you install the full ShopLentor plugin and then enable the swatches module. If all you need is swatches and nothing else, you may want to weigh this against a more focused standalone swatches plugin. But for anyone building a WooCommerce store with Elementor, ShopLentor is a natural fit.
ShopLentor Free vs Pro: What You Get
Before you dive in, it helps to know what is available for free and what requires the Pro upgrade. The free version of ShopLentor includes: – Basic variation swatches (color, image, and label types) – Core WooCommerce widgets and builder elements – Basic customization options for swatch appearance – Full Elementor compatibility – Access to additional modules like wishlist and product compare The Pro version adds: – Advanced swatch styles and shapes – More WooCommerce modules and custom templates – Advanced product features like an enhanced quick view and wishlist – Priority customer support For most small business WooCommerce stores — clothing boutiques, handmade product shops, salons selling retail products — the free version is more than enough to get great-looking variation swatches live on your site.
How to Install ShopLentor and Enable the Variation Swatches Module
Getting ShopLentor installed is the same as any other WordPress plugin. Here is how to do it: – Go to your WordPress dashboard and navigate to Plugins > Add New – Search for “ShopLentor” or “WooLentor” in the plugin search bar – Click Install Now on the ShopLentor – WooCommerce Builder for Elementor & Gutenberg plugin – Once installed, click Activate Now that the plugin is active, you need to enable the Variation Swatches module: – In your WordPress dashboard, go to WooLentor (or ShopLentor) > Settings – Click on the Modules tab – Find the Variation Swatches module in the list – Toggle it ON and click Save Changes That is it — the swatches module is now active on your site. The next steps are to configure how the swatches look globally, then set up your product attributes.
How to Configure Global Swatch Settings
Global settings control how swatches look and behave across all your products by default. You can always override these settings on individual products later, but getting the global settings right saves you a lot of time. To access the global settings: – Go to WooLentor > Settings > Modules > Variation Swatches (click the settings icon next to the module) Key settings to configure here: – Auto Convert Dropdowns To Label — turn this ON to automatically convert all existing WooCommerce attribute dropdowns into label/button swatches. This is a great starting point if you have lots of existing products – Auto Convert Dropdowns To Image — turn this ON to automatically convert any attribute that already has a variation image set into an image swatch – Swatch Width and Height — set the size of your swatches to match your store’s design – Tooltip Width — controls how wide the tooltip popup is when customers hover over a swatch – Swatch Image as Tooltip — enable this so that when a customer hovers over an image swatch, a larger version of that image pops up as a tooltip – Shape Style — choose between Squared, Rounded, or Circle shapes for your swatches – Show Selected Variation Name — turns on a label that shows customers which swatch they have currently selected Once you are happy with the global settings, save your changes. These will apply across your whole store.
How to Create Color Attributes in WooCommerce
Before you can show color swatches on a product, you need to create color attributes in WooCommerce and assign a color value to each one. Here is the process: – Go to Products > Attributes in your WordPress dashboard – Create a new attribute — give it a name like “Color” and click Add attribute – Once the attribute is created, click Configure terms next to it – On the attribute terms page, add each color as a term. For example, add “Red”, “Blue”, “Black”, and so on – When you add or edit a term, you will now see a Color option (added by ShopLentor) — click it and use the color picker to assign the actual hex color to that term – Save each term after setting its color This is the step that most people find a little confusing the first time. The key thing to remember is that you are not just creating text values — you are also telling ShopLentor what color to display for each attribute term. Once this is done, any product that uses this attribute will automatically show color swatches instead of a dropdown.
How to Set Up a Variable Product with Swatches
Once your color (or other) attributes are set up, you can assign them to a product and create variations. Here is the step-by-step: – Go to Products > Add New (or edit an existing product) – In the Product Data section, change the product type to Variable product – Click on the Attributes tab – Select your Color attribute (or any other attribute you created) from the dropdown and click Add – Check the Used for variations box, then click Save attributes – Click on the Variations tab – Click Generate variations (this creates all possible combinations) – For each variation, set a price, stock status, and optionally a variation image — this is the image that will display when a customer selects that swatch – Click Save changes When you preview the product on the front end, the dropdowns will now be replaced by the swatches you configured. If you set variation images, clicking on a swatch will automatically update the main product image — which looks fantastic and makes it much easier for customers to visualize what they are buying.
How to Add Image Swatches and Label Swatches
Color swatches are the most common use case, but ShopLentor also supports image swatches and label/button swatches — and each type has its own ideal use case.
Image Swatches
Image swatches are perfect when you want to show a small thumbnail of the actual product variation — for example, a fabric pattern, a print design, or a material texture. To set up image swatches, follow the same attribute creation steps above, but when editing each attribute term, upload an image instead of selecting a color. ShopLentor will then display those uploaded images as clickable swatches on your product page. You can also enable the Swatch Image as Tooltip option in global settings so hovering over the swatch shows a larger version of the image.
Label/Button Swatches
Label swatches replace the dropdown with styled, clickable text buttons — perfect for sizes (XS, S, M, L, XL), materials, or any attribute that does not have a visual representation. ShopLentor’s label swatch type replaces the text attribute with a clear, easy-to-read button that customers can tap or click. You can also enable the Auto Convert Dropdowns To Label setting in the global options to automatically convert any existing dropdown attribute into a label swatch without having to edit each product one by one. This is a huge time-saver if you have a large product catalog.
Best Practices for Using Variation Swatches
After setting up variation swatches on dozens of WooCommerce stores, here are the tips that make the biggest difference: – Always set variation images — when a customer clicks a color or image swatch, the main product photo should change to match. This single feature dramatically improves the shopping experience and reduces returns because customers know exactly what they are getting – Enable tooltips — turn on tooltips in your global settings so customers can hover over a swatch and get more information about that variation, like the material name or exact color description – Manage out-of-stock swatches — use the stock management options to visually indicate unavailable variations rather than hiding them completely. Showing a crossed-out or blurred swatch lets customers know the option exists but is temporarily out of stock, which can reduce frustration – Test on mobile — make sure your swatches look good and are easy to tap on phones. Since a large portion of online shoppers browse on mobile, your swatches need to be responsive and touch-friendly – Keep your plugin updated — WooCommerce releases updates regularly and an outdated plugin can cause compatibility issues. Check for ShopLentor updates whenever you update WooCommerce itself – Use consistent swatch shapes across your store — pick one shape (circle, rounded, or square) and stick with it. Mixing shapes across different product pages looks messy and unprofessional
Frequently Asked Questions
What is a WooCommerce variation swatches plugin?
A WooCommerce variation swatches plugin replaces the default dropdown menus for product attributes (like color, size, or material) with visual, clickable selectors such as color circles, image thumbnails, or styled text buttons. This makes it easier for customers to see and select product variations, which can improve the shopping experience and increase conversion rates.
Is ShopLentor free to use for variation swatches?
Yes, ShopLentor offers a free version that includes the variation swatches module with support for color, image, and label swatches, along with basic customization options and Elementor compatibility. The Pro version adds advanced swatch styles, more WooCommerce modules, and priority support, but the free version is sufficient for most small business WooCommerce stores.
Do WooCommerce variation swatches work on mobile?
Yes, ShopLentor’s variation swatches are fully mobile-responsive and touch-optimized. In fact, swatches are particularly beneficial on mobile devices because traditional WooCommerce dropdown menus are small and difficult to use on a touchscreen, while swatches are large, tappable, and much easier to interact with.
Will ShopLentor’s variation swatches work with my Elementor theme?
Yes, ShopLentor is built specifically with Elementor compatibility in mind and works with virtually any WooCommerce-enabled Elementor theme. It is part of the broader WooLentor ecosystem, which is designed to be an Elementor-friendly WooCommerce toolkit. Always test on a staging site first to confirm compatibility with your specific theme.
Can I use different swatch types for different product attributes?
Absolutely. ShopLentor lets you set each attribute to use a different swatch type — for example, you can show color swatches for the Color attribute, image swatches for the Print attribute, and label buttons for the Size attribute, all on the same product. This flexibility means each variation type is displayed in the most intuitive and visually appropriate way.
Do I need to know how to code to set up variation swatches in WooCommerce?
No coding is required. ShopLentor’s variation swatches module is designed to be configured entirely through the WordPress dashboard with a point-and-click interface. You set up your attributes, assign colors or images to each term, enable the module, and the swatches appear automatically on your product pages.
What happens to out-of-stock variation swatches?
ShopLentor gives you control over how out-of-stock variations are displayed. You can choose to visually mark them as unavailable (for example, with a crossed-out or blurred style) rather than hiding them completely. This lets customers see that a variation exists and may become available again, which is better for the shopping experience than simply making it disappear.
Final Thoughts
That is the full walkthrough for setting up free WooCommerce variation swatches using ShopLentor — from installing the plugin all the way to configuring color, image, and label swatches on your products. It is one of those changes that takes less than an hour to set up but makes a real, visible difference to how professional your store looks and how easy it is for customers to shop. If you are more of a visual learner, make sure to watch my full YouTube video tutorial where I walk through every single step on screen — link is right at the top of this page. Got a question or ran into something confusing along the way? Drop it in the comments below and I will do my best to help. And if you would rather have someone set this up on your WooCommerce store for you, feel free to reach out to me directly through paramfreelance.com — I am always happy to help local businesses get their online stores looking great.
