FREE WooCommerce Variation Swatches Plugin – ShopLentor

What Are WooCommerce Variation Swatches?

WooCommerce variation swatches are visual selectors that replace the standard dropdown menus used to display product variations. Instead of forcing a customer to click a dropdown and scroll through a list of text options like ‘Red’, ‘Blue’, or ‘Medium’, swatches present those same choices as clickable color boxes, image thumbnails, or styled text buttons.

By default, WooCommerce does not include visual swatches — every variable product uses plain dropdown menus. While functional, these menus create friction in the buying journey and make it harder for shoppers to visualize what they are selecting. Variation swatches solve this problem elegantly.

The Problem with Default WooCommerce Dropdowns

Default WooCommerce dropdown menus for product attributes create several issues that hurt your conversion rate:

• Customers cannot see the actual color or pattern — they only read a label
• Dropdowns are notoriously difficult to use on mobile devices
• Long option lists become tedious to scroll through
• The lack of visual context leads to more purchase hesitation and return requests
• Customers often abandon product pages before making a selection

How Variation Swatches Solve These Problems

Variation swatches address all of these pain points by presenting product options visually. A shopper browsing a t-shirt can instantly see swatches for red, navy, and white rather than reading text. They can hover over an image swatch to preview a pattern. They can tap a large labeled button for their size on a mobile screen. The result is a faster, more confident buying decision.

Why Variation Swatches Matter for Your WooCommerce Store

The case for adding WooCommerce variation swatches to your store is backed by significant performance data. ShopLentor reports that stores using their variation swatches module see up to a 45% increase in add-to-cart rates and a 40% increase in product page engagement. These are not marginal gains — they represent a substantial uplift in revenue from the same amount of traffic.

The Conversion Rate Impact

The core reason swatches lift conversions is simple: they reduce decision fatigue and eliminate ambiguity. When a customer can see exactly what a product looks like in each color or pattern, they feel more confident clicking ‘Add to Cart’. Uncertainty is one of the top drivers of cart abandonment, and clear visual options address it directly.

Mobile Shopping Experience

More than 60% of e-commerce traffic now comes from mobile devices, where dropdown menus are genuinely painful to use. Small screens and touch interfaces were simply not designed for multi-step dropdown interactions. Touch-friendly swatch buttons, on the other hand, are easy to tap and provide immediate visual feedback, making the mobile shopping experience dramatically smoother.

Reducing Return Rates

When customers clearly see the color or material they are selecting before purchase, they are far less likely to be disappointed when the product arrives. Fewer surprises mean fewer returns, and fewer returns mean better profit margins and better seller ratings.

Showcasing Product Variety

Variation swatches also serve as a passive marketing tool. When your full range of colors and materials is displayed visually on the product page, customers naturally explore options they might not have considered otherwise. This increases the chances of upselling within a product’s own variation range.

Introducing ShopLentor: The Free Plugin for Variation Swatches

ShopLentor (also known as WooLentor) is a comprehensive WooCommerce builder and enhancement plugin with over 100,000 active installations and more than 5.3 million total downloads. It holds a 5-star average rating from over 221 verified reviews on WordPress.org, making it one of the most trusted WooCommerce plugins available.

The plugin is built by HasThemes, a team of over 51 professionals who specialize in WooCommerce, Elementor, and WordPress development. ShopLentor offers dozens of powerful modules for WooCommerce stores, and its Variation Swatches module is available completely free.

What Makes ShopLentor Stand Out?

While there are several WooCommerce variation swatch plugins available, ShopLentor offers a unique advantage: the variation swatches feature is part of a much broader plugin ecosystem. Instead of installing a dedicated swatch plugin, you get access to a full suite of conversion-boosting tools including product quick view, abandoned cart recovery, checkout customization, and much more — all from a single plugin. This approach reduces plugin bloat and improves overall site performance.

Free vs. Pro Features

The free version of ShopLentor includes the core variation swatches functionality, which is more than enough for most WooCommerce stores. The Pro version adds even more advanced features and deeper customization options. This guide focuses on the free version, which is downloadable directly from the WordPress plugin repository.

Types of Variation Swatches Available in ShopLentor

ShopLentor’s Variation Swatches module supports four distinct swatch types, giving you the flexibility to choose the most appropriate presentation for every product attribute in your catalog.

1. Color Variation Swatches

Color swatches display product color options as solid-colored circles, squares, or rounded rectangles. This is the most common swatch type and is ideal for any product sold in multiple colors — clothing, footwear, accessories, home goods, and more. Customers can instantly see all available colors and click to select their preference. When a color is out of stock, you can configure the swatch to show a cross, blur out, or hide entirely.

2. Image Variation Swatches

