重點整理
WooSwatches 是付費外掛，可把 WooCommerce 可變商品預設的下拉式規格選單，改成顏色色塊、圖片或文字按鈕，點選圖片規格時會切換到對應商品圖。本文示範外掛設定與三種顯示方式。
WooSwatches 是一款 WooCommerce 的延伸功能外掛，是由 WooMatrix 所開發，主要用途是在變更 WooCommerce 單一可變產品頁面上屬性變化類型的顯示方式，可以將預設為下拉式選單的選擇產品規格，變更為以顏色、圖片、或者文字顯示，讓顧客在挑選產品時可以使用更加直覺的方式來做產品比較與挑選，另一方面，也可以避免到下拉式選單在每個瀏覽器都呈現不同樣式的問題。
就筆者建立購物網站的經驗來說，WooSwatches 的功能可以讓單頁產品的樣式修改為讓台灣人更容易接受的操作方式，尤其是將屬性用圖片顯示，點擊小圖後左方的產品圖片會自動切換到大圖，如此對於較為複雜的產品能夠起到讓資訊更直觀的作用，因此特別寫了這篇教學，希望能將這個實用的 WooCommerce 外掛推薦給大家。
注意事項：本篇教學所介紹的是 WordPress 付費外掛，如果要使用本篇文章所說明的功能，必須要自行按照上方提供的連結購買下載並安裝在網站上，鵠學苑本身也是自行購買使用才寫出此篇教學，如果你選擇購買外掛，鵠學苑不會得到任何分潤或費用，也沒有為此外掛做任何背書與保證。
WooSwatches外掛設定與操作方式
第一步：進購買外掛後將下載檔案解壓縮，找到 Plugin 資料夾後將 woocommerce-colororimage-variation-select.zip 壓縮黨上傳並安裝，完成後在已安裝外掛列表中可以找到設定外掛的連結。
第二步：在 WooCommerce 下拉式選單的設定中也可以找到WooSwatches設定的頁面。
第三步：基本上所有的設定都可以先使用預設，只有特殊需求才有需要做修改，大部分的選項都不難理解，這裡只說明比較特殊選項：
- Shop swatches location：產品彙整頁中屬性顯示的位置（商店頁），可指定顯示在相對標題、價格的位置。
- Shop hover image size：產品彙整頁中當滑鼠游標指向到圖時，懸浮變化的圖片大小（前提是要設定懸浮的圖片）。
- Unavailable options behavior：是否要顯示無效的屬性，建議選擇 Default 即可。
第四步：到商品、屬性中設定個別項目的內容，當然，前提是要先建立屬性，操作請參考此篇教學文章：WooCommerce 商品設定 – 資料欄位說明與可變商品建立
第五步：在單一屬性編輯畫面的最下會有一個 Display Type ，首先選擇 Color ，下方會出現可以選擇色碼的位置。
第六步：選擇 image 則需要點擊 upload 到媒體庫選擇或上傳圖片，之後屬性就會顯示所選擇的圖片。
第七步：如果選擇 Text Block ，可以自訂這個屬性在產品單頁要顯示怎樣的文字內容。
第八步：到單一產品的商品資料欄位，左邊選擇屬性，在下拉選單中選擇剛剛修改的屬性所在的群組名稱，以本篇文章建立的範例來說，要選擇顏色。
左邊兩項都要勾選，這是顯示屬性的基本項目，數值的部分選擇要顯示的商品屬性，以範例來說，筆者設定白、棕、藍三種顏色，依次選擇即可。
第九步：切換到變化類型，選擇 “ 由所有屬性建立變化類型 ” ，送出後跳出的視窗點選確定。
新增後每一個變化類型都一定要設定價格。
第十步：最後點擊左方WooSwatches，Display Type 選擇如下圖所示，記得點選更新商品頁的按鈕。
完成後就會如下圖影片顯示，因為筆者把棕、白、藍三種屬性都選擇以圖片顯示，因此在屬性的部分就會取代原本 WooCommerce 下拉選單，變成並排單選的縮圖。
WooSwatches商品屬性文字、顏色顯示方式
第一步：在單一產品中將所有變化屬性的 Display Type 更改為顏色，下面的 Swatch Color 要記得重複第一小節第五步驟的操作，才會顯示色碼。
第二步：下圖示選擇以顏色顯示時所呈現的樣式。
第三步：選擇以文字區域顯示，下方的 Text 可以在單一產品中自訂，也可以使用屬性裡面設定的文字。
第四步：下方是顯示文字區域屬性的樣式，選擇的顏色與標籤背景色預設是套用網站主題的設定，如果要更改會需要用到 CSS 。
選擇規格色塊外掛要注意什麼？
規格色塊外掛會直接影響商品頁的購買流程，挑選與設定時注意：
- 維護狀況：看最後更新日期、相容的 WooCommerce 版本與支援論壇回覆情況。
- 屬性設定方式：色塊多半設定在「商品 › 屬性」的全域屬性上，自訂商品屬性不一定支援。
- 缺貨規格的顯示：確認缺貨組合會被標示或隱藏，避免顧客選到買不到的規格。
- 手機操作：色塊大小要好點選，選中狀態要清楚。
- 換外掛的成本：各外掛儲存色碼與圖片的方式不同，換外掛時可能要重新設定每個屬性值。
常見問題
WooSwatches 現在還能買嗎？
無法確定。原開發者 WooMatrix 的 CodeCanyon 帳號已轉到其他名稱，官方說明網站的網域也已變成待售頁面，2026 年 10 月未能確認商品是否仍在販售。新網站建議先找仍持續維護的規格色塊外掛。
WooCommerce 規格選單可以不裝外掛改成色塊嗎？
WooCommerce 預設只提供下拉式選單，要改成顏色色塊、圖片或文字按鈕，通常需要安裝規格色塊外掛。在 WordPress 外掛目錄搜尋 variation swatches 可以找到不少免費版本。
已經在用 WooSwatches，需要換掉嗎？
如果外掛已長期沒有更新，建議找時間評估替換。停止維護的外掛可能與新版 WooCommerce 不相容，也不會再修補安全漏洞；替換前先在測試網站確認新外掛能沿用既有的商品屬性設定。
結語
WooSwatches雖然說可以更改屬性呈現方式，但對於屬性群組太多的產品，筆者不太建議使用，除非你的主機規格足夠，否則很容易會拖慢網站載入的速度，另外如果你的網站 WooCommerce 的程式碼部分有做客製化，建議不要自行安裝，可以找熟悉 WordPress 架站的網站設計公司協助，比較不容易發生相容性的問題。