Swatchly – Product Variation Swatches for WooCommerce

Are you getting frustrated with WooCommerce’s current way of presenting the product attributes for your products? Well, This plugin allows you to turn the WooCommerce product variation’s select options into more user-friendly swatches. Such as color swatch, button swatch & image swatch. That means you no longer need to rely on the default dropdown options when it comes to selecting product variations. With the help of this plugin, the customers will have the opportunity to observe the products they need more visually than the default dropdown options shown in WooCommerce.

This plugin is designed for store owners who want their customers to find what they’re searching for quickly. Replace dropdown selections with visual swatches for better user experience.

👉 Live Demo | Documentation | Purchase Pro | Support 👈

🏆 Main Features:

1. Enable Swatches for Shop / Product List / Product details pages
2. 3 different Swatch types (label, color, image, radio[pro])
3. Supports multi-colored Swatch
4. 3 different Swatch Shapes Style (Squared, Rounded, Circle)
5. Swatches Alignment (Left, Center, Right)
6. Auto convert variation dropdowns to label/button type Swatch
7. Set Swatch width, height & font size
8. Define global settings for single product / product list page separately
9. Override Swatch settings for each product individually
10. Option to reset individual product swatch settings into default
11. Disabled Attribute Type (Cross Sign, Blur with Cross, Blur Only, Hide)
12. Enable/Disable tooltip
13. 2 different tooltip types (text, image)
14. Option to change tooltip image size
15. Option to change default Ajax variation threshold
16. Option to generate URL based on selected variation attributes.
17. Swatch Preview Column for Admin
18. Enable/Disable Shape inset
19. Shape Inset size
20. Deselect On Click
21. Show selected option name on single product page
22. Set image size for image type swatches
23. Variation Label Separator
24. Responsive for mobile device
25. Shortcode support
26. Support Quick View
27. Ordering support for the swatches

🏆Shop Page Features

1. Enable/Disable Swatches for Shop page
2. Control Swatches Position (Before Title, After Title, Before Price, After Price, Before Cart, After Cart)
3. Swatches can be positioned into a custom hook
4. Shortcode support
5. Product Thumbnail Selector
6. Enable Ajax Add to Cart button for shop page
7. Show/Hide Clear Link for shop page
8. Show/Hide Swatches label for shop page

🏆Premium Features

1. Auto convert variation dropdowns to image Swatch
2. Auto convert variation dropdowns to image Swatch for individual product
3. Disable showing Out of Stock variation from Swatch items
4. Option to select an attribute as a special/featured attribute
5. Enable catalog mode, both (global / custom) attribute support
6. Ajax Add to Cart feature for Shop page
7. Custom Add to Cart Text
8. Enable/Disable Swatch Limit for shop page
9. Number of Swatch to Show
10. Option to add PHP condition to enable/disable swatches for the product listing pages

🏆Quick View Support

1. ShopLentor
2. WPC Smart Quick View for WooCommerce
3. WPB Product Quick View Popup for WooCommerce
4. QuickSwish
5. Quick View for WooCommerce
6. QODE Quick View for WooCommerce
7. CSSIgniter Quick View for WooCommerce
8. Addonify – Quick View For WooCommerce
9. Direct Checkout | Quick View | Buy Now For WooCommerce
10. Merchant
11. Premium Quick View by CodeAstrology
12. Quick View WooCommerce
13. Woo Quick View
14. YITH WooCommerce Quick View

👉 Purchase Swatchly Pro

Video Tutorial:

How to Configure Swatches For Variable Products

🚀 Key Feature Comes with Swatchly – Variation Swatches For WooCommerce Plugin 🚀

🏆 Enable Swatches for Shop / Product List / Product details pages

Enable swatches for shop, product list, and product detail pages. This plugin allows you to add color, image, and label swatches to your WooCommerce variations. It is fully compatible with WooCommerce and works well for stores that sell products with multiple variations.

👉 Shop Demo | Product Details | Documentation

🏆 Auto convert variation dropdowns to label/button type Swatch

Automatically convert WooCommerce product variation dropdowns to label/button type swatches. The plugin offers a variety of customization options to match your product and brand. You can improve the look of your product variations with more control over how they’re displayed.

👉 Documentation

🏆 Allow color swatches for Variable product attribute variations.

Add color swatches to your WooCommerce product attributes to show colors for each attribute value. For example, if you have a product with different color variations, you can display the colors in a user-friendly way. Color swatches provide an alternative to the traditional dropdown menu and help to visually differentiate your products.

👉 Live Demo | Documentation

🏆 Enable Image Swatches For Variable Product Attribute Variations