Image swatches allow you to assign a custom image to each product variation. This is particularly powerful for products with patterns, textures, or materials that cannot be communicated through a solid color. Think fabric swatches for upholstered furniture, wood grain options for flooring, or pattern previews for wallpaper. Image swatches provide a visually engaging shopping experience that goes beyond what traditional color swatches can offer, giving customers a true sense of what each variation looks like.

3. Label Variation Swatches

Label swatches replace dropdown text options with clearly styled button labels. This is the ideal choice for size attributes, material types, weight classes, or any other text-based variation where a color or image does not apply. Label swatches are cleaner, easier to scan, and more touch-friendly than dropdown menus. They organize the selection process in a way that feels intuitive and modern.

4. Tooltip Variation Swatches

Tooltip swatches add an informational hover layer to any swatch type. When a customer hovers over a swatch, a tooltip appears showing additional details about that option — such as the color name, size dimensions, or material description. This feature is especially useful for complex products where customers may need context beyond the visual preview. Tooltips empower shoppers to make more informed decisions without cluttering the product page with extra text.

Key Features of ShopLentor Variation Swatches

Beyond the four core swatch types, the ShopLentor Variation Swatches module includes a robust set of features that give you full control over how product options are displayed and behave on your store.

Automatic Attribute Conversion

One of the most time-saving features is automatic attribute conversion. Rather than manually reconfiguring every product in your catalog, you can enable intelligent detection that automatically converts existing WooCommerce attribute dropdowns into swatches. The module can detect attributes that already have images assigned and automatically convert them to image swatches — a significant time saver for stores with large catalogs.

Customizable Swatch Appearance

You have full control over how swatches look. This includes choosing between three shape styles:

• Squared — sharp corners for a clean, geometric look
• Rounded — softened corners for a modern, friendly aesthetic
• Circle — perfectly round swatches for a classic, elegant appearance

Beyond shape, you can adjust swatch size, border thickness, border color, and spacing to ensure every swatch fits seamlessly with your theme’s design language.

Attribute Behavior for Out-of-Stock Variations

Handling out-of-stock variations gracefully is critical for a professional shopping experience. ShopLentor gives you three options for how unavailable variations are displayed:

• Cross Sign — a diagonal cross overlays the swatch to clearly indicate it is unavailable
• Blur — the swatch becomes translucent and blurred to subtly indicate unavailability
• Hide — out-of-stock swatches are removed from view entirely to keep the selection clean

AJAX Variation Support

When a customer selects a variation swatch, the product page instantly updates with the correct price, stock status, and product image — all without reloading the page. This AJAX-powered behavior creates a fluid, app-like experience that keeps customers engaged and reduces the friction between browsing and buying.

Responsive, Mobile-Optimized Design

Every swatch rendered by ShopLentor is fully responsive and optimized for touch interaction. Swatches scale appropriately on smaller screens and are large enough to be tapped comfortably with a finger. The mobile experience is a first-class priority, not an afterthought.

Shop and Archive Page Integration

Variation swatches are not limited to individual product pages. You can enable them to appear directly on shop pages, category pages, and archive pages. This means customers can see color or size options while browsing and even add a product to their cart directly from the product grid — without ever visiting the product detail page.

How to Install ShopLentor on Your WordPress Site

Before you can enable variation swatches, you need to install the ShopLentor plugin. The process takes just a few minutes and requires no technical skills.

Method 1: Install from WordPress Dashboard

1. Log into your WordPress admin dashboard
2. Navigate to Plugins > Add New Plugin
3. In the search bar, type ‘ShopLentor’ or ‘WooLentor’
4. Find the ShopLentor – WooCommerce Builder plugin by HasThemes
5. Click Install Now, then Activate after installation completes

Method 2: Install from WordPress.org

You can also download the plugin ZIP file directly from the WordPress plugin repository (downloads.wordpress.org) and install it via Plugins > Add New > Upload Plugin in your dashboard.

Requirements

• WordPress 5.0 or higher
• WooCommerce 4.0 or higher (must be installed and active)
• PHP 7.4 or higher recommended
• A variable product with at least one attribute configured in WooCommerce

How to Set Up WooCommerce Variation Swatches (Step-by-Step)

Once ShopLentor is installed and activated, enabling the Variation Swatches module is straightforward. Follow these steps to get your first swatches up and running.

Step 1: Enable the Variation Swatches Module

6. From your WordPress dashboard, click on ShopLentor in the left sidebar
7. Navigate to Settings > Modules
8. Scroll through the module list to find ‘Variation Swatches’
9. Toggle the module ON to enable it
10. Click Save Settings to apply the change

Step 2: Configure Global Swatch Settings

After enabling the module, a settings panel for Variation Swatches will become available. Access it from the ShopLentor settings. Here you can configure global defaults that apply to all products:

