【WooCommerce教學系列】商品資料設定- 可變商品 操作說明
WooCommerce教學系列 可變商品設定

【WooCommerce教學系列】商品資料設定- 可變商品 操作說明

文章最後更新日期 2021 年 5 月 7 日

歡迎來到 WooCommerce教學 系列,今天要來介紹的是 商品資料設定中的「可變商品」(Variable Product)

「可變商品」是 WooCommerce 商品中的一種商品類型型態,可以讓你用來更進階的自訂商品屬性,這個功能適用於同商品中有尺寸、顏色、款式不同規格的商品等等(例如服飾業),並且可以依照每個商品規格都可以個別設定價格、圖片,非常的好用,接下來站長就開始逐步的教您如何操作可變商品的設定。

WooCommerce外掛下載:https://wordpress.org/plugins/woocommerce/

一、新增 WooCommerce 可變商品

要建立 WooCommerce 可變商品之前,需要先新增商品 或是 編輯現有商品

進入商品頁後,再從「商品資料」的地方選擇「變化類型」

WooCommerce可變商品設定
WooCommerce可變商品設定

二、WooCommerce 自訂可變商品屬性

2-1、新增商品屬性

要新增可變商品之前,需要先新增「商品屬性」,例如 顏色、尺寸等

使用全站屬性

  1. 點選「屬性」頁籤
  2. 點選「新增」按鈕(可新增多種屬性)
  3. 輸入「名稱」(如顏色、尺寸、材質等)
  4. 輸入「數值內容」,使用 “|” 來做為規格的區分
  5. 勾選「用於變化類型」
  6. 按下「儲存屬性」按鈕
WooCommerce可變商品設定教學

商品屬性可以新增多種屬性共存,例如尺寸+款式+顏色等

WooCommerce可變商品教學-屬性設定
WooCommerce可變商品教學-屬性設定

2-2、新增變化類型

建立所有的變化類型

step 1

點選商品資料左方的「變化類型」,再選擇「由所有屬性建立變化類型」,接著按下「送出」按鈕

WooCommerce可變商品教學-由所有屬性建立變化類型

step 2

按下「送出」按鈕之後,會出現下方的訊息,這裡我們按下「確認」按鈕

【WooCommerce教學系列】商品資料設定- 可變商品 操作說明

step 3

這裡會依你所新增的變化類型項目而顯示有多少個變化類型已新增,按下確定按鈕

【WooCommerce教學系列】商品資料設定- 可變商品 操作說明

step 4

按下之後就可以看到「變化類型」區域多了多種商品組合按鈕類型

這個步驟中,如果你新增 兩個屬性,如顏色(紅色和綠色的值) 及 尺寸(大、中、小的值),則會建立六種的組合變化,分別是

  • 紅色 + 大
  • 紅色 + 中
  • 紅色 + 小
  • 綠色 + 大
  • 綠色 + 中
  • 綠色 + 小

由於因為站長在「屬性」的地方,新增3個顏色、1個尺寸,所以這裡會列出3種商品變化組合

WooCommerce可變商品教學-由所有屬性建立變化類型設定
WooCommerce可變商品教學-由所有屬性建立變化類型設定

註:如果之後新增了其他屬性,就需要重做變化類型設定,才能正常運作唷

step 5

接下來要做商品變化類型每個項目中的商品設定,滑到商品的項目中,點選 下三角形 展開這個商品的設定

WooCommerce可變商品教學-由所有屬性建立變化類型設定
WooCommerce可變商品教學-由所有屬性建立變化類型設定

step 6

