WooCommerce 商品上架流程

最近又是因為工作關係,開始在研究 WordPress 的購物車外掛以及相關的佈景主題,還記得以前購物車是我完全不碰的東西 (因為要接金流神馬的真的很麻煩),不過很感謝公司讓我有機會學到 WooCommerce 這個插件。

雖然 WooCommerce 有支援繁體中文,但部份文字還是英文,所以還是特別紀錄一下商品的上架流程,也許之後會寫成一篇系列文(?)也說不定 (這傢伙又在亂開支票了)。

單一商品的 DEMO

以 Mercor theme 為例,這是單一商品的展示頁面:

可以看到 Mercor 的規劃蠻完整的,不管是圖片的展示,或是價格(含特價)、商品的尺寸選擇、介紹… 等等都有做到,果然是個成熟的購物車(淚。
而 Mercor theme 可以完整的跟 WooCommerce 整合,所以所有的內容編輯都能在後台選單:「商品」→「添加商品」裡完成。

商品上架 – 商品資訊

Step.1
進入 WordPress 後台,選擇「商品」→「添加商品」

Step.2
輸入商品名稱與商品介紹,

內容會出現在附圖的(1) & (2):

商品上架 – 商品圖片(續)

Step.3
在「Product Gallery」以及「特色圖片」的欄位,選擇商品圖片。

(3)會出現在商品單一頁面的商品圖片上,如果上傳多張圖片,會利用 Lightbox 以及輪播方式秀圖。

至於(4)特色圖片只能選一張上傳,他會出現在商品列表的縮圖。
像我在首頁有加入商品列表的欄位,所以進入網站首頁,就可以看到這些商品,圖片則是取自特色圖片欄位喔。
▼ 首頁 DEMO

插播:Product Data 功能

在介紹商品右邊區塊、紅框處的部份前,先插播介紹「Product Data」欄位裡的所有功能。
因為這部份的設定幾乎都在「Product Data」裏面,而我覺得這也是上架商品裡,最複雜的一部分。

「Product Data」旁邊有個下拉選單,可以讓你選擇商品的類型,會依照你的選擇吐給你不同的設定。如果只是要單純的寫上價錢,沒有任何多餘的選項,可以選擇「simple product」即可。
而我提供的範例,除有價格,還有尺寸跟類型要讓消費者選擇,要打上這些資料,必須選擇「Variable product」做設定喔。所以就讓我們選「Variable product」吧!!
(我下載的 WooCommerce 版本中文化並不完全,所以會有中英交雜的情況,因此在說明的時候,也會跟著中英交雜)

    • General: 輸入商品的 SKU

    • Inventory:可以用來控管商品的庫存,要啟用這功能,請勾選「Manage stock?」,就可以輸入目前的庫存數量

    • 運送方式:選擇商品的運送方式(海運/空運/宅急便/郵局掛號…等等),這邊的選項是讓管理者自由新增,新增的位置在選單的「商品」→「運送課別」裡。

    • Linked Products:「Up-Sells」類似「你可能會喜歡的商品」列表,可以在這邊放上跟原商品有關聯的項目,可以直接用標題搜尋;「Cross-Sells」是當消費者將該商品放入購物車之後,會在購物車看到的推荐商品。

可以直接輸入標題,系統會自動幫忙搜尋符合的商品:

    • Attributes:出現在商品的其他資訊區塊,就像是商品的規格(spec)

    • Advanced:可以輸入一些進階的設定,像是購買後的提醒、是否要開啟商品評論…等等
    • 變化類型:這邊就是用來設定價錢和進階的尺寸選項。

商品上架 – 商品價格、簡述與其他資訊(續)

繼續介紹商品右邊區塊、紅框處的部份。

Step.1
選擇「Product Data」→ 「變化類型」。

Step.2
點選「添加變化類型」的按鈕。

Step.3
紅框處的部份就是填寫價格的地方,可以寫上原價以及促銷價格,也可以設定促銷價格的時間。

其他欄位如果留白,就是按照 Product Data 最初的設定,所以建議大家留白就好。也可以看他的 tips 就知道欄位是做什麼用的。

Step.4
再來商品簡述的部份,可以看到紅框處有個「I want play a game!」的簡短介紹,讓我們來看看這個功能在哪吧!
商品簡述在「Product Data」欄位下面的「Product Short Description」:

這邊跟 WordPress 文章編輯器一樣,都可以用一些 HTML code 做編輯。

Step.5
最後是商品的其他資訊,以範例來看就是「Size」,「Genre」… 等等,這部份又要再回到 Product Data 做設定囉。
請點選「Product Data」→「Atrributes」,右邊的下拉選單有一些預設的規格可以選擇,選擇「Size」按下「Add」按鈕,就會出現 Size 的更多相關設定。

(1) 「Values(s)」可以讓我們自由輸入數值,可以選擇他預設的,也可以點選「Add new」自行新增。

(2) 「Visible on the product page」:會出現在其他資訊的標籤頁

(2) 「Used for variations」:會出現在商品頁面,圖片右側的地方

※ 特別注意:這邊的所有變動,記得要按下「Save attributes」才會儲存喔!

以上,這些功能都搞懂了,就可以上架商品囉 =)
至於 WordPress 既有的「分類」、「標籤」…等功能,我想大家應該都很熟悉了,這邊就不再另外說明了。

關於 WooCommerce 商品上架的部份,有任何問題或是看不懂的地方,都歡迎留言給我喔!

You may also like...