• Choose whether to auto-convert attribute dropdowns to label swatches
• Enable or disable automatic image swatch conversion for attributes with images
• Set default swatch shape (squared, rounded, or circle)
• Define default swatch width and height in pixels
• Choose how to handle out-of-stock variations (cross, blur, or hide)
• Enable or disable tooltip display
• Toggle swatches on shop/archive pages on or off

Step 3: Assign Swatch Types to Individual Attributes

For fine-grained control, you can assign swatch types at the attribute level:

11. Go to Products > Attributes in your WordPress dashboard
12. Click Edit next to any attribute (e.g., Color, Size, Material)
13. In the attribute settings, select the Swatch Type (Color, Image, Label, or Select)
14. Save the attribute
15. Now edit individual terms within that attribute (e.g., the specific color ‘Red’) to assign a hex color code or image

Step 4: Verify Swatches on Your Product Pages

After completing configuration, visit any variable product page on your store’s front end. You should see your swatches displayed in place of the previous dropdown menus. Select different swatches and verify that the product image, price, and stock status update correctly via AJAX.

Step 5: Test on Mobile

Always test your swatches on a real mobile device or using your browser’s mobile emulation mode. Verify that swatches are large enough to tap comfortably and that the layout does not break on smaller screens. ShopLentor’s responsive design handles this automatically, but it is always good practice to verify.

How to Configure Swatch Appearance and Behavior

ShopLentor gives you detailed control over the visual presentation and interactive behavior of your swatches. Here is a deeper look at the key configuration options.

Swatch Size and Shape

The default swatch size works well for most themes, but you may want to increase or decrease the dimensions to fit your product page layout. Larger swatches (40px or more) are easier to read and tap, while smaller swatches (20-30px) are more compact and work well when a product has many variations. Choose the shape — squared, rounded, or circle — based on your brand’s overall aesthetic.

Border and Color Styling

You can customize the border color and thickness for swatches to ensure they stand out against your theme’s background. A subtle border in a neutral gray is usually sufficient, but you can also use your brand’s accent color for a more cohesive look. A highlighted border or ring effect on the selected swatch clearly indicates the customer’s active selection.

Tooltip Configuration

When tooltips are enabled, customers see a small popup when hovering over a swatch. You can configure whether the tooltip shows the variation name, a custom label, or an enlarged version of the swatch image. Tooltips add a professional polish to your product pages and help customers feel confident about their selections.

Out-of-Stock Behavior

The way you handle out-of-stock variations affects both user experience and purchase psychology. The Cross Sign option is the most transparent — it makes clear that a variation exists but is currently unavailable. This can actually create a sense of urgency and desire for the out-of-stock option. The Hide option results in a cleaner display but means customers do not know that additional variations exist or previously existed.

Displaying Swatches on Shop and Category Pages

One of the most powerful features in ShopLentor’s Variation Swatches module is the ability to display swatches directly on your WooCommerce shop and category (archive) pages. This feature changes the browsing experience fundamentally.

Why Shop Page Swatches Matter

When customers can see and interact with color or size options directly from the product grid, they do not need to click through to each individual product page to make a selection. This drastically reduces the number of steps between discovering a product and adding it to the cart. The result is a streamlined browsing experience that supports higher conversion rates and lower bounce rates.

How to Enable Shop Page Swatches

In the Variation Swatches module settings within ShopLentor, locate the option labeled ‘Show Swatches on Shop/Archive Page’ or similar. Enable this toggle and save your settings. Swatches will now appear beneath each product card in your category and shop page grids. You can typically configure how many swatches show before an overflow indicator appears.

Customizing the Shop Page Swatch Display

You can control several aspects of how swatches appear in the product grid:

• Maximum number of swatches shown per product card before a ‘+N more’ indicator appears
• Swatch size on archive pages (usually smaller than on product pages)
• Whether clicking a swatch on the shop page redirects to the product page or adds to cart directly

Best Practices and Pro Tips for Variation Swatches

Getting swatches set up is just the beginning. Follow these best practices to maximize their impact on your store’s performance.

Use High-Quality Images for Image Swatches

For image swatches, always use clear, well-lit photos that accurately represent the product variation. A blurry or poorly cropped swatch image is worse than a label because it creates confusion rather than clarity. Aim for consistent lighting and framing across all variation images for a polished, professional look.

Be Consistent with Swatch Types Per Attribute

Do not mix swatch types for the same type of attribute across different products. If you use color swatches for the ‘Color’ attribute on one product, use them on all products. Inconsistency in presentation makes your store feel unpolished and can confuse customers who browse multiple products.

Optimize for Mobile First

