如何在 WordPress WooCommerce 設定衣服尺寸和顏色 (可變商品)？

有觀眾在我製作的免費《WordPress 購物網站架設教學》影片底下留言，想知道要怎麼設定商品的尺寸與顏色。

觀眾留言：

如果你偏好用影片學習，歡迎觀看下面的 YouTube 影片。

如果你喜歡透過圖文學習，請繼續往下閱讀吧 ！

圖文版會比較詳細、方便快速瀏覽，還會持續更新與補充內容。

以下是在 WordPress 網站中 (使用 WooCommerce 電商外掛)， 設定衣服尺寸和顏色的詳細步驟！

新增可變商品

1. 在 WordPress 後台，點擊左欄的「商品」

2. 點擊「新增」

3. 輸入商品名稱

4. 點開選單

5. 「簡單商品」改成「可變商品」

新增尺寸

6. 點擊「屬性」

7. 選擇「自訂商品屬性」

8. 點擊「新增」

9. 名稱輸入「尺寸」

10. 在數值輸入尺寸，如： S、M、L，並用「 | 」隔開
直接複製 👉  S | M | L

11. 勾選「用於變化類型」

12. 點擊「儲存屬性」

新增顏色

13. 點擊「新增」

14. 在名稱輸入「顏色」

15. 在數值輸入顏色，如：白色 (素色)、綠色 (圖案)，並用「 | 」隔開
直接複製 👉 白色 (素色) | 綠色 (圖案)

16. 勾選「用於變化類型」

17. 點擊「儲存屬性」

設定變化類型 (不同尺寸搭配不同顏色)

18. 連結點擊「變化類型」

19. 點開「新增變化類型」選單

20. 選擇「由所有屬性建立變化類型」

21. 點擊「送出」

22. 點擊「確定」

23. 再點擊「確定」

設定商品圖片與價格

24. 點開想編輯的商品

25. 點「上傳圖片」

26. 選擇要上傳的商品圖片

27. 點擊「設定變化類型圖片」

28. 輸入價格，如 $390

📝 每個變化商品都可以設定不同的圖片跟價格 (每樣都必須手動設定)

29. 商品都設定好了之後，點擊「儲存設定」

設定預設顯示的商品圖片

30. 點開尺寸選單

31. 設定預設尺寸

32. 點開顏色選單

33. 選擇預設顏色

📝 設定好之後，客人點擊商品後，會顯示預設的尺寸、顏色

設定彙整頁面的商品圖片

34. 點擊「設定商品圖片」

35. 上傳商品圖片

36. 點擊「設定商品圖片」

📝 這張圖片會顯示在商品頁面

發佈可變商品

37. 點擊「發佈」

成果展示

38. 點擊「預覽變更」

📝 這是預設商品

39. 選取其他商品

📝 這是選擇的商品，價格跟圖片會依照我們的設定做正確的顯示

📝 這樣我們就設定好有不同「尺寸」、「顏色」的商品了！🎉