Sayan Variation Swatches for WooCommerce

Description

Sayan Variation Swatches for WooCommerce replaces the default dropdown-based variation selectors with visually rich swatches such as colors, images, labels, and radio buttons.

It improves product browsing experience by making variation selection faster, clearer, and more user-friendly for customers.

This plugin is built for performance, simplicity, and compatibility with modern WooCommerce stores.

WooCommerce Swatches Features

• Color swatches (solid and dual/split colors)
• Image swatches for visual product variations
• Label / Button swatches (S, M, L, XL, etc.)
• Radio-style variation selectors

Advanced Variation Features

• Dual/split color support for multi-tone products
• Automatic variation image switching on selection
• No page reload required for image updates
• Swatches on product, shop, and category pages
• Out-of-stock display control (blur, cross, or hide)

Design & Customization

• Square, rounded, and circle swatch shapes
• Custom swatch size control for product and archive pages
• Tooltip support with customizable colors
• Selected state indicator with customizable styling
• Custom CSS support from settings panel

Shop & Archive Enhancements

Show variation swatches directly on shop and category pages, allowing customers to preview product options without opening product pages.

Accessibility

Built with accessibility in mind:

• ARIA roles for swatches
• Keyboard navigation support (arrow keys, Enter, Space, Escape)
• Screen reader friendly structure

Performance & Compatibility

• Lightweight and optimized structure
• No unnecessary AJAX requests
• Fully compatible with WooCommerce HPOS
• Compatible with WooCommerce Cart and Checkout Blocks
• Works with most WooCommerce themes including Astra, Flatsome, OceanWP, Storefront, and Divi

Perfect For

• Fashion and clothing stores
• Furniture and home decor shops
• Cosmetic and beauty products
• Any WooCommerce variable product store

How It Works

1. Install and activate the plugin
2. Go to Products → Attributes
3. Edit an attribute term
4. Choose swatch type (color, image, label, radio)
5. Assign values and save
6. Swatches automatically appear on product pages

Variation Image Switching

When a customer selects a swatch, the corresponding product variation image is automatically displayed without page reload. This provides a smoother and more interactive shopping experience.

Frequently Asked Questions

Does this work with all WooCommerce themes?

Yes. The plugin uses standard WooCommerce hooks and works with most modern WooCommerce themes.

Can I assign different swatches per product?

Yes. You can set global swatches per attribute and override them per product if needed.

Does it support custom attributes?

Yes. Both global and custom product attributes can be used for swatches.

What happens with out-of-stock variations?

You can choose to blur, mark, or hide out-of-stock swatches from settings.

Is it translation ready?

Yes. The plugin is fully translation ready and compatible with multilingual plugins.

Does it support WooCommerce HPOS?

Yes. High-Performance Order Storage is fully supported.

Screenshots

1. Product page with variation swatches
2. Plugin settings panel
3. Design customization options

Changelog

1.0.0

• Initial release with WooCommerce variation swatches support