展開之後就可以看到這個商品的個別設定

  • 商品圖片:上傳商品的圖片,如果屬性是紅色,就上傳紅色衣服
  • 貨號:輸入商品的貨號,貨號會對應到庫存,輸入一個唯一貨號或留空白
  • 啟用:要啟用或禁用這個變化類型
  • 可下載:如果商品是可下載檔案的類型就勾選
  • 虛擬:如果這個商品不需要物流運送的話,勾選後就不會顯示運送類別(如電子書、影片、檔案)
  • 管理庫存:如果要單獨管理這個變化類型的商品庫存,就勾選
  • 定價:這個商品變化類型的的價格
  • 折扣價:這個商品變化類型的折扣價格
  • 庫存狀態:這個商品 目前的庫存狀態,會在網站前台中顯示
  • 重量:設定這個商品的重量,為選填欄位
  • 尺寸:這個商品的長、寬、高尺寸,為選填欄位
  • 運送類別:通常會與主商品一樣,所以選擇與上層相同(預設值)
  • 稅率類別:通常會與主商品一樣,所以選擇與上層相同(預設值)
  • 描述:這個商品變化類型的簡單說明

註:可變商品的變化類型價格一定要填寫,不然不會出現在商品的頁面上

WooCommerce可變商品教學-由所有屬性建立變化類型商品內容設定

針對商品建立變化類型

若是商品不想有太多的可變屬性組合,也可以個別針對商品來做商品屬性設定

step 1

在下拉選單的地方 選擇「新增變化類型」,接著按下「送出」

針對商品手動建立商品類型
針對商品手動建立商品類型

step 2

接著會出現 「屬性」中有的欄位類型,再手動針對商品做變化類型就可以了

針對商品手動建立商品類型 - -屬性設定
針對商品手動建立商品類型 – -屬性設定

三、訪客看到的可變商品前台樣式

完成設定後,前台的可變商品頁面參考,就會多了 「商品屬性」的選擇,並且點選不同屬性還會顯示不同的商品圖片

可變商品範例網站

WooCommerce可變商品教學-可變商品完成後的前台展示參考
WooCommerce可變商品教學-可變商品完成後的前台展示參考

四、10款常用電商外掛推薦

  1. Subscription– 在網站中增加月費訂閱的功能,通常用在服務類型商品
  2. WishList – 讓客戶可以將商品放入願望清單,之後再購買
  3. Request a quote – 讓客戶可以針對商品做詢價
  4. Points and rewards – 網站增加紅利點數兌換機制
  5. Role based prices – 根據不同會員等級,顯示不同的商品價格
  6. Dynamic pricing and discounts – 通過動態折扣和價格規則來增加轉化次數,並建立有針對性的報價
  7. Product bundles – 在商店中建立特別商品組合優惠
  8. Added to cart popup – 當客戶購買商品時顯示彈出視窗提醒
  9. Composite products – 提供讓客戶可以自由組合而成的商品,一般用來做客製化商品,常用在電腦、運動器材等客製規格組合
  10. Frequently bought together – 可以設定經常一起購買的商品,讓客戶可以更快速選擇,例如衣服+褲子 +配件

五、結論

WooCommerce的可變商品 功能是電商網站很常用來展示商品的一個功能,雖然設定上有點小複雜,不過當上手之後,自然會非常快速、好用且好管理



若是有網頁設計的需求,也可以透過「聯絡表單」或是「線上客服」的方式與我們聯繫, 我們也有提供一對一教學及顧問服務,有需求的話也都可以跟我們聯絡唷

如果對 WordPress架站 有興趣的朋友,可以訂閱馬思特電子報或是按讚追蹤馬思特粉絲頁,我們將不定時發佈 WordPress網站 及 網頁設計相關文章。

歡迎加入社團:「WordPres網站架設 / 網頁設計接案 / 部落格經營 / 網路行銷 」,主題是討論網站架設、部落格經營、網路行銷,有興趣的朋友也歡迎加入社團一同交流

更多實用文章推薦

馬思特

12年以上網站架設與網路行銷的經驗,架設過的網站已有上百個,製作過形象網站、購物網站、會員網站、課程平台網站,希望將多年來的網站經營經驗技巧分享給你,有任何問題也歡迎來訊聊聊

發佈留言