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

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

觀眾留言:

觀眾提問

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

WordPress WooCommerce 可變商品設定教學|如何設定不同的衣服的尺寸和顏色

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

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


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

新增可變商品

第 1 步

在 WordPress 後台,點擊左欄的「商品」

image 13

第 2 步

點擊「新增」

image 14

第 3 步

輸入商品名稱

image 15

第 4 步

點開選單

image 16

第 5 步

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

image 17

新增尺寸

第 6 步

點擊「屬性」

image 18

第 7 步

選擇「自訂商品屬性」

image 19

第 8 步

點擊「新增」

image 20

第 9 步

名稱輸入「尺寸」

image 21

第 10 步

在數值輸入尺寸,如: S、M、L,並用「 | 」隔開

直接複製 👇

S | M | L

第 11 步

勾選「用於變化類型」

勾選「用於變化類型」

第 12 步

點擊「儲存屬性」

點擊「儲存屬性」

新增顏色

第 13 步

點擊「新增」

image 25

第 14 步

在名稱輸入「顏色」

image 26

第 15 步

在數值輸入顏色,如:白色 (素色)、綠色 (圖案),並用「 | 」隔開。

直接複製 👇

白色 (素色) | 綠色 (圖案)

在數值輸入顏色

第 16 步

勾選「用於變化類型」

image 28

第 17 步

點擊「儲存屬性」

image 29

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

第 18 步

連結點擊「變化類型」

image 30

第 19 步

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

image 31

第 20 步

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

image 32

第 21 步

點擊「送出」

image 33

第 22 步

點擊「確定」

image 34

第 23 步

再點擊「確定」

image 35

設定商品圖片與價格

第 24 步

點開想編輯的商品

點開想編輯的商品

第 25 步

點「上傳圖片」

image 37

第 26 步

選擇要上傳的商品圖片

image 38

第 27 步

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

image 39

第 28 步

輸入價格,如 $390

輸入價格,如 $390

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

✏️ 小筆記

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

第 29 步

商品都設定好了之後,點擊「儲存設定」

image 40

設定預設顯示的商品圖片

第 30 步

點開尺寸選單

image 41

第 31 步

設定預設尺寸

image 42

第 32 步

點開顏色選單

image 43

33. 選擇預設顏色

image 44

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

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

設定彙整頁面的商品圖片

第 34 步

點擊「設定商品圖片」

image 45

第 35 步

上傳商品圖片

image 46

第 36 步

點擊「設定商品圖片」

image 47

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

圖片會顯示在商品頁面

發佈可變商品

第 37 步

點擊「發佈」

image 48

成果展示

第 38 步

點擊「預覽變更」

image 49

這是預設商品的樣子。

預設商品圖片

第 39 步

選取其他商品

選取其他商品

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

白T

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

⭐️ 延伸閱讀

WordPress 購物網站教學的封面

WordPress 購物網站教學
自己架設 WooCommerce 電商網站賣東西