About this plugin
Chiseiko Essential Swatches turns plain WooCommerce variation dropdowns into beautiful, clickable color, image, text, and button swatches — on single product pages and shop, category, and tag archives. Shoppers see their options at a glance, pick the right variation in one click, and add to cart faster.
Lightweight & Fast
Speed matters for conversions. Built for performance from day one:
* Vanilla JavaScript Core: Built in vanilla JS with no jQuery code of its own (only hooking into unavoidable WooCommerce core events).
* Conditional Asset Loading: Scripts and styles load only on product and shop pages.
* Batch AJAX: Archive swatch data is fetched via a single batched request per page, rather than punishing your server with one request per product.
The problem with default WooCommerce variations
Out of the box, WooCommerce hides every product variation behind a generic <select> dropdown. That quietly costs you sales:
* Customers can’t see the colors or styles you sell — they have to open a menu and read text.
* Available options stay hidden until the dropdown is opened, so shoppers miss variants.
* There’s no visual feedback on mobile, where dropdowns are slow and fiddly.
* Shop and category pages show no variation choices at all, so every selection means an extra page load.
How it works
Go to Products > Attributes and edit any global attribute. For each term, choose a swatch type (color, image, label, or radio) and configure it — or set a default swatch type on the attribute itself to turn every term into label or radio buttons in one step. Swatches appear automatically on every product that uses that attribute — no shortcodes or template edits required.
Local (custom per-product) attributes render as text pills automatically. A short getting-started notice after activation points you to the right screens.
Swatch types (all four included free)
- Color Swatches — Pick any hex color for each attribute term.
- Image Swatches — Upload a thumbnail from the Media Library.
- Text Pills — Styled labels for attributes without a visual representation.
- Radio Buttons — Round radio indicators with label text for simple selections.
- Attribute-wide Defaults — Show every term of an attribute (such as Size) as label or radio buttons without editing each term; individual terms can still set their own type.
Look & feel
- Global Shape & Size — Circle, rounded square, or square swatches at any size from 24 to 64 px. With rounded or square, label swatches widen to fit their text. Touch screens keep comfortable 44 px tap targets.
- Tooltips — Term names appear on hover and keyboard focus.
- Attribute Row Alignment — Keep each attribute name aligned with its row of swatches, whatever your theme does by default.
Single product page
- Instant Gallery Preview — The product gallery updates the moment a swatch is clicked.
- Smart Inventory UX — Out-of-stock swatches are visually dimmed (not hidden), so customers always see available options.
- Layout Options — Inline, accordion (collapsible), overflow (“Show more”), or slider layouts.
- Mobile Auto-Scroll — Auto-scrolls to the gallery after selection so mobile users see the updated image.
- Accessible — Full ARIA support for keyboard navigation and screen readers.
Shop & archive pages
- Interactive Archive Swatches — Clickable swatches on product cards so customers can preview variants directly from the catalog.
- AJAX Add to Cart — An “Add to Cart” button appears right on the grid after selection.
- Catalog Mode — Show only one attribute (like Color) on archives for a cleaner layout.
- Related & Upsell Products — The same interactive swatches appear on related, upsell, and cross-sell product cards on product pages.
Free vs Pro
The free plugin is a complete swatch solution with no caps on the number of swatches, attributes, or products.
Upgrade to Chiseiko Essential Swatches Pro when you need advanced tools for a growing store:
* Linked Simple Products: Tie standalone simple products together into one swatch strip while keeping an indexable URL per variant.
* Advanced Styling: Custom shapes, gradients, tooltips, and out-of-stock display modes (cross-out / blur / hide).
* Swatch Filter Widget: Let shoppers filter your catalog by color or brand.
* Bulk Management: CSV Import/Export, Variable-to-Simple migration, and Auto-Assign Images.
* Conversion Tools: Dynamic Price Sync, Attribute-Based Extra Fees, and a Sticky Mobile Add-to-Cart bar.
* Scale & Compatibility: AJAX Variation Override for large catalogs, Multilingual Sync (WPML/Polylang), and Quick View support.