在競(jìng)爭(zhēng)激烈的電商環(huán)境中，提升產(chǎn)品展示的直觀性和美觀度，直接關(guān)系到用戶的購買決策。blocksy 2 主題推出的 變體色板（Variation Swatches） 功能，為WooCommerce商店帶來了全新的產(chǎn)品變體展示方式。通過顏色塊、按鈕、圖片等豐富的視覺選項(xiàng)，讓用戶能夠快速選擇心儀的產(chǎn)品組合，大幅提升購物體驗(yàn)。

什么是 Variation Swatches？

Variation Swatches 是將產(chǎn)品的變體（如顏色、尺寸、材質(zhì)）以視覺化的小圖標(biāo)或色塊展示在頁面上，取代傳統(tǒng)的下拉菜單。這種方式能讓購物者更加直觀、快捷地完成選擇。

支持的色板類型包括：

• 按鈕（Button）
• 單色或雙色色塊（Color or Dual Color）
• 圖片（Image）
• 混合色板（Color + Image）

blocksy 2 的變體色板系統(tǒng)與 WooCommerce 的原生屬性（Attributes）功能完美兼容，配置簡(jiǎn)便，無需額外插件支持。

? 提醒：Variation Swatches 模塊屬于 blocksy Pro 的 Shop Extra 擴(kuò)展，需 Professional 或 Agency 版本訂閱。

如何啟用變體色板功能？

啟用過程非常簡(jiǎn)單：

• 進(jìn)入 WordPress 后臺(tái)，點(diǎn)擊左側(cè)菜單中的 blocksy→ Extensions。

• 找到 Shop Extra 擴(kuò)展模塊，啟用其中的 Variation Swatches。

配置產(chǎn)品屬性（Attributes）

啟用模塊后，需要為產(chǎn)品屬性設(shè)置色板類型：

• 后臺(tái)選擇 產(chǎn)品 → 屬性。
• 新建或編輯現(xiàn)有屬性。

• 選擇對(duì)應(yīng)的色板類型（例如：圖片、顏色、按鈕）。

• 保存設(shè)置后，在屬性條目（Terms）中：
  • 圖片色板：上傳代表該變體的圖片。
  • 色塊色板：選擇一種或兩種顏色組合。
  • 可設(shè)置 Tooltip，增加無障礙輔助說明。

通過這種方式，可以輕松地將傳統(tǒng)的文字選項(xiàng)升級(jí)為生動(dòng)的視覺選擇器。

單個(gè)產(chǎn)品的個(gè)性化配置

如果某些產(chǎn)品需要特殊展示，blocksy 2 也允許在單個(gè)可變產(chǎn)品編輯界面中，單獨(dú)調(diào)整色板樣式。只需在產(chǎn)品編輯頁中找到新的 Swatches 設(shè)置選項(xiàng)，自定義每個(gè)變體的展示方式。

自定義器（Customizer）中的樣式優(yōu)化

為了確保前端展示美觀，blocksy 2 還提供了豐富的自定義選項(xiàng)：

• 進(jìn)入 外觀 → 自定義。
• 位置：WooCommerce → General → Variation Swatches。

• 可自定義：
  • 色板形狀（圓形或方形）
  • 色板大小
  • 色板間距
  • 產(chǎn)品列表頁是否顯示色板及數(shù)量限制

單個(gè)產(chǎn)品頁默認(rèn)展示變體色板，無需額外操作。

前端效果展示

啟用后，在產(chǎn)品列表頁和單個(gè)產(chǎn)品詳情頁中，用戶可以看到清晰、直觀的色板選擇器。色板不僅提升了視覺美感，也加速了購買決策。

特別是混合色板（Color + Image）的支持，讓產(chǎn)品展示更加豐富細(xì)膩，極大地增強(qiáng)了用戶的購物體驗(yàn)。

總結(jié)

借助 blocksy 2 的變體色板功能，WooCommerce 商店能夠輕松實(shí)現(xiàn)更專業(yè)、視覺吸引力更強(qiáng)的產(chǎn)品展示方式。無論是顏色、圖片還是自定義按鈕，blocksy 2 都為提升用戶體驗(yàn)和轉(zhuǎn)化率提供了強(qiáng)有力的支持。

最新文章

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息