[WordPress] 外掛分享： SwatchKit – Variation Swatches

內容簡介

SwatchKit 是一款專為 WooCommerce 設計的外掛，將變體下拉選單轉換為顏色、圖片和尺寸的樣本，確保顧客在購物時能清楚看到可用的選項，避免因為選擇不存在的組合而流失潛在客戶。

【主要功能】
• 將變體下拉選單轉換為顏色和圖片樣本
• 自動顯示庫存狀態，缺貨項目會被劃掉
• 無需 AJAX 請求，快速加載變體狀態

外掛標籤

開發者團隊

原文外掛簡介

Your customer picks Black, then XXL, and finds out at the cart that the combination was never made. They do not email you about it. They leave.
SwatchKit turns WooCommerce’s variation dropdowns into colour, image and size swatches — and keeps them honest, so what is sold out looks sold out and what does not exist cannot be clicked. On a product with 12 variations or 5,000.
👉 Try the live demo — click real swatches on a 1,200-variation product, change every setting, no install needed.
📖 Read the documentation
🎥 Watch it work in three minutes:

🎯 Why swatches stop being right (and why this one does not)
WooCommerce stops sending variation data to the browser once a product passes woocommerce_ajax_variation_threshold — 30 variations by default. After that, plugins that lean on that data cannot tell which combinations are out of stock, or which were never built. Every swatch looks available.
The usual advice is to raise the threshold. That pushes your entire variation table into the page and makes it slower for everyone.
SwatchKit does the opposite. When you save a product it builds a compact availability index — about 2.8KB gzipped for 1,200 variations — and the browser resolves state from it in under a millisecond, without asking the server anything.

❌ Sold out → crossed out
🚫 Never existed → greyed out and unclickable
⚡ No AJAX, no spinner, no threshold to raise

Free. At any variation count. No upgrade prompt.
🧬 Built on WooCommerce’s own data
WooCommerce 10.9 added a first-party Color/Image attribute type (wc-visual). SwatchKit reads and writes that same core term meta and mirrors it into its own keys, so nothing breaks if you switch the feature off.
Translation: your colours and images belong to your store, not to a plugin you are now stuck with. Everything core left out — size and label swatches, stock states, tooltips, shop-page swatches, per-product overrides, classic themes — SwatchKit adds on top.
Already using another swatch plugin? Tools → Import copies colours and images from GetWooPlugins, Brainstorm Force, RadiusTheme and WCBoost. It shows a preview before writing anything, never touches their data, and can be undone. 🔄
🎁 Free, and staying free
The things this category usually puts behind a licence:

🎨 Colour, image and size/label swatches — all three types, no limits
🛍️ Shop and category page swatches — picking one previews that variation’s image on the card and opens the product with it already selected
🖼️ Image swatches from your Media Library, with fill or fit cropping, hover zoom and image tooltips
🌈 Multi-colour swatches — two to four colours per term, for two-tones, stripes and marled fabrics
🪄 Colours from term names — a built-in table of 300+ names means an imported catalog shows colours before you set a single value
📦 Out-of-stock styles — cross out, blur, dim or hide, at any variation count
🎛️ Per-product type and shape overrides — circles here, pills there
⚙️ Quick view, AJAX load-more and infinite scroll — new forms are picked up automatically
🧩 Theme and page-builder compatibility — never a paid feature here

A separate Pro add-on is coming for shop-card add to cart and low-stock markers. Nothing on the list above will ever move into it.
⏱️ Set up in 60 seconds

Activate. Every variation dropdown is already a swatch. 🎉
Want real colours? Products → Attributes, set the attribute to Color or Image, edit its terms.
Want it to match your theme? WooCommerce → Swatches — shape, size, spacing, borders, tooltips, stock styles and shop cards, each with a live preview that uses your real storefront stylesheet.