Display image swatches for variable product attributes. This makes it easy for customers to see what each variation looks like. The plugin is easy to use and customize to match the look and feel of your site.

👉 Live Demo | Documentation

🏆 3 different Swatch types (label, color, image)

This plugin offers 3 different types of swatches: label swatches, color swatches, and image swatches. Label swatches are text-based labels for products with multiple variations, such as size or color. Color swatches display a color chip for each variation. Image swatches display thumbnail images of each variation, allowing customers to see a preview of what they’re buying.

👉 Live Demo | Documentation

🏆 Supports multi-colored Swatch

Create swatches with multiple colors. This feature allows WooCommerce sites to offer products in different color combinations.

👉 Live Demo | Documentation

🏆 3 different Swatch Shapes Style (Squared, Rounded, Circle)

Choose from 3 different swatch shape styles: squared, rounded, or circular. Select the style that matches your site’s design aesthetic.

👉 Live Demo | Documentation

🏆 Swatches Alignment (Left, Center, Right)

Align swatches to the left, center, or right. You can also change the color and size of swatches to match your store’s appearance.

👉 Documentation

🏆 Set Swatch width, height & font size

You will be able to set the width, height, and font size of the swatches from the backend.

🏆 Define global settings for a single product/product list page separately

The plugin comes with the feature to define global settings for the single product or product list pages separately. WooCommerce Variation Swatches is a plugin that allows you to define global settings for the single product or product list pages separately. The plugin comes with an extensive WooCommerce customization panel which allows you to manage products, variations, attributes, and categories. WooCommerce Variation Swatches also allow you to assign color, image, or label swatches to your products. As a result, you can provide customers with a better shopping experience by helping them quickly identify the products they are looking for. WooCommerce Variation Swatches is an essential tool for any WooCommerce store owner who wants to provide their customers with a seamless shopping experience.

🏆 Override Swatch settings for each product individually

The plugin also allows you to override the swatch settings for each product individually. The WooCommerce Variation Swatches plugin gives you the ability to override the swatch settings for each product individually. This means that you can choose which swatches are displayed for each product, and change the order in which they are displayed. You can also choose to display swatches on the product page or not. This flexibility allows you to customize the look of your store to match your products.

🏆 Option to reset individual product swatch settings into default

Reset individual product swatch settings to default. This is useful when you have many products with different customizations. You can create product variations with color swatches, image swatches, and label swatches to improve your store’s usability and customer experience.

🏆 Disabled Attribute Type (Cross Sign, Blur with Cross, Blur Only, Hide)

The plugin allows you to show disabled attribute types.

🏆 Enable/Disable tooltip

The plugin comes with an option to enable or disable the tooltip.

🏆 Tooltip Type (Info, Text, Image)

There are 3 types of tooltips available. They are Info, Text, and Image.

👉 Live Demo | Documentation

🏆 Tooltip Position (Top Right, Top Center, Top Left, Bottom Right, Bottom Center, Bottom Left)

The plugin offers 6 different tooltip positions. They are top right, top center, top left, bottom right, bottom center, and bottom left. You can find this option under Swatchly → Settings.

🏆 Allow customers to purchase variable products without selecting any attributes

The plugin comes with an option to allow customers to purchase variable products without selecting any attributes. ==

🏆 Option to show/hide selected attribute label on the frontend

The plugin has an option to show or hide the selected attribute label on the front end. ==

🏆 Variation URL

Generate a URL dynamically based on the attributes selected for variations.

🏆 Import/Export

It comes with an import/export feature for the plugin’s global settings.

🏆 Design options for Swatch

1. Swatch Text Color
2. Swatch Text Font Size
3. Swatch Text Line Height
4. Swatch Background Color
5. Swatch Border Size
6. Swatch Border Color
7. Swatch Border Type
8. Swatch Item Margin
9. Swatch Item Padding
10. Swatches Wrapper Margin
11. Swatches Wrapper Padding

🏆 Design options for Tooltip

1. Tooltip Width
2. Tooltip Maximum Width
3. Tooltip Background Color
4. Tooltip Border Size
5. Tooltip Border Color
6. Tooltip Border Type
7. Tooltip Spacing
8. Tooltip Text Color
9. Tooltip Text Font Size
10. Tooltip Text Line Height
11. Tooltip Text Padding
12. Tooltip Arrow Color
13. Tooltip Arrow Size
14. Tooltip Arrow Spacing
15. Tooltip Image Border Size
16. Tooltip Image Border Color

Need Help?

Is there any feature that you want to get in this plugin?
Needs assistance to use this plugin?
Feel free to Contact us