Always make swatch sizing decisions with mobile users in mind. A swatch that looks fine on a desktop monitor may be too small to tap comfortably on a phone. Aim for a minimum tappable area of 44×44 pixels, even if the visible swatch is slightly smaller, and test on multiple device sizes.

Use Tooltips for Complex Attributes

Tooltips are most valuable when the swatch alone does not tell the full story. For example, a fabric swatch for ‘Merino Wool’ benefits from a tooltip explaining the weight and texture. A size swatch button that simply reads ‘XL’ might benefit from a tooltip showing the measurement equivalents. Use tooltips selectively — not every attribute needs them.

Handle Out-of-Stock Gracefully

Rather than hiding out-of-stock variations completely, consider using the Cross Sign or Blur option. Showing that a popular color or size exists but is currently unavailable creates social proof (it must be popular if it is sold out) and may motivate customers to check back or sign up for a stock notification.

Test Your Swatches with Your Theme

Not all WooCommerce themes style variation elements identically. After enabling ShopLentor’s swatches, test thoroughly across your most important product pages on both desktop and mobile. Check that swatch colors render correctly, images load properly, and the AJAX price and image updates function as expected with your specific theme.

ShopLentor vs Other Variation Swatch Plugins

There are several variation swatch plugins available for WooCommerce. Here is how ShopLentor compares to the most commonly used alternatives.

The primary advantage ShopLentor holds over standalone swatch plugins is its all-in-one nature. You get variation swatches alongside dozens of other powerful WooCommerce features — product quick view, side mini cart, checkout field manager, abandoned cart recovery, and more — all without needing to install and maintain separate plugins for each feature.

Frequently Asked Questions

Will my existing WooCommerce product variations automatically convert to swatches?

Yes. ShopLentor’s Variation Swatches module includes automatic conversion options. You can configure the module to automatically convert attribute dropdowns to label swatches by default. For attributes that already have images assigned, the module can detect this and convert them to image swatches automatically. This means your existing product catalog benefits immediately without extensive manual configuration.

Can I use different swatch types for different attributes on the same product?

Absolutely. You can assign each attribute its own swatch type. For example, you might use color swatches for a ‘Color’ attribute and label swatches for a ‘Size’ attribute on the same product. This ensures each attribute is presented in the most intuitive format for shoppers.

Do WooCommerce variation swatches work on mobile devices?

Yes. ShopLentor’s variation swatches are fully responsive and mobile-optimized. They are particularly beneficial on mobile devices where traditional dropdown menus are cumbersome to use. Touch-friendly swatch buttons make product selection fast and easy on smartphones and tablets.

Can I show variation swatches on the WooCommerce shop and category pages?

Yes. You can enable swatches to appear directly on shop and archive pages, allowing customers to view and select variations without visiting the individual product page first. This reduces friction in the buying journey and can significantly improve conversion rates.

Will enabling variation swatches slow down my WooCommerce store?

No. ShopLentor’s Variation Swatches module uses optimized, lightweight code and asynchronous loading techniques. Even stores with hundreds of variable products can use this feature without measurable performance impact. ShopLentor is built with performance in mind across all its modules.

Is ShopLentor’s Variation Swatches module really free?

Yes, the core Variation Swatches functionality is available in the free version of ShopLentor, which you can download from the official WordPress plugin repository at no cost. A Pro version with additional advanced features is available for purchase, but it is not required to implement effective variation swatches on your store.

What happens to out-of-stock variations?

ShopLentor gives you three options for handling out-of-stock variations: you can display a cross sign over the swatch, blur the swatch to indicate unavailability, or hide the swatch entirely. You choose the approach that best fits your store’s user experience goals.

Do I need Elementor to use ShopLentor’s Variation Swatches?

No. While ShopLentor integrates deeply with Elementor and offers many Elementor-specific widgets, the Variation Swatches module works independently of any page builder. It works with any WooCommerce-compatible WordPress theme.

Conclusion

WooCommerce variation swatches are no longer a luxury reserved for premium plugin budgets — they are a free, accessible upgrade that every WooCommerce store should implement. The evidence is clear: visual product options reduce decision fatigue, improve the mobile shopping experience, boost add-to-cart rates, and create a more professional storefront that earns customer trust.

ShopLentor makes the entire process effortless. With support for color, image, label, and tooltip swatch types, automatic attribute conversion, AJAX-powered updates, shop page integration, and granular customization for shapes and behaviors, the free ShopLentor Variation Swatches module gives you everything you need to transform your product pages without spending a cent.

If you have a WooCommerce store selling variable products and you are not yet using variation swatches, today is the day to change that. Install ShopLentor, enable the Variation Swatches module, and watch the difference it makes to your product page engagement and conversion rates. Your customers — and your bottom line — will thank you.