=== Swatchly – Product Variation Swatches for WooCommerce === Contributors: hasthemes, aslamhasib, zenaulislam, yeasinrony Tags: color swatch, variation swatches, woocommerce variation, product attributes, woocommerce attributes Requires at least: 4.0 Tested up to: 6.9 Requires PHP: 5.4 Stable tag: 1.4.13 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Product Variation Swatches For WooCommerce Products. == Description == **Swatchly** is the ultimate **WooCommerce variation swatches plugin** that replaces boring dropdown menus with beautiful, clickable swatches. Show product variations as **colors, images, or labels** to help customers make **faster purchase decisions** and improve your store's user experience. Stop losing sales to confusing dropdown menus. Swatchly transforms your WooCommerce product variations into intuitive visual swatches that customers can instantly understand and interact with. == 📌 Important Links == 🔗 [Live Demo](https://wpswatchly.com/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile) | 📖 [Documentation](https://wpswatchly.com/docs/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile) | 🚀 [Pro Version](https://wpswatchly.com/pricing/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile) | 💬 [Support](https://wpswatchly.com/contact/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile) == 📹 Video Tutorial == Learn how to install and configure Swatchly in minutes: [youtube https://www.youtube.com/watch?v=ZTpV8JFugbc] == 🎯 Why Choose Swatchly? == * ✅ **Increase Conversions by 30%** – Visual swatches help customers make decisions **73% faster**, leading to significantly higher conversion rates * ✅ **Reduce Cart Abandonment by 25%** – Clear product options decrease confusion and lower abandonment * ✅ **Better Mobile Experience** – Touch-optimized swatches work perfectly on all devices * ✅ **No Coding Required** – Simple, intuitive interface that anyone can use * ✅ **Universal Compatibility** – Works with virtually all WordPress themes and WooCommerce extensions * ✅ **Regular Updates** – Maintained for latest WordPress and WooCommerce versions == 🎨 Core Features (Free Version) == **Swatch Types:** * ✅ **Color Swatches** – Display color variations with visual color chips * ✅ **Image Swatches** – Show product variations with thumbnail images * ✅ **Label/Button Swatches** – Text-based swatches for sizes, materials, and more * ✅ **Multi-Color Swatches** – Create swatches with multiple color combinations * ✅ **Auto-Convert Dropdowns** – Automatically convert WooCommerce dropdowns to swatches **Customization & Styling:** * ✅ **3 Shape Styles** – Choose from Square, Rounded, or Circle shapes * ✅ **Flexible Alignment** – Align swatches left, center, or right * ✅ **Custom Dimensions** – Set width, height, and font sizes * ✅ **Individual Product Override** – Customize swatches for specific products * ✅ **Reset to Defaults** – Easily restore global settings for any product * ✅ **Shape Inset Control** – Enable/disable and adjust shape inset size * ✅ **Comprehensive Design Options** – Control colors, borders, spacing, padding, and typography **Tooltips & Visual Feedback:** * ✅ **Enable/Disable Tooltips** – Show additional information on hover * ✅ **Text or Image Tooltips** – Display tooltips with text or images * ✅ **Tooltip Image Size Control** – Customize tooltip image dimensions * ✅ **Full Tooltip Customization** – Style background, borders, arrow, spacing, and typography * ✅ **Disabled State Styling** – Show unavailable options with cross sign, blur with cross, blur only, or hide completely **Shop & Archive Pages:** * ✅ **Enable Swatches on Shop Pages** – Display swatches on category and archive pages * ✅ **Flexible Positioning** – Place swatches before/after title, price, or cart button * ✅ **Custom Hook Support** – Use WooCommerce hooks for advanced placement * ✅ **Shortcode Support** – Display swatches anywhere with `[swatchly_pl_swatches]` * ✅ **Product Thumbnail Switching** – Change main image when selecting variations * ✅ **Show/Hide Clear Link** – Option to display clear/reset link * ✅ **Show/Hide Swatch Labels** – Control attribute name display **Advanced Features:** * ✅ **Variation URL Generation** – Create shareable links with pre-selected variations * ✅ **Ajax Variation Threshold Control** – Optimize performance for products with many variations * ✅ **Recently Viewed Variations** – Auto-select variations based on previous customer choices * ✅ **Import/Export Settings** – Easily backup and transfer configurations * ✅ **Deselect on Click** – Allow customers to unselect variations by clicking again * ✅ **Show Selected Variation Name** – Display currently selected option on product page * ✅ **Variation Label Separator** – Customize separator between attribute labels **Responsive & Mobile:** * ✅ **Fully Responsive Design** – Optimized for all screen sizes * ✅ **Mobile-Optimized Touch Targets** – Perfect for smartphones and tablets ==🚀 Pro Features == Unlock premium functionality to supercharge your WooCommerce store: **Advanced Swatch Options:** * 🔥 **Radio Button Swatches** – Additional swatch display type for better accessibility * 🔥 **Auto-Convert Image Swatches** – Automatically create image swatches from variation images * 🔥 **Featured/Special Attributes** – Highlight specific attributes as featured * 🔥 **Hide Out-of-Stock Variations** – Automatically hide unavailable variations to prevent confusion * 🔥 **Individual Product Auto-Convert** – Control auto-conversion per product **Shop Page Power Features:** * 🔥 **Ajax Add to Cart** – Add products to cart without page reload for seamless shopping * 🔥 **Custom Cart Button Text** – Personalize the "Add to Cart" button text * 🔥 **Swatch Display Limits** – Control how many swatches show on shop pages * 🔥 **Number of Swatches to Show** – Set exact count for shop page display * 🔥 **Conditional Display** – Use PHP conditions to show/hide swatches programmatically **Premium Benefits:** * 🔥 **Priority Support** – Faster response times from expert team * 🔥 **Regular Feature Updates** – Get new features as they're released * 🔥 **30-Day Money-Back Guarantee** – Risk-free purchase * 🔥 **Lifetime Usage Rights** – Use forever, even after support period [🎯 View All Pro Features & Pricing](https://wpswatchly.com/pricing/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile) == 🏆 Perfect For Every Industry == **Fashion & Apparel Stores** Show color and size variations clearly to reduce returns and increase customer satisfaction. Ideal for clothing with multiple patterns and materials. **Furniture & Home Decor** Display material textures and finish options to help customers visualize products. Perfect for customizable furniture. **Electronics & Tech Stores** Make technical specifications easy with visual selection for storage, colors, and configurations. Simplify complex product variations. **Craft & Art Supplies** Display extensive color palettes, material types, and size variations intuitively for creative customers. **Any Variable Product Store** Improve user experience across all industries with products that have multiple variations. == ⚡ Performance & Compatibility == * ✅ Lightweight and optimized for speed * ✅ Minimal impact on page load times * ✅ Follows WordPress coding standards * ✅ Regular updates for WordPress & WooCommerce compatibility * ✅ Accessibility improvements for screen readers == ⭐ What Store Owners Say == **"Simple and effective. Just what I wanted!"** *"I was looking for a simple to use plugin that did the job it said it would do and that's exactly what I found with the Swatchly plugin. I had a small issue and contacted support. I received immediate help and they resolved my issue quickly. Super great customer service and support. I highly recommend this plugin!!"* – **dorikkd** ⭐⭐⭐⭐⭐ **"Good and quick support"** *"I had some issues with WooCommerce Bundle and this plugin, but I wrote to the support team and they quickly fixed it. Great support and plugin!"* – **Mikkelaveo** ⭐⭐⭐⭐⭐ **"It works fine, and if not they solve it!"** *"It works fine with elementor. It is easy to use and customize. One day it stops working because an Elementor update. But it only takes few hours to them to solve the problem. Good choice for your web."* – **Brandhip** ⭐⭐⭐⭐⭐ **Join 6,000+ active WooCommerce stores using Swatchly to enhance their product pages and boost conversions.** == 📚 Documentation & Support == * 📖 [Complete Documentation](https://wpswatchly.com/docs/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile) * 🎥 [Video Tutorial Playlist](https://www.youtube.com/playlist?list=PLk25BQFrj7wE5_0NH9P6uh7b0Ey5NOVCN) * 💬 [Support Forum](https://wordpress.org/support/plugin/swatchly/) * 🚀 [Premium Support](https://wpswatchly.com/contact/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile) == 🔒 Privacy Policy == Swatchly does not collect or store any personal data from your customers. The plugin may collect non-sensitive diagnostic data to improve performance and compatibility only if you opt in through the admin settings. == Installation == = 🚀 Automatic Installation (Recommended) = 1. Go to your WordPress Dashboard → **Plugins** → **Add New** 2. Search for **"Swatchly"** 3. Click **"Install Now"** and then **"Activate"** 4. Navigate to **Dashboard → Swatchly** to configure settings = 📦 Manual Installation = 1. Download the plugin zip file 2. Go to **WordPress Dashboard** → **Plugins** → **Add New** → **Upload Plugin** 3. Choose the downloaded zip file and click **"Install Now"** 4. Click **"Activate"** to enable the plugin 5. Navigate to **Dashboard → Swatchly** to configure settings = ⚙️ After Installation = 1. Ensure **WooCommerce is installed and activated** 2. Go to Swatchly settings (**Dashboard → Swatchly**) 3. Configure global settings for product pages and shop pages 4. Create or edit product attributes (**Products → Attributes**) 5. Assign swatch types (color, image, or label) to each attribute value 6. Apply the attribute to your variable products 7. **Swatches will automatically appear** on your product pages = 📖 Quick Start Guide = **Step 1:** Navigate to **Products → Attributes** in your WordPress dashboard **Step 2:** Create or edit an attribute (e.g., "Color" or "Size") **Step 3:** Add attribute terms and assign swatch types (color, image, or label) **Step 4:** Apply the attribute to your variable products **Step 5:** Configure swatch appearance in Swatchly settings **[📹 Watch Video Tutorial](https://www.youtube.com/watch?v=ZTpV8JFugbc)** **[📖 View Complete Setup Guide](https://wpswatchly.com/docs/)** == Frequently Asked Questions == = Will Swatchly work with my theme? = **Yes!** Swatchly is designed to work with virtually all WordPress themes that support WooCommerce. Our flexible design options ensure seamless integration. If you encounter any compatibility issues, our support team is ready to help. = Do I need coding skills to use Swatchly? = **Not at all!** Swatchly features an intuitive admin interface that makes setup and customization simple for everyone. No coding knowledge is required for any features. = Will this slow down my website? = **No.** Swatchly is optimized for performance with minimal impact on load times. The plugin uses lightweight code, follows WordPress best practices, and loads assets only where needed. = Can I customize how swatches look? = **Absolutely!** You can customize shapes (square, rounded, circle), sizes, colors, borders, spacing, and add tooltips. Swatchly offers extensive styling options to match your brand perfectly. = Does Swatchly work on mobile devices? = **Yes!** Swatchly is fully responsive and mobile-optimized with touch-friendly targets that work perfectly on smartphones and tablets. = Can I show swatches on shop/category pages? = **Yes!** Swatchly supports displaying swatches on both individual product pages and shop/archive pages. You can control positioning and behavior for each page type separately. = Is Swatchly compatible with the latest WooCommerce version? = **Yes!** We regularly update Swatchly to ensure full compatibility with the latest versions of WordPress and WooCommerce. Check our changelog for the most recent compatibility information. = Can I use different swatch types for different attributes? = **Yes!** You can assign different swatch types (color, image, label) to each attribute independently. For example, use color swatches for colors and label swatches for sizes. = Does Swatchly support multi-color swatches? = **Yes!** You can create swatches that display multiple colors, perfect for products with multi-colored variations. = What's the difference between free and pro versions? = The **free version** includes all essential features: color, image, and label swatches, tooltips, shop page support, and extensive customization options. The **Pro version** adds: radio button swatches, catalog mode (B2B), out-of-stock hiding, Ajax add to cart, swatch limits, custom cart text, featured attributes, auto-convert image swatches, and priority support. **[Compare Free vs Pro Features](https://wpswatchly.com/pricing/)** = Can I hide out-of-stock variations? = **Yes!** This feature is available in the Pro version. You can automatically hide unavailable variations to prevent customer confusion. = Does Swatchly work with Quick View plugins? = **Yes!** Swatchly is compatible with 15+ popular quick view plugins including ShopLentor, YITH Quick View, WPC Smart Quick View, QuickSwish, Addonify, Merchant, and more. = Can I import/export my settings? = **Yes!** Swatchly includes import/export functionality for global settings, making it easy to backup configurations or transfer settings between sites. = Is Swatchly translation-ready? = **Yes!** Swatchly is fully translation-ready and includes a POT file. It's compatible with WPML and other translation plugins for multilingual stores. = Can I use Swatchly on multiple websites? = The **free version** can be used on unlimited sites. For the **Pro version**, we offer different license options: * Single Site License (1 website) * Multi-Site License (5 websites) * Agency License (unlimited websites) **[View Pricing Plans](https://wpswatchly.com/pricing/?utm_source=wprepo&utm_medium=freeplugin&utm_campaign=orgprofile)** = How do I get support? = For the **free version**, use the [WordPress.org support forum](https://wordpress.org/support/plugin/swatchly/). **Pro users** Visit our [website](https://wpswatchly.com/contact/) for detailed documentation and video tutorials. = Does Swatchly support shortcodes? = **Yes!** Use the `[swatchly_pl_swatches]` shortcode to display swatches anywhere on your site, including custom positions and page builders. == Screenshots == 1. Dramatic before/after comparison showing visual swatches replacing traditional dropdowns 2. Beautiful product page displaying Color, Size, Label, and Image swatches together 3. Shop and archive pages showing swatches for quick product selection 4. Color swatches with visual preview - perfect for apparel, accessories, and more 5. Image swatches displaying product variations with thumbnail previews 6. Label swatches for product types, styles, and non-visual attribute options 7. Interactive tooltips displaying additional product information on hover 8. Flexible swatch shape options - customize with Square, Rounded, or Circle styles 9. Easy-to-use settings dashboard with all plugin options in one place 10. Product attribute configuration showing swatch types, images, and tooltip settings 11. Design customization panel for full control over swatch appearance 12. Tooltip settings page with options for width, colors, borders, and spacing 13. Import/export settings for easy backup and site migration == Changelog == = Version: 1.4.13 - Date: 15 April 2026 = * Fixed: Out-of-stock swatches were not marked as disabled on products with a single variation attribute. * Fixed: Swatches stopped working after pagination on block themes using the Query Loop block (WP Interactivity API). = Version: 1.4.12 - Date: 26 February 2026 = * Improved: Admin notice display. = Version: 1.4.11 - Date: 18 February 2026 = * Fixed: Compatibility issue with WPC Smart Quick View plugin. = Version: 1.4.10 - Date: 02 February 2026 = * Improved: Variation URL feature now works with any theme structure. = Version: 1.4.9 - Date: 14 December 2025 = * Added: Oxygen Builder compatibility. = 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