This section describes how to install the “Swatchly” plugin and get it working.

1) Install

i. Go to the WordPress Dashboard “Add New Plugin” section.

ii. Search For “Swatchly”.

iii. Install, then Activate it.

OR:

i. Unzip (if it is zipped) and Upload swatchly folder to the /wp-content/plugins/ directory

ii. Activate the plugin through the ‘Plugins’ menu in WordPress

2) Configure

i. After install and activate the plugin you will get a notice to install WooCommerce Plugin ( If already have it then do not show any notice. ).

ii. A new menu called “Swatchly” will be appear in your dashboard below the “Products” menu

iv. Use the options & configure as your need and that’s all!

1. 

   Quickly Navigate to the Settings page of the plugin

2. 

   General settings global

3. 

   Color, Label & image types swatches are showing on the product details page

4. 

   The swatched are showing for the Shop/Product details page

5. 

   General settings for product details page

6. 

   General settings for shop page

7. 

   Product list.png

8. 

   Design for swatch

9. 

   Design for tooltip

10. 

    Design for tooltip text

11. 

    Design for tooltip arrow

12. 

    Design for tooltip image

13. 

    Other settings

14. 

    Color type attribute options

15. 

    Image type attribute options

16. 

    Product level options 1

17. 

    Color type swatch options product level

18. 

    Image type swatch options product level

Version: 1.4.8 – Date: 13 November 2025

• Fixed: Minor issue with notice manager.

Version: 1.4.7 – Date: 27 October 2025

• Fixed: Swatches not working properly on mobile devices.

Version: 1.4.6 -Date: 22 October 2025

• Improved: Accessibility support for swatches.
• Improved: Screen reader experience with more descriptive labels.
• Tested: Compatibility with WooCommerce latest version.

Version: 1.4.5 -Date: 28 July 2025

• Added: Recently Viewed Variations feature to auto select the variations based on the user’s previous selection.

Version: 1.4.4 -Date: 13 July 2025

• Fixed: Issue where the color and image attributes were not being saved.

Version: 1.4.3 -Date: 19 June 2025

• Fixed: Translation issue in multiple areas.

Version: 1.4.2 -Date: 16 April 2025

• Tested: Compatibility with the latest version of WordPress.

Version: 1.4.1 -Date: 10 April 2025

• Updated: User permission checks for better role-based access control in AJAX handling.

Version: 1.4.0 -Date: 29 January 2025

• Fixed: Issue with multiple initialization of Swatchly on product page.

Version: 1.3.9 -Date: 03 December 2024

• Fixed: Conflict with 3rd party plugin.

Version: 1.3.8 -Date: 25 November 2024

• Fixed: Text Domain loading warning with WordPress 6.7.1

Version: 1.3.7 -Date: 17 November 2024

• Fixed: “Variation URL” not working with elementor loop issue.
• Fixed: Swatch not working properly with bundles product issue.

Version: 1.3.6 -Date: 14 October 2024

• Fixed: Issue with the button text color on swatch button hover does not change correctly.

Version: 1.3.5 -Date: 26 September 2024

• Added: Compatibility for WooCommerce Product Bundles plugin.

Version: 1.3.4 -Date: 11 September 2024

• Added: Compatibility for Astra Pro quick view

Version: 1.3.3 -Date: 01 September 2024

• Improved: Coding standards in some areas.
• Compatibility with WooCommerce latest version.

Version: 1.3.2 -Date: 03 August 2024

• Updated: 3rd party libraries for latest PHP version compatibility.

Version: 1.3.1 -Date: 11 July 2024

• Fixed: Encoding issue in product variation dropdown.

Version: 1.3.0 -Date: 10 July 2024

• Fixed: Issue duplicate form field id in the same form.

Version: 1.2.9 -Date: 24 June 2024

• Fixed: Escaping issues have been resolved in multiple areas.
• Updated: Language translation .pot file

Version: 1.2.8 -Date: 13 May 2024

• Fixed: Escaping issues have been resolved in multiple areas.

Version: 1.2.7 -Date: 18 Apr 2024

• Tweak: Loading banner in the post/page editor has been removed

Version: 1.2.6 -Date: 17 Apr 2024

• Added: Compatibility for ShopLentor universal product slider
• Added: Option to generate URL based on selected variation attributes for product details page.
• Improved: Removed dependency on JS for Diagnostic data notice dismiss issue
• Fixed: Product image doesn’t change issue in product loop while use single product add to cart function

Version: 1.2.5 -Date: 19 Feb 2024

• Added: Option to generate URL based on selected variation attributes.
• Updated: Language translation .pot file

