Title: Variation Swatches for WooCommerce – Color, Image & Label Swatches Author: WebTend Published: 2026-05-31 Last modified: 2026-10-01 --- Szukaj wtyczek ![](https://ps.w.org/sayan-variation-swatches/assets/banner-772x250.png?rev=3650668) ![](https://ps.w.org/sayan-variation-swatches/assets/icon-256x256.png?rev=3650671) # Variation Swatches for WooCommerce – Color, Image & Label Swatches Autor: [WebTend](https://profiles.wordpress.org/devhasib/) [Pobierz](https://downloads.wordpress.org/plugin/sayan-variation-swatches.1.0.5.zip) * [Szczegóły](https://pl.wordpress.org/plugins/sayan-variation-swatches/#description) * [Recenzje](https://pl.wordpress.org/plugins/sayan-variation-swatches/#reviews) * [Instalacja](https://pl.wordpress.org/plugins/sayan-variation-swatches/#installation) * [Rozwój](https://pl.wordpress.org/plugins/sayan-variation-swatches/#developers) [Wsparcie](https://wordpress.org/support/plugin/sayan-variation-swatches/) ## Opis **Variation Swatches for WooCommerce** replaces the default dropdown-based variation selectors with visually rich swatches — colors, images, labels, and radio buttons. It improves product browsing experience by making variation selection faster, clearer, and more user-friendly. 📖 [View Documentation](https://storzen.webtend.net/variation-swatches-docs.html) | 🌐 [WebTend](https://webtend.net/) #### 🎨 FREE Features * ✅ **Dual / Split Color Swatches** — two-tone color swatches, free (competitors charge Pro for this) * ✅ **Archive & Shop Page Swatches** — show swatches on category/shop pages, free( usually a Pro feature) * ✅ **Color Swatches** — solid hex color swatches for any attribute * ✅ **Image Swatches** — upload per-term images for visual variation selection * ✅ **Label / Button Swatches** — S, M, L, XL text buttons for size and more * ✅ **Radio Button Swatches** — classic radio-style selectors * ✅ **Archive „+N More” Indicator** — shows overflow count cleanly on shop pages * ✅ **WooCommerce Product Blocks** — archive swatches inside woocommerce/product- collection & all-products blocks * ✅ **Out-of-Stock Notify Me** — inline popup with „Notify me when available” link on OOS swatch click * ✅ **Selected Swatch Animation** — smooth scale-pop & ripple ring on selection( CSS-only, reduced-motion safe) * ✅ **Attribute Label Display** — shows „Color: Red” inline with swatches #### ⚡ Advanced Variation Features * Automatic variation image switching on swatch click (no page reload) * Out-of-stock display control: blur, blur + cross, or hide completely * Per-product swatch type override (global attribute type overridable per product) * Auto-convert all dropdowns to label swatches with one toggle * Show / hide selected attribute name alongside swatches #### 🎨 Design & Customization * Square, rounded, and circle swatch shapes (global setting) * Custom swatch size for product pages and archive pages separately * Tooltip support with customizable background and text colors * Selected state indicator with custom checkmark color * Custom CSS field for advanced styling #### 🏪 Shop & Archive Enhancements Show variation swatches directly on shop and category pages. Customers can preview product color/size options without opening product pages — proven to increase click- through rates. #### ♿ Accessibility * ARIA roles (`role="radio"`, `aria-checked`) for screen readers * Full keyboard navigation: Arrow keys, Enter, Space, Escape * Screen-reader-friendly markup structure #### ⚙️ Performance & Compatibility * Lightweight — settings cached in memory, no repeated DB queries on archive pages * No unnecessary AJAX requests on the frontend * Fully compatible with WooCommerce HPOS (High-Performance Order Storage) * Compatible with WooCommerce Cart and Checkout Blocks * Works with Astra, Flatsome, OceanWP, Storefront, GeneratePress, Divi, and most WooCommerce themes #### 🏆 Perfect For * Fashion and clothing stores (color + size swatches) * Furniture and home décor shops (image swatches) * Cosmetics and beauty products (dual-color swatches) * Any WooCommerce store with variable products #### How It Works 1. Install and activate the plugin 2. Go to **Products Attributes** 3. Edit an attribute term (e.g. „Red” under Color) 4. Choose swatch type: color, image, label, or radio 5. Assign values and save — swatches appear automatically #### Variation Image Switching When a customer selects a swatch, the product gallery image updates instantly — no page reload. Smooth, fast, conversion-friendly. #### Frequently Asked Questions ## Zrzuty ekranu [⌊Product page with Color, Image, and Label swatches⌉⌊Product page with Color, Image, and Label swatches⌉[ Product page with Color, Image, and Label swatches [⌊Plugin Settings Panel — General and Design tabs⌉⌊Plugin Settings Panel — General and Design tabs⌉[ Plugin Settings Panel — General and Design tabs [⌊Archive / Shop page swatches with overflow badge⌉⌊Archive / Shop page swatches with overflow badge⌉[ Archive / Shop page swatches with overflow badge [⌊Attribute Term Edit screen — swatch type and color picker⌉⌊Attribute Term Edit screen — swatch type and color picker⌉[ Attribute Term Edit screen — swatch type and color picker [⌊AI Variation Finder search box in action⌉⌊AI Variation Finder search box in action⌉[ AI Variation Finder search box in action ## Instalacja 1. Upload the plugin folder to `/wp-content/plugins/`, or install via the WordPress plugin screen. 2. Activate through **Plugins Installed Plugins**. 3. Go to **Products Attributes**, edit any attribute term, and set its Swatch type, color, or image. 4. Configure plugin-wide settings under **Variation Swatches** in the WP admin menu. 5. Done — swatches automatically replace dropdowns on product and shop pages. ## Najczęściej zadawane pytania ### Does this work with all WooCommerce themes? Yes. Works with Astra, Flatsome, OceanWP, Storefront, GeneratePress, Divi, and most WooCommerce themes. ### Does it work with Elementor? Yes, on standard product pages. Elementor Loop Builder archive swatches are a Pro( Swatchly Pro) feature. ### Does it work with WooCommerce Product Blocks? Yes. From v1.0.5, archive swatches render inside woocommerce/product-collection ( WC 8.0+) and woocommerce/all-products blocks. ### Does it work with WPML or Polylang? Yes — fully translation-ready with a .pot file included. ### Does it work on shop and category pages? Yes. Archive/shop page swatches are a free feature. Enable them under Settings Archive tab. ### What happens to out-of-stock variations? Choose to blur, blur + cross, or hide OOS swatches. From v1.0.5, clicking an OOS swatch shows a „Notify me when available” popup. ### Can I control which direction the tooltip appears? Yes. From v1.0.5, go to Settings Design Tooltip Position and choose Top, Bottom, Left, or Right. ### How does the AI Variation Finder work? Type natural language like „dark blue large” in the search box on the product page. The finder auto-selects matching swatches — no API key, no AJAX, runs entirely in the browser. ### Is it mobile-friendly? Yes. Swatches are touch-friendly on all screen sizes. ### Is it translation ready? Yes. A .pot file is included and all strings use the sayan-variation-swatches text domain. ## Recenzje Wtyczka nie ma jeszcze żadnej recenzji. ## Kontrybutorzy i deweloperzy „Variation Swatches for WooCommerce – Color, Image & Label Swatches” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki. Zaangażowani * [ WebTend ](https://profiles.wordpress.org/devhasib/) * [ webtendhq ](https://profiles.wordpress.org/webtendhq/) [Przetłumacz wtyczkę “Variation Swatches for WooCommerce – Color, Image & Label Swatches” na swój język.](https://translate.wordpress.org/projects/wp-plugins/sayan-variation-swatches) ### Interesuje cię rozwój wtyczki? [Przeglądaj kod](https://plugins.trac.wordpress.org/browser/sayan-variation-swatches/), sprawdź [repozytorium SVN](https://plugins.svn.wordpress.org/sayan-variation-swatches/) lub czytaj [dziennik rozwoju](https://plugins.trac.wordpress.org/log/sayan-variation-swatches/) przez [RSS](https://plugins.trac.wordpress.org/log/sayan-variation-swatches/?limit=100&mode=stop_on_copy&format=rss). ## Rejestr zmian #### Does this work with all WooCommerce themes? Yes. The plugin uses standard WooCommerce hooks and works with most modern WooCommerce themes including Astra, Flatsome, OceanWP, Storefront, GeneratePress, and Divi. #### Can I assign different swatches per product? Yes. Set global swatches per attribute term, then override the swatch type per product if needed. #### Does it support custom (local) attributes? Yes. Both global WooCommerce attributes and custom per-product attributes work with swatches. #### What happens to out-of-stock variations? You can choose to blur, blur + cross-mark, or completely hide out-of-stock swatches from the Settings panel. #### Does it work on shop and category pages? Yes — archive/shop page swatches are available in the free version. Enable them from **Settings Shop / Archive** tab. #### Is it translation ready? Yes. Fully translation ready and compatible with WPML, Polylang, and other multilingual plugins. A .pot file is included. #### Screenshots 1. Product page with color, image, and label variation swatches 2. Plugin settings panel — General tab 3. Design & Style customization options 4. Archive / shop page swatches display 5. Attribute term edit screen with swatch type selector #### Changelog #### 1.0.5 * **New:** Pro Features tab in Settings — previews Sticky ATC Bar, Per-Swatch Badges, Multi-Gallery, Bulk Generator, Elementor Loop Builder, Live Stock Badge with upgrade prompts * **New:** WooCommerce Product Blocks compatibility — archive swatches now render inside woocommerce/product-collection (WC 8.0+) and woocommerce/all-products blocks * **New:** Out-of-Stock Notify Me — clicking an OOS swatch shows an inline „Notify me when available” popup with optional redirect link (configurable in General settings) * **New:** Selected swatch highlight animation — CSS-only scale-pop and ripple ring on swatch selection; label/radio swatches get a smooth color transition instead; respects prefers-reduced-motion #### 1.0.4 * **New:** Elementor Loop Builder compatibility — archive swatches now render correctly inside Elementor’s Loop Builder, WooCommerce Products, and related product widgets * **New:** Settings Export / Import — download all settings as JSON, restore on any site with one click (Advanced tab) * **New:** Per-attribute term shape override — set Circle for Color attribute, Square for Size on the term edit screen independently of the global shape setting * **New:** Styled „Clear Selection” button — replaces WooCommerce’s plain text clear link with a polished, accessible button * **Improvement:** Admin term list column — now shows a colored type badge (Color/ Image / Label / Radio), shape override badge, and a more accurate swatch preview with correct border-radius per shape #### 1.0.3 * **New:** Review notice system — politely prompts active users to leave a WP.org review after 7 days or 3 admin sessions * **New:** Archive „+N more” overflow badge — shows remaining swatch count cleanly when there are many variations * **New:** Attribute label display — shows „Color: Red” inline alongside swatches on product pages * **New:** Quick View plugin compatibility — MutationObserver-based reinit for dynamically loaded product modals * **Improvement:** Settings static cache — `get_option()` called once per request instead of once per swatch render, significantly reducing DB queries on archive pages with many products * **Fix:** „Tested up to” mismatch — plugin header and readme.txt now both declare WordPress 7.1 * **Fix:** „WC tested up to” updated from „8.x” placeholder to accurate version * **Fix:** Plugin display name updated to keyword-first title for better WP.org search visibility * **Fix:** Author URI updated to webtend.net #### 1.0.2 * Fixed: saving settings on one tab was resetting settings on other tabs back to defaults. Each tab now saves independently. #### 1.0.1 * Added compatibility guard so the plugin runs safely alongside Sayan Variation Swatches Pro without function/class redeclaration conflicts. #### 1.0.0 * Initial release ## Meta * Wersja **1.0.5** * Ostatnia aktualizacja **2 tygodnie temu** * Włączone instalacje **10+** * Wersja WordPressa ** 6.4 lub nowszej ** * Testowano do **7.1.3** * Wersja PHP ** 7.4 lub nowszej ** * Język * [English (US)](https://wordpress.org/plugins/sayan-variation-swatches/) * Tagi * [color swatches](https://pl.wordpress.org/plugins/tags/color-swatches/)[product attributes](https://pl.wordpress.org/plugins/tags/product-attributes/) [Variable Products](https://pl.wordpress.org/plugins/tags/variable-products/) [variation swatches](https://pl.wordpress.org/plugins/tags/variation-swatches/) [woocommerce](https://pl.wordpress.org/plugins/tags/woocommerce/) * [Widok zaawansowany](https://pl.wordpress.org/plugins/sayan-variation-swatches/advanced/) ## Oceny Nie przesłano jeszcze żadnych recenzji. [Twoja opinia](https://wordpress.org/support/plugin/sayan-variation-swatches/reviews/#new-post) [Zobacz wszystkierecenzje.](https://wordpress.org/support/plugin/sayan-variation-swatches/reviews/) ## Zaangażowani * [ WebTend ](https://profiles.wordpress.org/devhasib/) * [ webtendhq ](https://profiles.wordpress.org/webtendhq/) ## Wsparcie Zagadnienia rozwiązane w przeciągu ostatnich dwóch miesięcy: 0 z 1 [Zobacz forum wsparcia](https://wordpress.org/support/plugin/sayan-variation-swatches/)