WooCommerce 系列教學 (2/3):商品上架流程

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

從後台的「商品」➡️「新增商品」就可以添加各式各樣的商品了。如果你已經習慣 WordPress 的作業模式,你會很開心地發現商品跟文章的格式幾乎有九成像,不管是標題、分類、標籤,商品(特色)圖片,都可以很快地進入狀況!

所以在此我只會特別說明商品資料(Product Data) 的部分,這個也是大家在設定的時候,比較容易碰到的問題。

小補充:商品簡短說明

「新增商品」的最下面有一個「商品簡短說明」,在這邊輸入的文字,會出現在前台商品頁面的右上方喔。

當然,具體的位置還是要視你使用的佈景主題而定,不過國外的佈景主題設定幾乎都是在右上方無誤。

小補充:商品圖庫

在商品圖庫的地方,如果你一次上傳多張照片,他會利用 Lightbox 以及輪播方式秀圖。


商品資料

商品資料可以這麼看,先選擇(1)的下拉式選單,再點選(2)的各個設定,最後在(3)填入各種商品資料。

1.商品類型

WooCommerce 目前提供了四種商品類型:簡單商品、組合商品、外部/加盟商品、可變商品,簡單解說如下:

  • 簡單商品:商品只有一種款式、一種價格,顧客直接點選加入購物車即可。
  • 組合商品:附屬在其他商品底下,不會有自己的價格 (這個我從來沒用過)。
  • 外部/加盟商品:純粹介紹商品,如果要購買會連到外部網站。
  • 可變商品:一個商品頁面可以有很多種款式(例如 S, M, L 尺寸),對應不同的款式可以設定價格、庫存,與圖片。

2.商品設定

可變商品的功能是最為複雜,也較為完善,所以我用「可變商品」作為圖例,介紹給大家。

  • 一般:這個應該不用多作解釋,裡面只有「貨號」(SKU name)一個欄位,請填上不重複的貨號吧。
  • 庫存:
    可以勾選「庫存管理」以設定庫存,但如果是用可變商品,這邊可以不用寫,因為我們之後還需要分別設定各種款式的庫存。
    單獨出售的部分,就是照字面的意思解讀啦!如果你希望顧客一次只能買一件這個商品,就把他勾起來囉!
  • 運送方式:可以填寫產品的重量與尺寸,「運送級距」則是可以再給產品設定額外的運費,請看下面的介紹。

🔯🔯 運送級距介紹 🔯🔯

⬇️ 先在後台「商品」➡️「運送級距」的選單裡,設定額外的運費

⬇️ 接著在「WooCommerce」➡️「設定」➡️「運送方式」➡️「單一費率」,找到「運送級距費用」的欄位。你會發現我們剛剛設定的「大尺寸」出現在這了。我在這邊設定,只要有使用大尺寸的運送級距,運費都會額外增加 100 元。

⬇️ 回到商品設定的地方,可以設定這個商品的運送級距為大尺寸

⬇️ 如此一來,只要我們購買這個商品,運費就會自動再加上 100 元(原本的運費是 40 元)。


  • 連結商品:推薦型跟交叉型,都是可以讓顧客在購物時看到更多的商品。可以將滑鼠移到框框後面的問號看他的解釋,因為設定很容易所以就不多談了。分組我自己沒用過,所以先跳過😓
  • 屬性跟變化類型,是可變商品的精華部分,請直接看以下圖解

屬性

在購買產品時,可能曾經看過產品的規格,如下圖:

⬇️ 這些資料都是在屬性裡面設定的,記得要選擇「在商品頁面中可見」,才會出現在商品頁面裡:

如果你的商品資料是「可變商品」的話,你會發現「在商品頁面中可見」的文字下面,還有一個「用於變化類型」。這個就是讓我們設定,根據不同款式顯示不同的庫存、價格與圖片的重要選項唷!

⬇️ 範例可以參考我的寫法:
如果不需要讓這些款式出現在產品規格上,就不要勾選「在商品頁面中可見」的選項。
每一個數值都請用|做分隔,寫在同一行或是換行都可以。

⬇️ 寫完之後記得按下儲存,然後再切到「變化類型」的分頁,並選擇「由所有屬性建立變化類型」。

送出之後,你剛剛新增的那四個數值,就會出現在畫面上了!

變化類型

每一個屬性都是一個變化類型,舉例來說,我這邊有四個款式讓顧客選擇,所以我可以單獨為這四個款式,設定圖片、價錢、庫存等資訊。

⬇️ 回到前頭,就可以跟各大購物網站一樣,選擇單一產品的各種款式囉~

⚠ 特別記住一點,所有的東西修改後,都必須按下該分頁內的「儲存變更」,這樣檔案才會存進去喔!


上架流程先到此告一段落,有沒有發現上架一點都不難,只要把可變商品搞懂,就可以做出很棒的變化囉!希望大家都能順利上架商品 🙂

最後一個部分,我會告訴大家怎麼跟 AllPay 歐付寶串接,敬啟期待囉 😊


  • 小胖

    你好,我想請問一下,屬性當中的地方 有 商品說明 | 額外資訊 | 評論數 等三個頁籤 我想請問,如果想額外新增 比如說 “問與答" 或聯絡我們 之類的額外頁籤,也是從屬性設定嗎??

    • mukiwu

      woocommerce 本身沒有提供問與答的功能喔。
      但是我們可以在 WordPress 的頁面新增「聯絡我們」以及「問與答」的頁面,也許你可以嘗試這種方法 ^口^

      或者是找找有沒有類似的 Woocommerce 外掛,不過通常都要錢就是了

    • woocommerce 本身沒有提供問與答的功能喔。

      但是我們可以在 WordPress 的頁面新增「聯絡我們」以及「問與答」的頁面,也許你可以嘗試這種方法 ^口^

      或者是找找有沒有類似的 Woocommerce 外掛,不過通常都要錢就是了

    • GinnyHung

      請問會有什麼樣的外掛可以支援這樣的功能? 因為我也想新增額外的頁籤,謝謝您

  • 鍾小魚

    超感謝你的!終於會了~~