Version: 1.2.4 -Date: 18 Dec 2023

• Updated: Language translation .pot file
• Tweak: Opt-in message to provide non-sensitive diagnostic data and usage information to improve the plugin

Version: 1.2.3 -Date: 14 Nov 2023

• Fixed: Console error issue with the Barn2 plugin

Version: 1.2.2 -Date: 13 Sep 2023

• Added: Compatibility with Barn2 Product Filters Plugin.

Version: 1.2.1 -Date: 10 Apr 2023

• Added: Security nonce verification for recommended plugins

Version: 1.2.0 -Date: 04 Apr 2023

• Added: 2 new action hooks
• Added: YITH infinite scroll support

Version: 1.1.9 -Date: 19 Jan 2023

• Fixed: Swatches doesn’t show in elementor preview mode

Version: 1.1.8 -Date: 06 Oct 2022

• Fixed: Product loop gallery navigation doesn’t change after variation update
• Updated: Readme file

Version: 1.1.7 -Date: 11 Aug 2022

• Tweak: Compatibility for Elementor’s related products
• Fixed: Related product’s Alignment issue

Version: 1.1.6 -Date: 17 Jul 2022

• Tweak: Added product type condition to avoid generating error
• Fixed: get_current_screen Undefined function issue
• Fixed: Tooltip override issue
• Fixed: Codestar file not found issue
• Added: Full Compatibility with the infinite scroll support
• Added: Compatibility for the WooLentor’s universal product quick view & position
• Added: Compatibility for the Astra theme

Version: 1.1.5 -Date: 29 May 2022

• Fixed: Show selected variation name issue
• Fixed: Shortcode notice was shown on products loaded via ajax
• Added: Compatibility for the “Urna” theme ajax loading issue on shop page
• Added: Compatibility for the “jet smart filters” plugin
• Added: Compatibility for the “Airi” theme infinite scroll & all major infinite scroll

Version: 1.1.4 -Date: 28 Apr 2022

• Improved: Global Settings
• Updated: Pot file

Version: 1.1.3 -Date: 23 Mar 2022

• Fixed: swatchly_pl_swatches shortcode error while using it outside it’s scope

Version: 1.1.2 -Date: 12 Mar 2022

• Fixed: Duplicate variation JS file on single product page
• Changed: Demo link

Version: 1.1.1 -Date: 26 Feb 2022

• Added Compatibility: For the “annasta WooCommerce Product Filters” plugin

Version: 1.1.0 -Date: 14 Feb 2022

• Fixed: e.indexOf is not a function JS error

Version: 1.0.9 -Date: 8 Jan 2022

• Recommended extensions added in admin
• Hello elementor theme support
• Updated pot file

Version: 1.0.7 -Date: 1 Nov 2021

• Fixed: Tooltip image size override issue
• Fixed: Tooltip options were overridden even if the the swatch type is = select/inherit at product level
• Fixed: Event preventDefault for the product loop
• Improved: Global settings

Version: 1.0.6 -Date: 9 Oct 2021

• Fixed: Attribute slug show instead of the the label
• Fixed: Ordering support for the swatches
• Fixed: Tooltip image size value override
• Added: swatchly_return_default_select filter to return default select programmatically
• Added: swatchly_exclude_variation filter to exclude variation programmatically
• Added: Tooltip image size global option
• Added: Catalog mode help text
• Improved: Undefined array key warning
• Improved: Variable naming into the code
• Improved: Some global options

Version: 1.0.5 -Date: 4 Oct 2021

• Updated: Language file
• Fixed: Version name parameter with enqueue CSS/JS

Version: 1.0.4 -Date: 13 Sep 2021

• Fixed: Single product variation form’s table tr,td CSS apply for only swatchly tr,td. Conflict fixed for pricing tier plugins.
• Fixed: Swatches does not show for out of stock products in the product loop
• Added: Show “out of stock” status when a variation combination chosen from product loop
• Improved: Typo of plugin settings options

Version: 1.0.3 -Date: 4 Sep 2021

• Fixed: Notice conflict with whols plugin
• Added: Support link to the description after intro
• Fixed: Menu position conflict problem

Version: 1.0.2 -Date: 1 Aug 2021

• Fixed: Pro notice width
• Fixed: “Remove Image” button of product Meta Box

Version: 1.0.1 -Date: 29 Jun 2021

• Added quick view support
• General settings indicator improved
• Added Ajax variation threshold
• Preview admin column warning fix
• Added “reset to default swatch settings” option for product Meta Box

Version: 1.0.0

• Initial Release