Swatchly – WooCommerce Variation Swatches for Products (product attributes: Image swatch, Color swatches, Label swatches)


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 exceptional WordPress plugin is designed for all store owners that want their customers to find what they’re searching for quickly. Get rid of dropdown type determination and go with one that rocks!

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)
  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. Swatch Preview Column for Admin
  17. Enable/Disable Shape inset
  18. Shape Inset size
  19. Deselect On Click
  20. Show selected option name on single product page
  21. Set image size for image type swatches
  22. Variation Label Separator
  23. Responsive for mobile device
  24. Shortcode support
  25. Support Quick View
  26. 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

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

Premium Features

  1. Auto convert variation dropdowns to image Swatch
  2. Auto convert variation dropdowns to image Swatch for idividual 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

Purchase Swatchly Pro

Video Tutorial:

How to Configure Swatches For Variable Products

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


  • Quickly Nagvigate to the Settings page of the plugin
  • General settings global
  • Color, Label & image types swatches are showing on the product details page
  • The swatched are showing for the Shop/Product details page
  • General settings for product details page
  • General settings for shop page
  • Product list.png
  • Design for swatch
  • Design for tooltip
  • Design for tooltip text
  • Design for tooltip arrow
  • Design for tooltip image
  • Other settings
  • Color type attribute options
  • Image type attribute options
  • Product level options 1
  • Color type swatch options product level
  • Image type swatch options product level


Plugin honek 1 blokea hornitzen du.

  • Swatchly – WooCommerce Variation Swatches for Products (product attributes: Image swatch, Color swatches, Label swatches)


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.


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 allready 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!


2022(e)ko uztailaren 29(a)
Every aspect regarding this plugin is user friendly and very flexile! I contacted Support with a question & their response was fast, accurate, and very helpful.
2022(e)ko maiatzaren 11(a)
I had a problem with the Astra Theme, we're the product images hadn't changed when selected. I gave them access for a few days and just after one day they solved the problem and updated the plugin. Very great support if you ask me. Very friendly and fast response time, keep up the great work! Best regards Lukas Herbst
2021(e)ko urriaren 5(a)
It really is a wonderful little plugin. The free version offers a lot for new entrants and startups. Very grateful, keep rocking!
2021(e)ko irailaren 7(a)
A simple, straight-forward plugin that I cannot faultier. Perfect for getting my project off the ground. I would highly recommend.
Irakur itzazu 7 berrikuspen guztiak

Laguntzaileak eta Garatzaileak

“Swatchly – WooCommerce Variation Swatches for Products (product attributes: Image swatch, Color swatches, Label swatches)” software librea da. Ondoko pertsonek egin dizkiote ekarpenak plugin honi.


Aldaketen loga

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 metabox

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 metabox

Version: 1.0.0

  • Initial Release