Settings export to a file and import on your next site, so your second store takes a minute rather than twenty. 💾
⚡ Light, and quiet in your admin
The storefront bundle is dependency-free vanilla JavaScript: 3.9KB of JS and 1.9KB of CSS, gzipped, loaded only where swatches appear. Swatches render server-side at their final size, so nothing jumps while the page loads, and everything works behind a page cache.
No tracking. No outbound requests of any kind. No dashboard banners, no review nag, no greyed-out settings advertising an upgrade. The settings screen is the only place SwatchKit appears in your admin. 🤫
♿ Accessible by construction
Swatches are real elements in a role="radiogroup" with a roving tabindex, arrow-key and Home/End navigation, and a focus ring that survives theme resets. Stock state is conveyed in text, not colour alone, so a screen reader hears “Blue, out of stock”. The selected checkmark picks black or white from the swatch’s own luminance, and prefers-reduced-motion turns every transition off.
🧑‍💻 For developers

No WooCommerce template is ever overridden. SwatchKit filters woocommerce_dropdown_variation_attribute_options_html — the biggest source of theme conflicts, avoided structurally rather than patched.
The original stays in the DOM and remains the source of truth for submission. SwatchKit writes to it and dispatches a native change event, so WooCommerce’s own handlers run normally — which is why quick view, bundle and composite plugins work without vendor-specific hacks.
Everything visual is a CSS custom property on .swk-swatches. Restyle by redefining variables; there is no !important to fight.
Documented hooks, including swatchkit_swatch_html, swatchkit_swatch_classes, swatchkit_attribute_type, swatchkit_should_render, swatchkit_term_color, swatchkit_term_image_id, swatchkit_index_payload, swatchkit_settings, swatchkit_card_terms, swatchkit_card_placement, swatchkit_before_swatches and swatchkit_after_swatches.
Add-on API for registering swatch types and adding settings to the same schema-driven screen.
add_theme_support( 'swatchkit', array( 'stylesheet' => false ) ) to ship your own styles.
JS API: window.SwatchKit.refresh(), .on( event, callback ) and .version. Dispatch swatchkit:refresh on document after injecting your own markup.
Shortcode: [swatchkit product_id="123"] renders a product’s swatches anywhere — page builders, landing pages, custom grids.
Unminified JavaScript and SCSS ship in assets/; npm install && npm run build rebuilds build/.

Built by ModinaTheme. WordPress 6.2+, WooCommerce 8.0+, PHP 7.4+, HPOS compatible.

延伸相關外掛

WCBoost – Variation SwatchesWCBoost – Variation Swatches 是一款 WooCommerce 擴充外掛...PPOM – Product Addons & Custom Fields for WooCommercePPOM（Personalized Product Option Manager）是專為 WooComm...Show only lowest prices in variable products for WooCommerce此外掛專為 WooCommerce 設計，能夠簡化變數產品的價格顯示，...Woocommerce Ajax add to cart for variable products這個外掛可啟用可變商品讓使用者透過 Ajax 加入購物車的功能...Stock Locations for WooCommerceStock Locations for WooCommerce 可以協助您輕鬆管理產品的...Add Quantity Field on Shop Page for WooCommerce您想在 WooCommerce 商店頁面上添加數量欄位嗎？ 使用此外掛...WooCommerce – Replace the Variable Price range by the chosen variation price這個 WordPress 外掛可以在 WooCommerce 中使用，將變動價格...WooCommerce Direct Variation Link使用 get 變數直接連結至 WooCommerce 商品變體，例如：yours...Show Variations as Single Products for WooCommerceShow Variations as Single Products for WooCommerce 外掛讓...Frontend Product Editor for WooCommerceFrontend Product Editor for WooCommerce 允許使用者直接從...ReadyGo Variation Spreadsheet – Bulk Edit Product Variations for WooCommerceReadyGo Variation Spreadsheet 是一款專為 WooCommerce 設計...Yaxii Product WorkspaceYaxii Product Workspace 是一個專為 WooCommerce 設計的產品...VariMatrix — Variation Manager for WooCommerceVariMatrix 是一款專為 WooCommerce 設計的變體管理外掛，透...Bulk Edit Variation Prices for WooCommerce – VariantNinjaVariantNinja 是一款專為 WooCommerce 設計的外掛，能夠批量...Variation Swatches for WooCommerce – Color, Image & Label SwatchesVariation Swatches for WooCommerce 外掛將預設的下拉式變數...

文章

• 文章

Filter

Mastodon