{"id":331893,"date":"2026-07-07T03:27:41","date_gmt":"2026-07-07T03:27:41","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/essential-swatches\/"},"modified":"2026-07-07T03:27:06","modified_gmt":"2026-07-07T03:27:06","slug":"chiseiko-essential-swatches","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/chiseiko-essential-swatches\/","author":23473793,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0","requires":"6.5","requires_php":"8.1","requires_plugins":null,"header_name":"Chiseiko Essential Swatches for WooCommerce","header_author":"Chiseiko LLC","header_description":"Turn WooCommerce variation dropdowns into clickable color, image, text, and button swatches on product and shop pages.","assets_banners_color":"b5a593","last_updated":"2026-07-07 03:27:06","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.paypal.com\/ncp\/payment\/GBS4FG84LUEMY","header_plugin_uri":"https:\/\/chiseikotech.com\/chiseiko-essential-swatches\/","header_author_uri":"https:\/\/chiseikotech.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":26,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"chiseiko","date":"2026-07-07 03:27:06"}},"upgrade_notice":{"1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3598460,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3598460,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3598460,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3598460,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3598460,"resolution":"1","location":"assets","locale":"","width":2744,"height":1382},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3598460,"resolution":"2","location":"assets","locale":"","width":2560,"height":1886},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3598460,"resolution":"3","location":"assets","locale":"","width":880,"height":1430},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3598460,"resolution":"4","location":"assets","locale":"","width":2560,"height":3476},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3598460,"resolution":"5","location":"assets","locale":"","width":2744,"height":1382},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3598460,"resolution":"6","location":"assets","locale":"","width":2752,"height":1800}},"screenshots":{"1":"Clickable color and text swatches replace the variation dropdowns on a single product page (Color, Size, and Material attributes).","2":"Configuring swatches in the admin: every attribute term gets a swatch preview and a Swatch Type selector \u2014 color, image, label, or radio.","3":"Interactive swatch strip on a shop-archive product card, with an AJAX Add to Cart button shown after a swatch is selected.","4":"Plugin settings (WooCommerce &gt; Settings &gt; Chiseiko Essential Swatches Settings): image preview, swatch layout, archive swatches, AJAX add-to-cart, catalog mode, and mobile options.","5":"Accordion layout \u2014 each attribute becomes a collapsible panel, ideal for products with many swatches.","6":"Catalog Mode \u2014 a single attribute (Color) shown per product card across shop and category archives."}},"plugin_section":[],"plugin_tags":[37395,18779,51677,130912,286],"plugin_category":[45],"plugin_contributors":[270403],"plugin_business_model":[],"class_list":["post-331893","plugin","type-plugin","status-publish","hentry","plugin_tags-color-swatches","plugin_tags-image-swatches","plugin_tags-product-variations","plugin_tags-variation-swatches","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-chiseiko","plugin_committers-chiseiko"],"banners":{"banner":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/banner-772x250.png?rev=3598460","banner_2x":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/banner-1544x500.png?rev=3598460","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/icon-128x128.png?rev=3598460","icon_2x":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/icon-256x256.png?rev=3598460","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/screenshot-1.png?rev=3598460","caption":"Clickable color and text swatches replace the variation dropdowns on a single product page (Color, Size, and Material attributes)."},{"src":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/screenshot-2.png?rev=3598460","caption":"Configuring swatches in the admin: every attribute term gets a swatch preview and a Swatch Type selector \u2014 color, image, label, or radio."},{"src":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/screenshot-3.png?rev=3598460","caption":"Interactive swatch strip on a shop-archive product card, with an AJAX Add to Cart button shown after a swatch is selected."},{"src":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/screenshot-4.png?rev=3598460","caption":"Plugin settings (WooCommerce &gt; Settings &gt; Chiseiko Essential Swatches Settings): image preview, swatch layout, archive swatches, AJAX add-to-cart, catalog mode, and mobile options."},{"src":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/screenshot-5.png?rev=3598460","caption":"Accordion layout \u2014 each attribute becomes a collapsible panel, ideal for products with many swatches."},{"src":"https:\/\/ps.w.org\/chiseiko-essential-swatches\/assets\/screenshot-6.png?rev=3598460","caption":"Catalog Mode \u2014 a single attribute (Color) shown per product card across shop and category archives."}],"raw_content":"<!--section=description-->\n<p><strong>Chiseiko Essential Swatches turns plain WooCommerce variation dropdowns into beautiful, clickable color, image, text, and button swatches<\/strong> \u2014 on single product pages <em>and<\/em> shop, category, and tag archives. Shoppers see their options at a glance, pick the right variation in one click, and add to cart faster.<\/p>\n\n<p>Built from the ground up with a vanilla-first JavaScript architecture, conditional asset loading, and full accessibility. It works with any WooCommerce-compatible theme \u2014 Classic, FSE block themes, and page builders (Elementor, Divi, Beaver Builder) \u2014 with no template edits and no shortcodes.<\/p>\n\n<h4>The problem with default WooCommerce variations<\/h4>\n\n<p>Out of the box, WooCommerce hides every product variation behind a generic <code>&lt;select&gt;<\/code> dropdown. That quietly costs you sales:<\/p>\n\n<ul>\n<li>Customers can't <em>see<\/em> the colors or styles you sell \u2014 they have to open a menu and read text.<\/li>\n<li>Available options stay hidden until the dropdown is opened, so shoppers miss variants.<\/li>\n<li>There's no visual feedback on mobile, where dropdowns are slow and fiddly.<\/li>\n<li>Shop and category pages show no variation choices at all, so every selection means an extra page load.<\/li>\n<\/ul>\n\n<h4>What Chiseiko Essential Swatches solves<\/h4>\n\n<ul>\n<li><strong>Makes choices visual and instant.<\/strong> Real color circles, product photos, and styled labels replace text dropdowns, so shoppers recognize what they want immediately.<\/li>\n<li><strong>Shows options on the shop page, not just the product page.<\/strong> Interactive archive swatches let customers preview and even add a variant to the cart straight from the product card.<\/li>\n<li><strong>Reduces \"out of stock\" frustration.<\/strong> Unavailable variants are dimmed (not hidden), so customers always see the full range and what's available.<\/li>\n<li><strong>Speeds up the path to purchase.<\/strong> Instant gallery preview, mobile auto-scroll, and one-click selection shorten the distance between landing and buying.<\/li>\n<li><strong>Keeps your store fast.<\/strong> Assets load only on the pages that need them, and archive data is fetched in a single batched request \u2014 not one request per product.<\/li>\n<\/ul>\n\n<h4>Swatch types (all four included free)<\/h4>\n\n<ul>\n<li><strong>Color Swatches<\/strong> \u2014 Pick any hex color for each attribute term.<\/li>\n<li><strong>Image Swatches<\/strong> \u2014 Upload a thumbnail from the Media Library.<\/li>\n<li><strong>Text Pills<\/strong> \u2014 Styled labels for attributes without a visual representation.<\/li>\n<li><strong>Radio Buttons<\/strong> \u2014 Round radio indicators with label text for simple selections.<\/li>\n<\/ul>\n\n<h4>Single product page<\/h4>\n\n<ul>\n<li><strong>Instant Gallery Preview<\/strong> \u2014 The product gallery updates the moment a swatch is clicked, before all attributes are selected (Amazon\/AliExpress-style image preview).<\/li>\n<li><strong>Smart Inventory UX<\/strong> \u2014 Out-of-stock swatches are visually dimmed (not hidden), so customers always see available options. The last viable variant is auto-selected.<\/li>\n<li><strong>Layout Options<\/strong> \u2014 Inline, accordion (collapsible), overflow (\"Show more\"), or slider layouts for products with many swatches. Accordion can be set to mobile-only.<\/li>\n<li><strong>Mobile Auto-Scroll<\/strong> \u2014 After selecting a variant on mobile, the viewport scrolls to the gallery so the customer sees the updated image. Configurable breakpoint and offset.<\/li>\n<li><strong>Accessible<\/strong> \u2014 Full ARIA support with <code>role=\"radiogroup\"<\/code>, <code>aria-checked<\/code>, <code>aria-disabled<\/code>, <code>aria-label<\/code>, and roving-tabindex keyboard navigation.<\/li>\n<\/ul>\n\n<h4>Shop &amp; archive pages<\/h4>\n\n<ul>\n<li><strong>Archive Swatch Strip<\/strong> \u2014 Compact swatch previews on shop, category, and tag pages.<\/li>\n<li><strong>Interactive Archive Swatches<\/strong> \u2014 Clickable swatches on product cards so customers can preview variants without leaving the listing.<\/li>\n<li><strong>AJAX Add to Cart<\/strong> \u2014 After selecting a swatch on an archive page, an \"Add to Cart\" button appears on the card \u2014 no need to open the product page.<\/li>\n<li><strong>Catalog Mode<\/strong> \u2014 Show only one attribute on archive pages for a cleaner layout.<\/li>\n<\/ul>\n\n<h4>Performance &amp; compatibility<\/h4>\n\n<ul>\n<li><strong>Vanilla-first JavaScript<\/strong> \u2014 plugin-owned behavior stays native. Any jQuery that remains is limited to unavoidable WooCommerce or WordPress bridge contracts.<\/li>\n<li><strong>Conditional Loading<\/strong> \u2014 CSS and JS load only on product and shop pages. Nothing loads on cart, checkout, or account pages.<\/li>\n<li><strong>Batch AJAX<\/strong> \u2014 Archive swatch data is fetched via a single batched request per page (up to 50 products), then cached.<\/li>\n<li><strong>Theme-agnostic<\/strong> \u2014 Uses WooCommerce's standard variation form hooks; no template overrides.<\/li>\n<\/ul>\n\n<h4>How it works<\/h4>\n\n<ol>\n<li>Go to <strong>Products &gt; Attributes<\/strong> and edit any global attribute.<\/li>\n<li>For each term, choose a swatch type (color, image, label, or radio) and configure it.<\/li>\n<li>Swatches appear automatically on every product that uses that attribute \u2014 no shortcodes or template edits required.<\/li>\n<\/ol>\n\n<p>Local (custom per-product) attributes render as text pills automatically.<\/p>\n\n<h4>Free vs Pro \u2014 which problems does each solve?<\/h4>\n\n<p><strong>Chiseiko Essential Swatches (free) is a complete swatch solution.<\/strong> If your goal is to replace variation dropdowns with visual swatches on product <em>and<\/em> shop pages, add interactive archive selection with AJAX add-to-cart, control layout, and keep everything fast and accessible \u2014 the free plugin does that, with no limits on the number of swatches, attributes, or products.<\/p>\n\n<p><strong>Upgrade to <a href=\"https:\/\/chiseikotech.com\/chiseiko-essential-swatches-pro\/\">Chiseiko Essential Swatches Pro<\/a> when you outgrow the basics<\/strong> and need to solve store-growth problems the free plugin intentionally leaves out:<\/p>\n\n<ul>\n<li><em>\"My 'variations' are actually separate products and I don't want to lose their SEO.\"<\/em> \u2192 <strong>Linked Simple Products<\/strong> ties standalone simple products together into one swatch strip while preserving an individual, indexable URL per variant \u2014 plus canonical consolidation, linked archive swatches, a multi-attribute matrix (e.g. color + size), an in-place product-page swap (no full reload), and a <strong>shared review collection<\/strong> with a combined rating across the group.<\/li>\n<li><em>\"My swatches look generic and off-brand.\"<\/em> \u2192 <strong>Advanced Styling<\/strong> adds per-swatch shapes, a multi-stop gradient builder, custom radius, out-of-stock display modes (cross-out \/ blur \/ hide), and one-click style presets \u2014 plus configurable <strong>tooltips<\/strong>.<\/li>\n<li><em>\"Shoppers can't filter by color or brand.\"<\/em> \u2192 A visual <strong>Swatch Filter Widget<\/strong> and <strong>WooCommerce Brands<\/strong> swatches (including on shop-archive cards).<\/li>\n<li><em>\"I need to manage hundreds of products without clicking through every term.\"<\/em> \u2192 <strong>CSV Import\/Export<\/strong>, <strong>Auto-Assign Images<\/strong> by slug, and a <strong>Variable \u2192 Simple migration tool<\/strong> that copies brands, custom fields, taxonomies, galleries, and reviews.<\/li>\n<li><em>\"I want to lift average order value and mobile conversions.\"<\/em> \u2192 <strong>Dynamic Price Sync<\/strong>, <strong>Attribute-Based Extra Fees<\/strong>, and a mobile <strong>Sticky Add-to-Cart Bar<\/strong>.<\/li>\n<li><em>\"My big variable products are slow, and quick-view breaks my swatches.\"<\/em> \u2192 <strong>AJAX Variation Override<\/strong> (raise the inline-variation limit), <strong>Additional Variation Images<\/strong>, <strong>Swatch Grouping<\/strong>, and <strong>Quick View Compatibility<\/strong>.<\/li>\n<li><em>\"I run a multilingual store.\"<\/em> \u2192 <strong>Multilingual Sync<\/strong> keeps swatch metadata aligned across WPML and Polylang.<\/li>\n<\/ul>\n\n<p>Every Pro module is individually toggleable, loads conditionally, and follows the same vanilla-first architecture as the free plugin.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>chiseiko-essential-swatches<\/code> folder to <code>wp-content\/plugins\/<\/code>, or install directly from the WordPress plugin screen.<\/li>\n<li>Activate the plugin.<\/li>\n<li>Ensure WooCommerce 8.0 or later is active.<\/li>\n<li>Go to <strong>Products &gt; Attributes<\/strong>, edit an attribute, and configure swatch types for each term.<\/li>\n<li>Optionally configure settings at <strong>WooCommerce &gt; Settings &gt; Chiseiko Essential Swatches Settings<\/strong> (image preview, archive swatches, AJAX add-to-cart, layout mode, catalog mode, mobile auto-scroll).<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"do%20i%20need%20woocommerce%3F\"><h3>Do I need WooCommerce?<\/h3><\/dt>\n<dd><p>Yes. Chiseiko Essential Swatches requires WooCommerce 8.0 or later (tested up to WooCommerce 10.5).<\/p><\/dd>\n<dt id=\"is%20it%20really%20free%3F\"><h3>Is it really free?<\/h3><\/dt>\n<dd><p>Yes. The free plugin includes all four swatch types, single-product and archive swatches, interactive archive swatches with AJAX add-to-cart, every layout mode, catalog mode, and mobile auto-scroll \u2014 with no caps on swatches, attributes, or products. Pro is an optional add-on for advanced features.<\/p><\/dd>\n<dt id=\"will%20it%20work%20with%20my%20theme%3F\"><h3>Will it work with my theme?<\/h3><\/dt>\n<dd><p>Chiseiko Essential Swatches uses WooCommerce's standard variation form hooks and does not override templates, so it is compatible with any properly built WooCommerce theme \u2014 including Classic themes, FSE block themes, and page builders (Elementor, Divi, Beaver Builder).<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20custom%20%28local%29%20product%20attributes%3F\"><h3>Does it work with custom (local) product attributes?<\/h3><\/dt>\n<dd><p>Yes. Local attributes automatically render as text-pill swatches. To use color or image swatches, convert them to global attributes under <strong>Products &gt; Attributes<\/strong>.<\/p><\/dd>\n<dt id=\"does%20the%20plugin%20slow%20down%20my%20site%3F\"><h3>Does the plugin slow down my site?<\/h3><\/dt>\n<dd><p>No. All plugin-owned JavaScript is vanilla (no jQuery runtime dependency). Assets load only on product and shop pages. Archive swatch data is cached and served via a single batched AJAX endpoint, and frontend scripts use the WP 6.3+ <code>defer<\/code> strategy for non-blocking loading.<\/p><\/dd>\n<dt id=\"what%20swatch%20types%20are%20available%3F\"><h3>What swatch types are available?<\/h3><\/dt>\n<dd><p>Four: Color (hex picker), Image (Media Library thumbnail), Label (text pill), and Radio Button. All four are in the free version.<\/p><\/dd>\n<dt id=\"can%20i%20control%20the%20layout%20for%20products%20with%20many%20swatches%3F\"><h3>Can I control the layout for products with many swatches?<\/h3><\/dt>\n<dd><p>Yes. Choose inline (default), accordion (collapsible panels per attribute), overflow (\"Show N more\" toggle), or slider. Accordion can be set to mobile-only, and the overflow limit is configurable.<\/p><\/dd>\n<dt id=\"can%20i%20show%20swatches%20on%20the%20shop%20and%20category%20pages%3F\"><h3>Can I show swatches on the shop and category pages?<\/h3><\/dt>\n<dd><p>Yes. Enable archive swatches in settings. You can also make them interactive so customers preview variants and add to cart directly from product cards, or use Catalog Mode to show a single attribute for a cleaner grid.<\/p><\/dd>\n<dt id=\"can%20i%20hide%20swatches%20on%20archive%20pages%3F\"><h3>Can I hide swatches on archive pages?<\/h3><\/dt>\n<dd><p>Yes. Disable archive swatches in settings, or return <code>false<\/code> from the <code>chiseikoessw_render_loop_swatches<\/code> filter to suppress per-product.<\/p><\/dd>\n<dt id=\"is%20the%20plugin%20translatable%3F\"><h3>Is the plugin translatable?<\/h3><\/dt>\n<dd><p>Yes. All strings use the <code>chiseiko-essential-swatches<\/code> text domain and are translation-ready.<\/p><\/dd>\n<dt id=\"what%20is%20the%20difference%20between%20free%20and%20pro%3F\"><h3>What is the difference between Free and Pro?<\/h3><\/dt>\n<dd><p>The free plugin is a complete swatch solution: four swatch types, instant gallery preview, interactive archive swatches with AJAX add-to-cart, layout options (inline \/ accordion \/ overflow \/ slider), catalog mode, and mobile auto-scroll. <a href=\"https:\/\/chiseikotech.com\/chiseiko-essential-swatches-pro\/\">Chiseiko Essential Swatches Pro<\/a> adds linked simple products (SEO-friendly swatches across separate listings) with grouping, canonical shield, archive swatches, multi-attribute matrix, in-place product-page swap, and shared reviews; advanced styling (gradients, shapes, tooltips, style presets, OOS display modes); a swatch filter widget; WooCommerce Brands swatches; variation-threshold management; additional variation images; swatch grouping; CSV bulk operations; auto-assign images; multilingual sync; quick-view compatibility; dynamic price sync; attribute-based extra fees; a sticky mobile add-to-cart bar; gallery zoom alignment; and a Variable \u2192 Simple migration tool. See the Free vs Pro section above for the specific problems each solves.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Four swatch types: Color, Image, Label, Radio Button.<\/li>\n<li>Instant gallery preview (single attribute image preview).<\/li>\n<li>Interactive archive swatches with AJAX add-to-cart.<\/li>\n<li>Batch AJAX endpoint for archive variation data.<\/li>\n<li>Catalog Mode for clean archive layouts.<\/li>\n<li>Accordion, overflow, and slider swatch layouts.<\/li>\n<li>Mobile auto-scroll to gallery on variant selection.<\/li>\n<li>Smart Inventory UX with out-of-stock dimming and auto-select.<\/li>\n<li>Conditional asset loading (product and shop pages only).<\/li>\n<li>Full ARIA accessibility support.<\/li>\n<li>Variation direct links (URL query parameter pre-selection).<\/li>\n<li>Developer hooks: <code>chiseikoessw_swatch_types<\/code>, <code>chiseikoessw_swatch_button_classes<\/code>, <code>chiseikoessw_swatch_button_html<\/code>, <code>chiseikoessw_swatch_group_html<\/code>, <code>chiseikoessw_render_loop_swatches<\/code>, plus action hooks.<\/li>\n<\/ul>","raw_excerpt":"Turn WooCommerce variation dropdowns into clickable color, image, text &amp; button swatches on product and shop pages. Sell more variations, fast.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/331893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=331893"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/chiseiko"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=331893"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=331893"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=331893"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=331893"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=331893"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=331893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}