31 Responses

  1. moon 說道:

    你好,

    我老闆想我在現有公司網站上加裝woocommerce,但我對這個插件一點也不熟識,雖然看了woo的網站資料,仍感到一頭霧水似的,現有下列問題想請教:

    1. 是否要先購買他們插件和theme才能測試?
    2. 不用他們的theme,用公司現有的theme可以裝購物車供能嗎?
    3. 已有paypal戶口作為收款用,woocommerce收款功能要另外購買還是可以原用我們自己的paypal戶口呢?

    謝謝您
    moon

  2. guest 說道:

    i want "to" play a game.
    lost this >> to.

    :p

  3. moon 說道:

    你好 muki,

    謝謝你的回覆。

    我下載並啟用了,但在TOP MEUN位置並沒有出現WOO的購物車選單,
    請問怎樣設計呢?

    moon

  4. 李明軒 說道:

    請問該如何結合國內金流? 串接上是否很棘手?

    • muki 說道:

      目前就我所知,國內可以跟綠界買 plugin 串,他們有出 wordpress 的 plugin 專門在串金流。

  5. jax 說道:

    請問muki美女, WooCommerce 有辦法使用驗證信箱功能嗎? 註冊時傳一封驗證信過去驗證

    • muki 說道:

      我沒測試到這塊耶,冏
      現在我手上沒有 WooCommerce 可以測試,我下次有機會幫你測看看

  6. entry 說道:

    信箱驗證~很像WordPress現有註冊頁面(wp-login.php?action=register)密碼寄送,
    這也跟佈景主題相關!
    有些主題也把登入跟註冊使用模板包起來,
    這就要細看code才知道.

  7. a-tone 說道:

    不好意思 最近在創業 也選了用WORDPRESS來架站以及使用MERCOR當佈景
    有一個小問題就是當用VARIABLE PRODUCT時 在還沒點進去商品時 商品右下角會有一個灰色的框框寫著"選擇選項"
    請問muki知道怎麼讓它消失嗎? 謝謝><

  8. a-tone 說道:

    就像你上面的首頁DEMO 那個頁面不是有六個商品嗎
    紅框框起來的那個就有選擇選項
    我在想是不是因為選VARIABLE PRODUCT就會有這個
    假如選SIMPLE PRODUCT就沒有 不知道有沒有辦法修改~~

    • muki 說道:

      喔喔,我看到了,沒錯,如果你選了變數的話,他會「貼心」的幫你在預覽商品的時候,就先把選項秀出來。至於能不能改,我還要再研究一下,因為這案子已經結束了,我手上沒有佈景可以測試 XDDD

  9. Jimmy 說道:

    Muki 我有齊所有WooCommerce 所有要錢的Plugin :)
    需要的話可以聯絡一下 :D

  10. Pirate 說道:

    請問一下 商品介紹頁的 ( 商品資訊<其他資訊<Reviews < SHARE IT) 的樣式要怎麼修改出來@@?

    • Pirate 說道:

      黑底的白字橫格式的樣式@@

    • muki 說道:

      那個是該佈景原本就有提供的樣式唷。
      你可以搜尋 wordpress social plugin 之類的關鍵字去找有沒有適合的外掛,或是自己修改佈景主題新增。

  11. Pirate 說道:

    不好意思,我也是使用 Mercor 這個佈景,but 套上佈景後(匯入XML檔) ,出來的樣式如下

    。商品資訊
    。其他資訊
    。Reviews

    是還缺少什麼步驟嗎@@? 不好意思打擾到您

  12. WILSON 說道:

    您好~
    向您請教幾個問題~

    1.我是使用YOOTHEME的免費模版幫朋友架設WRODPRESS
    http://hotrock.com.tw/商品/attractor
    但是卻發現,產品內頁沒有"顯示庫存量"以及"加入購物車"的按鈕
    (使用WooCommerce提供的免費模版則會出現)
    是否因為YOTHEME支援不足,或是哪裡沒有設定到?!

    2.會選擇YOOTHEME是因為WooCommerce的免費模版只允許控制側邊欄,其餘區塊均無法自行控制,請問付費版WooCommerce也是這樣嗎? 是否有可以控制版面區塊的模版又可以相容WooCommerce的可以推薦(如是免費當然最好,付費的也可考慮)

    不好意思問題有點多,謝謝~

  13. DIng 說道:

    你好不知道为什么图片看不到…

  14. smart 說道:

    这个woo 没有商品详情?只有简短的

  15. Your tell you includes a great “Enable" mouse, which coul ios app store optimization d allow for people #%@%otop&@1@131abc2087wy toquickly switch on your Automated Downloads element regarding Huge batch Lion. Then again, while in the latest pre-release assemble, your element just isn’t yetoperating appropriately, when applicat

  16. King’s Empire Hack for Android, iPhone, empire & allies gold hack iPad. King’s Empire Hack generates unlimited Gold, Gems, Stone, Iron and Energy! Fins the most practical kings empire gem cheat online and become a top player! ,empire & allies gold hack;

  17. Imp pp store aso rove your Discoverability in App Store’s Search Results and Drive More Organic Traffic. Offering professional service of optimizing keywords, description,pp store aso, icon and more. The Ultimate App Store aso solution will make your app rank top, and attract more traffic!

  18. lucas 說道:

    只有在IE 的瀏覽器才看得產品的照片
    有方法修正嗎?
    我用Avada theme 的

  19. lucas 說道:

    只有在IE 的瀏覽器才看得產品的照片
    有方法修正嗎?
    我用Avada theme 的
    謝謝

  20. sbf688 說道:

    站长写得真是非常好,我要让我的同伙也瞧瞧这篇风趣的文章内容。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>