WooCommerce教學:想要在網路上賺錢,從這裡開始!1 款你不能不知道的電子商務外掛!

Woocommerce教學

如果你…

  • 想要幫自己的品牌架設一個電商網站,但沒有超過15萬元的預算請工程師協助
  • 想要保有100%的商品利潤,不想被第三方電商平台抽手續費
  • 想要一個可以自己規劃、管理又可以帶來營收的電商網站

那你絕對不能不知道Woocommerce這款市占率最高的電子商務外掛!

讀完這篇「Woocommerce教學」,你將會了解如何在Woocommerce上架商品、設定金流&物流、發行促銷活動折價卷、客戶下單到出貨的完整流程、在Woocommerce後台管理訂單&客戶名單、分析銷售報表、Woocommerce後台的重要設定…等

而這篇「Woocommerce教學」主要著重在Woocommerce這款外掛的操作應用,一個好的電商網站還包括了網站的頁面規劃、行銷策略、數據分析…等,這些會在後續的「自架站系列文」獨立一篇文章做介紹。

那我們先來了解如何運用Woocommerce這款強大的電子商務外掛吧!

WooCommerce是什麼

Woocommerce基本介紹

Woocmmerce是Wordpress這個內容管理系統(CMS)中,最受歡迎的電子商務外掛

使用Woocommerce你的網站就有購物車功能,包括:上架販賣自家商品、設置金流物流系統、管理訂單、管理客戶名單、營收報表統計、數據分析…等

換句話說,安裝Woocommerce你就可以在網路上擁有一個自己的店面,而且還不用繳房租、水電費以及人事開銷

到目前為止(2021.04)已經擁有超過500萬的啟用安裝數

使用Wordpress架設網站的人,若需要在網站中增加購物車功能,都會是「裝Woocommerce啊!」這個反應,好像裝了Woocommerce什麼煩惱都沒了似的輕鬆簡單 XD

Woocommerce教學

而根據網站分析工具Builtwith的統計,全世界的電子商務網站中,有30%的電商網站都是用Woocommerce架設的,有此可知Woocommerce真的是電商世界中最受歡迎的外掛!

Woocommerce教學

為什麼Woocommerce如此受歡迎呢?

主要有3大原因:成本低廉、容易入門、功能豐富多元

一個電商網站在市面上的行情至少10萬起跳,如果功能複雜又是另外的專案報價。這對於創業剛起步的年輕人或中小企業主來說,是一筆非常大的開銷。

Woocommerce這款電子商務外掛本身是免費的,再搭配頁面編輯器(ex. Elementor),你就可以在不會寫程式語言的情況下,用滑鼠拖曳的方式,架設出一個美觀與功能兼具、成本低廉的電商網站。

延伸閱讀:
Elementor教學-不會寫程式也能架出精美網站,1款讓500萬人愛上的頁面編輯器!

根據Builtwith的統計,全世界大約有400萬的電商網站,都是用Woocommerce架設的,也就是說Woocommerce的生態系相當完整,更有來自世界各地優秀的工程師,替Woocommerce開發了許多擴充功能外掛,基本上你想得到的功能,都有相對應的外掛可以使用。

如果沒有太多的預算,但想要擁有一個功能完整且可以自己管理的電商網站,讓你可以在網路上販賣商品、收款、寄貨,使用Wordpress+Woocomerce真的非常適合你!

延伸閱讀:
1. WordPress是什麼?全世界有4億5000萬個網站都是用WordPress架設的
2. WordPress後台教學:新手使用WordPress的完整攻略

WooCommerce的優缺點分析

優點

  • 架站成本低
    Woocommerce這款外掛本身是免費的,你需要支付的費用只有最基本的網域&主機費用。若需要使用一些較進階的功能,可能還需要支付佈景主題&外掛費用,總體費用可能會落在1-2萬台幣之間,不過再怎麼樣都比請工程師開發網站,動輒十幾萬還便宜許多。
  • 不需要會寫程式
    使用Woocommerce+頁面編輯器(ex. Elementor),就可以很直覺地用滑鼠拖曳的方式,設計自己的網站外觀,基本上不需碰到網站前端程式語言,就可以完成網站的製作。
  • 擁有網站的所有權&掌控權
    若使用第三方電商平台,你只是跟平台租一個空間,並不是網站的擁有者,也不能完全客製化網站的外觀、網站的購物流程、金流&物流系統…等,還會被平台抽取手續費,若平台倒閉,辛苦累積的網站人氣&正面評價也就跟著消失。
  • 網站流量數據追縱
    多數的第三方架站平台沒有辦法看到網站的流量、追蹤相關數據,並不能針對數據擬定新的行銷策略,對來到網站的消費者做再行銷。若使用Woocommerce就可以在後台安裝GTM、GA、Facebook Pixel…等。
  • 生態性完整
    Woocommerce這款電子商務外掛已經有超過500萬的下載啟用數,若在使用Woocommerce的過程中遇到任何問題,只要上網搜尋都能找到解決方式。另外,Woocommerce的擴充外掛非常多元,有些Woocommerce沒有的功能,都有其他相對應的外掛可以滿足網站需求。

缺點

  • 前期需投入時間摸索
    不像其他電商平台,只要註冊帳號就可以馬上販賣商品。剛接觸Woocommerce時,確實是要花多一些時間摸索,才能架設出一個專屬的電商網站,但也因為是自己建置的網站,可以享有網站100%的掌控權及所有權
  • 中文教學資源較少
    若是用中文搜尋Woocommerce的相關資訊,會發現真的滿少的,大部分進階教學內容都要參考國外網站或YT頻道,這也促使我撰寫這篇完整的Woocommerce教學文,希望可以幫助更多人了解Woocommerce這款好用的電子商務外掛

安裝WooCommerce之前你還需要

在使用Woocommerce之前,我們需要先架設好一個Wordpress網站

要架設一個Wordpress網站,我們必須要先有一個網域+主機

  • 網域:
    網域就好像你網站的地址,有了地址,想要到你網站的訪客才會知道要在瀏覽器輸入哪個網址,才能找到你的網站
  • 主機:
    而主機就好像網站的房子,一個網站就好像一個資料夾,裡面有著一個一個的檔案(網頁),而主機就是存放這些資料的地方

如果你還沒有自己的網域&主機,可以參考我寫的這2篇文章,文章中會手把手的帶你從購買網域及主機,只要一步一步跟著文章操做,你就能快速架設好一個Wordpress網站。

延伸閱讀:
1.Namecheap完整教學:只要5分鐘,你也能擁有專屬的網域!註冊網域就是這麼便宜又簡單!
2.Cloudways完整教學:架設WordPress網站的No.1主機!

當你設定好主機後,Cloudways會自動幫你架設好一個Wordpress網站(在Cloudways完整教學文的第7章節)

Namecheap是我最推薦的網域註冊商,公司歷史悠久有保障,且在Namecheap可以買到便宜的網域,若用其他網域註冊商購買,可能要花比較多的錢,網站長期經營下來,費用會差滿多的!

Cloudways是我最推薦的主機託管服務商,它可以讓你在沒有工程背景的情況下,使用優質的VPS主機,主機就像網站的心臟,關乎到網站安全、載入速度、網站穩定度…等。

若以上2個步驟都完成了,就可以開始安裝Woocommerce囉!

下載&安裝WooCommerce教學

前往 WordPress後台 > 外掛 > 安裝外掛 > 輸入Woocommerce > 安裝並啟用Woocommerce

Woocommerce教學-下載啟用

接著會跳到Woocommerce的設定精靈

只要跟著它引導的操作就可以囉!

Step 1

輸入電商資料

填入商家地址、國家、城市、郵遞區號

若還沒有實體店家地址可以先填自己的住家地址(不用填的太詳細)

「我正在為客戶設定商店」不用打勾

資料填完後,點擊「繼續」

Woocommerce教學-下載啟用

Step 2

選擇商店的產業類別

依照自己的商店屬性做選擇

選好後,點擊「繼續」

Woocommerce教學-下載啟用

Step 3

選擇商店的產品類別

依照自己的產品做選擇即可

這邊我以「實體產品」做示範

選好後,點擊「繼續」

Woocommerce教學-下載啟用

Step 4

填入業務資訊

大概估算一下你的商店有幾種產品即可

「目前是否在其他地方銷售」先選「否」

下面推薦的外掛都先不安裝

完成後,點擊「繼續」

Woocommerce教學-下載啟用

Step 5

選擇佈景主題

若你原本就有裝好佈景主題

點擊「繼續使用目前使用中的佈景主題」即可

如果還沒安裝佈景主題也沒關係,先選擇其中一個,之後有喜歡的主題再改就可以了

我是使用 Astra 這款佈景主題,非常推薦大家使用這款超輕量的主題!

延伸閱讀:
Astra主題教學-1款幫你搞定各類型網站的WordPress佈景主題

Woocommerce教學-下載啟用

接著Woocommerce會問你要不要安裝Jetpack這款外掛

因為示範的關係,我這邊就先不安裝,點擊「不,謝了」

如果想安裝Jetpack按照它的設定流程走一遍就可以囉!

Woocommerce教學-下載啟用

跟著設定精靈的步驟完成後,就會跳到這個畫面

我將在接下來的章節帶你依序設定

Woocommerce教學-下載啟用

完成初步設定後,我們先到網站前台,你就會看到你的網站多了

「商店」、「我的帳號」、「結帳」、「購物車」…等選單

如下圖(這個選單我已經更改過,並且有使用 Astra 的樣板,所以會跟你的畫面有所差異)

Woocommerce教學-下載啟用

接下來,我們要回到Wordpress後台,完成Woocommerce的基本設定

WooCommerce後台基本設定

接下來的Woocommerce設定教學只是一個示範,用意是讓大家知道在Woocommerce後台可以做哪些設定,要更改某個項目要去哪裡更改

而實際要選哪一個項目,還是要依照自己商店的需求呦~

一般

前往 WordPress後台 > WooCommerce > 設定 > 一般

「商店地址」這邊你可以修改商店的基本資料

我們在一開始的「設定精靈」已經有輸入一些商店資料

若有使用套版,有時候會需要重新填寫

沒有實體商店地址,填自己的住家地址或留空都可以

Woocommerce教學-一般設定

「一般選項」,要依照自己商店銷售的地區、國家做設定

我以「只在台灣」銷售為例

  • 「銷售至特定國家&運送至特定國家」都選擇「台灣」
  • 「預設客戶所在地區」選擇「無預設地區」
  • 「啟用稅金」因為台灣的商品價格大部分都是已經含稅的,這邊就不勾選
  • 「啟用優惠卷」若之後有要做促銷活動可以先勾選
Woocommerce教學-一般設定

「貨幣選項」一樣以新台幣為例

  • 「貨幣位置」以台幣為例習慣放在左邊
  • 「千分位&小數點符號」留白即可
  • 「小數位數」設為「0」

完成後,點擊「儲存設定」

Woocommerce教學-一般設定

商品

前往 WordPress後台 > WooCommerce > 設定 > 商品 > 一般

  • 「商店頁面」指的是你的商品列表要連接到哪一個頁面,預設為「商店」這個頁面,建議保持預設即可
  • 「加入購物車行為」
    若將「成功加入後轉至購物車頁面」勾選,消費者在加入一項商品後,就會自動跳到購物車頁面,完成後續的結帳。若希望消費繼續在商店逛其他產品,這個選項就不要勾選
  • 「預留位置圖片」
    如果沒有上傳商品圖片,系統就會使用這個圖片,這邊建議留白即可
  • 「尺寸」選擇你的商品適合的尺寸單位
  • 「商品評價」這邊建議不要勾選,若開放商品評價,後續會有點麻煩

完成後,點擊「儲存設定」

Woocommerce教學-商品設定

前往 WordPress後台 > WooCommerce > 設定 > 商品 > 庫存

這邊可以設定要不要啟用庫存管理

  • 「庫存管理」建議開啟
  • 「保留庫存」
    指的是當消費者還沒完成付款,你要替該筆訂單的庫存保留多久的時間,這邊建議跟付款時間一起設定
    ex.要在3天內完成付款(信用卡&ATM轉帳&貨到付款),這邊就可以設定24(小時)*3(天)*60(分)=4320(分)
  • 「通知」的兩個選項都建議勾選,當庫存快要見底的時候,系統就會寄信通知你
  • 「低庫存臨界值」設定庫存剩下多少的時候要通知你
  • 「無庫存可見度」建議勾選,當商品沒有庫存時,消費者就不會看到該項商品

完成後,點擊「儲存設定」

Woocommerce教學-商品設定

前往 WordPress後台 > WooCommerce > 設定 > 商品 > 可下載商品

若有販售虛擬商品才需要做設定(ex.電子書、文件檔案、PPT、Zip檔案…等)

  • 「檔案下載方式」維持預設即可
  • 「存取限制」一樣保持預設即可
  • 「檔案名稱」一樣保持預設即可

完成後,點擊「儲存設定」

Woocommerce教學-商品設定

帳號及隱私權

(運送方式、付款、電子郵件還要下載其他外掛,因篇幅較長,會在後面的Woocommerce教學,用獨立的章節介紹)

前往 WordPress後台 > WooCommerce > 設定 > 帳號及隱私權

  • 「訪客結帳」
    「允許客戶免帳號下訂單」建議不要勾選,讓消費者註冊帳號再下單,有助於後續的訂單管理,也可以順便搜集客戶資料
    「允許顧客在結帳過程中登入現有的帳號」建議勾選,方便消費者在同一個頁面登入帳號
  • 「建立帳號」
    這邊可以依照自己的需求勾選,我沒有勾選「建立帳號時,系統自動產生帳號密碼」,讓消費者設定自己習慣的密碼方便他們記憶
  • 「帳號清除要求&個人資料移除」建議都不要勾選,維持預設即可
Woocommerce教學-帳號及隱私權設定

接著在「隱私權政策」的欄位

啟用Woocommerce外掛後,系統已經自動幫我們產生一個「隱私權頁面」所以不需要再多做設定

「註冊隱私權政策&結帳隱私權政策」都維持預設即可

Woocommerce教學-帳號及隱私權設定

「個人資料保留」欄位

可以設定消費者的帳號、待確認訂單、失敗訂單、已取消訂單、已完成訂單要保留多久的時間

依照自己的需求設定即可,若沒有特別想要保留的資料就維持預設就好

完成後,點擊「儲存設定」

Woocommerce教學-帳號及隱私權設定

接下來我們直接到「進階設定」「整合設定」保持預設即可

進階

前往 WordPress後台 > WooCommerce > 設定 > 進階

「頁面設定」的欄位,前面3個選項(購物車、結帳、我的帳號)都維持預設就好,若之後有頁面客製化的需求,再回到後台選取新增的頁面即可

「條款及規則」需要等你新增自己商店的「購物規則or退換貨規則」後,再選取該頁面

如果還不知道要怎麼新增頁面,可以參考我寫的這篇「WordPress後台教學:新手使用WordPress的完整攻略」第6章節

Woocommerce教學-進階設定

「結帳端點&帳號端點」顯示的是消費者在前台的特定動作,系統會將該動作的代稱加到網址的後方,這邊建議維持預設就好

若之後有進階的頁面客製化需求,也可以在這裡索取特定動作的代稱,在這邊我就不多做介紹囉!

最後點擊「儲存設定」

Woocommerce教學-進階設定
Woocommerce教學-進階設定

上架商品

Woocommerce總共有6種不同的商品

  1. 簡單商品
  2. 可變商品
  3. 組合商品
  4. 虛擬商品
  5. 可下載商品
  6. 聯盟商品

在這個「上架商品」的Woocommerce教學,將會介紹商品上架的9大步驟,並且用「簡單商品」為例,帶你完成在Woocommerce新增商品的所有步驟,再一一介紹其他5種商品的重點設定

上架商品的 9 大步驟

要在Woocommerce新增商品共有9大步驟要完成

  1. 商品名稱
  2. 商品永久連結(建議使用英文)
  3. 商品詳細介紹
  4. 商品資料設定
  5. 商品簡短說明(會出現在單一商品頁面的文字)
  6. 商品圖片
  7. 商品標籤
  8. 商品分類
  9. 商品的狀態&可見度(發佈商品)
Woocommerce教學-商品上架

簡單商品(完整流程)

前往 WordPress後台 > 商品 > 新增商品

簡單商品為 6 大商品中,最簡單的商品類型

這邊我以「Macbook Pro的電源轉接器」來示範上架商品的完整流程

Step 1

輸入商品名稱

更改商品的永久連結(建議使用英文,中文時常會產生亂碼)

Woocommerce教學-商品上架

Step 2

輸入詳細的商品介紹

這邊對店家來說非常重要,記得要有耐心地填寫喔~

Woocommerce教學-商品上架

Step 3

設定 商品資料 > 一般

商品資料選擇「簡單商品」

輸入商品價格,若有優惠價也是在這邊輸入,消費者就能看到商品特價的標籤

Woocommerce教學-商品上架
Woocommerce教學-商品上架

Step 4

設定 商品資料 > 庫存

  1. 輸入商品貨號
  2. 啟用庫存管理
  3. 輸入商品庫存數量
  4. 是否允許無庫存下單(建議選擇「不允許」)
  5. 設定低庫存臨界值(商品庫存到達臨界值時,系統會寄信知你要補庫存)
Woocommerce教學-商品上架

Step 5

設定 商品資料 > 運送方式

  1. 輸入商品重量&尺寸(有需要再設定即可)
  2. 「運送類別」依照你的商品有沒有特殊的運送類別再新增
    ex.大型商品的運送方式跟一般商品不同

ps.「運送類別」會在後面的「物流設定」章節介紹

Woocommerce教學-商品上架

Step 6

設定 商品資料 > 連結商品

  1. 追加銷售
    輸入想要追加銷售的商品,商品會出現在「單一商品」頁面的「你可能會喜歡…」
  2. 交叉銷售
    輸入想要交叉銷售的商品,商品會出現在「結帳」頁面的「你可能對此有興趣…」
Woocommerce教學-商品上架
Woocommerce教學-商品上架
Woocommerce教學-商品上架

Step 7

新增商品圖片

將商品圖片上傳到媒體庫,或直接將商品圖片拖曳進去都可以

建議填入商品的「替代文字」,增加搜尋結果的曝光機會

Woocommerce教學-商品上架
Woocommerce教學-商品上架

Step 8

新增商品標籤 每項產品都可以加入多個標籤,可以輸入商品相關的關鍵字

因為標籤可以用很多個,建議直接在這邊輸入並新增,除非有常用的商品標籤,再到「Woocommerce後台 > 商品 > 標籤」新增標籤即可

Woocommerce教學-商品上架
Woocommerce教學-商品上架

Step 9

新增商品分類

Woocommerce教學-商品上架
Woocommerce教學-商品上架

Step 10

設定商品的狀態&可見度,都完成後記得點擊「發佈」

若之後有編輯商品,也記得要點擊「更新」

這樣上架一個商品的完整流程就完成囉!

Woocommerce教學-商品上架

每個商品的上架流程都是一樣的,差別在於不同類型的商品有不同細節需要設定

接下來,我會帶你一步步設定每個商品類型的重點細節

可變商品

當一個產品有不同的顏色、尺寸、規格,都適合用「可變商品」來上架

我們需要增加商品的「屬性&變化類型」

我們趕快來看要怎麼設定吧~

這邊我以「iPhone 12」作為示範,有不同的「顏色&儲存容量」

假設我要上架3種不同顏色的 iPhone 12,分別為「白色、紅色、藍色」

以及3種不同的儲存容量規格,分別為「64GB、128GB、256GB」

Step 1

商品資料 > 可變商品

「屬性」的欄位,我們要新增2種屬性,分別是「顏色&儲存容量」

  1. 輸入屬性名稱:「顏色」
  2. 輸入數值:「白 | 紅 | 藍」,數值之間要以「 | 」這個符號做為區隔
  3. 勾選「在商品頁面中可見&用於變化類型」
  4. 完成後,點擊「儲存屬性」

增加「儲存容量」屬性的方式是一樣的,就不再重複一次

Woocommerce教學-商品上架

Step 2

接著到「變化類型」的欄位,選擇「由所有屬性建立變化類型」點擊送出

系統會自動幫我們產生所有商品的變化類型!

但到這邊還沒結束,我們需要新增每個變化類型的細節內容

Woocommerce教學-商品上架

Step 3

點擊其中一個變化類型

你會看到更多的細節設定

包括商品圖片、貨號、價格、庫存狀態…等

要特別注意的是「商品價格」一定要設定,不然消費者會沒有辦法下單

每個商品都填入細節資訊後,記得點擊「儲存設定」

Woocommerce教學-商品上架

Step 4

前往網站前台確認商品細節

你會看到我們剛剛設定的商品屬性已經設定成功

如果你每個商品都有加入圖片,當消費者選擇不一樣的顏色,商品圖片也會跟著變動

這樣我們的「可變商品」就設定完成囉!

Woocommerce教學-商品上架

組合商品

「組合商品」就好像在賣套餐的概念,指定商品綁在一起賣,給消費者較多的優惠

有很多種組合方式,可以配合當時的促銷活動,新增不同的組合套餐,這邊只是舉一個例子做示範

假設今天商店中的「iPhone 12 藍色 512 GB 」&「Apple Watch 紅色 40MM 」這兩樣商品賣的比較差,我想要清庫存,我就可以推出一個「iPhone組合優惠」套餐

也就是讓消費者這2項商品一起買會比較便宜,順便再加入一些周邊產品

這樣要怎麼設定呢?

Woocommerce教學-商品上架

Step 1

新增 3 個「子商品」

分別為「iPhone 12 藍色 512 GB 」&「Apple Watch 紅色 40MM 」&「iPhone 無線充電器」

而這邊新增商品的方式跟「簡單商品」一樣

  1. 輸入商品名稱&永久連結
  2. 選擇「簡單商品」,記得一定要填入價格(建議也加入優惠折扣價),消費者才有辦法下單
  3. 商品可見度設定為「隱藏」,這樣該商品才不會單獨出現在商品列表,代表消費者只能在「組合商品」這個套餐,買到這樣的優惠價格

依序將 3 個「子商品」都用同樣的方式上架

Woocommerce教學-商品上架

商品資料選擇「簡單商品」

「一般」輸入商品原價&折扣價

Woocommerce教學-商品上架

將型錄可見度設為「隱藏」,記得點擊「發佈」

Woocommerce教學-商品上架

Step 2

新增「主商品」

  1. 輸入商品名稱&永久連結
  2. 輸入商品細節介紹(主商品的商品介紹消費者看得到,記得用心填寫喔~)
  3. 商品資料選擇「組合商品」
  4. 「連結商品」輸入剛剛新增的 3 個子產品
  5. 新增商品簡短說明(消費者看得到,記得用心填寫喔~)
  6. 新增「主商品」的商品圖片(消費者看得到)
  7. 商品可見度選擇「出現在商店與搜尋結果」
Woocommerce教學-商品上架

商品資料選擇「組合商品」

「連結商品」加入剛剛新增的 3 個「子商品」

Woocommerce教學-商品上架

記得加入商品的簡短說明~

Woocommerce教學-商品上架

新增「主商品」的商品圖片

商品狀態選擇「出現在商店與搜尋結果」,完成後點擊「發佈」

Woocommerce教學-商品上架
Woocommerce教學-商品上架

Step 3

到網站前台確認商品的細節

這樣我們的「組合商品」就設定完成囉!

Woocommerce教學-商品上架

虛擬商品

「虛擬商品」可以用在服務的銷售上面

我這邊以「架站諮詢/ 1小時」作為示範,上架方式跟「簡單商品」相同

Step 1

輸入 商品名稱&永久連結&詳細的商品介紹

Woocommerce教學-商品上架

Step 2

商品資料選擇「簡單商品」並勾選「虛擬」

接著,其他設定按照上面的商品上架流程跑一遍,這邊就不再重複

Woocommerce教學-商品上架

Step 3

到前台確認商品細節

這樣我們的「虛擬商品」上架完成囉!

Woocommerce教學-商品上架

可下載商品

「可下載商品」通常是用在虛擬商品的販售

ex.電子書、文件檔案、ppt、zip檔案…等

Step 1

輸入商品名稱&永久連結&詳細的商品介紹

Woocommerce教學-商品上架

Step 2

商品資料選擇「簡單商品」,並且勾選「虛擬&可下載」

「一般」「可下載檔案」填入「檔案名稱&檔案網址」

可以先將「可下載商品」的檔案上傳媒體庫,就可以在商品中看到「檔案網址」

接著,其他設定按照上面的商品上架流程跑一遍,這邊就不再重複

Woocommerce教學-商品上架
Woocommerce教學-商品上架

Step 3

到前台確認商品細節

這樣我們的「可下載商品」就上架完成囉!

Woocommerce教學-商品上架

聯盟商品

「聯盟商品」顧名思義,就是讓你可以放自己的聯盟商品在網站上,當消費者點擊「前往查看」,就會被導到你的聯盟商品頁面

Woocommerce教學-商品上架

「商品資料」選擇「外部/加盟商品」

「商品網址」放入自己的聯盟連結

接著,其他設定按照上面的商品上架流程跑一遍,這邊就不再重複

最後,到網站前台確認一下就完成囉!

Woocommerce教學-商品上架

金流、物流設定

接下來,我們要進入到最重要的金流&物流設定,這關乎到你辛苦架設的電商網站,能不能順利把商品寄出並且收到款項。

由於Woocommerce這款電子商務外掛是國外的,Woocommere外掛本身的金物流系統,比較不符合台灣人的網購習慣。

所以要帶大家使用「第三方的金物流公司-綠界金流」,加上「RY WooCommerce Tools」這款RY大大開發的Woocommerce擴充外掛,這樣你的網站就可以有台灣人最愛的 7-11貨到付款、超商代碼繳費、超商條碼繳費、ATM轉帳、黑貓宅配、大嘴鳥宅配…等.

綠界會員申請&設定

首先我們要先到綠界金流的官網申請會員

Woocommerce教學-綠界金流物流串接
Woocommerce教學-綠界金流物流串接

接下來,綠界金流還會要求你完成身份的驗證,才能啟用完整的金物流服務

這邊我會列出幾項特別重要的欄位,記得到每個項目中完成認證&設定喔!

  1. 基本資料
    這邊要完成「身分證件驗證、銀行帳號設定、收款審核資料」的動作
  2. 提領設定
    要先完成「身份認證」之後,就可以新增銀行帳號給綠界,當你收到消費者的款項後,綠界就會匯款到你的銀行帳號
  3. 服務申請
    金流的部分:非信用卡收款會自動開通、信用卡收款要通過身份驗證後才會開通 物流的部分也是要通過身份驗正&銀行帳號驗證後才會開通
  4. 物流型態異動
    選擇自己想要的物流方式(黑貓宅急便、大嘴鳥宅配通、C2C門市寄/取件),而「B2C大宗寄貨、退貨通」是給比較大型的電商使用
  5. 收款審核資料
    填寫販售網址並且完成認證
    另外,這邊可以設定是否要開放海外信用卡交易服務
Woocommerce教學-綠界金流物流串接

「服務申請」的欄位,記得先完成前面的「1、2步驟」,通過身份驗證&銀行帳號驗證後再來申請喔!

Woocommerce教學-綠界金流物流串接

「物流型態異動」的欄位,可以依照自己網站的需求,選擇黑貓宅急便 / 大嘴鳥宅配通 / C2C門市寄/取件,另外兩個選項是給大型電商使用的

Woocommerce教學-綠界金流物流串接

「收款審核資料」的欄位,需要去驗證「販售網址」,先參考「販售網址頁面範例」就會知道怎麼驗證囉~

Woocommerce教學-綠界金流物流串接

以上是綠界金流幾個重要設定,因為綠界的功能真的非常多,若有更進階的需求,可以升級商務會員

綠界後台取得介接資訊

接下來,我們要到綠界的後台取得串接Wordpress網站的介接資訊

前往 綠界金流首頁 > 點擊右上方的「管理後台」

Woocommerce教學-綠界金流物流串接

前往 系統開發管理 > 系統介接設定

你會看到 5 個代碼,分別為

  1. 商店代號
  2. 金流的介接HashKey
  3. 金流的介接HashIV
  4. 物流的介接HashKey
  5. 物流的介接HashIV

這 5 個代碼非常重要,不要不小心外洩囉~

我們先將這個視窗保留,等一下會用到

Woocommerce教學-綠界金流物流串接

下載 RY Tools、RY WC City Select

現在我們回到Wordpress後台下載「RY Woocommerce Tools 」& 「RY WC City Select」

前往 WordPress後台 > 外掛 > 安裝外掛 > 輸入RY > 下載並啟用這 2 款外掛

  • RY Woocommerce Tools
    這款Woocommerce擴充外掛,可以幫我們的網站串接綠界的金物流,讓我們的網站可以使用綠界的「超商寄/取件、黑貓宅配、大嘴鳥宅配通、ATM轉帳、超商代碼繳費」…等台灣人習慣的網購流程
  • RY WC City Select
    這款Woocommerce擴充外掛,則是可以在結帳頁面新增「縣市&鄉鎮」的選單,並且自動填入郵政區號,讓消費者可以直接在該欄位下拉選單,快速填完自己的帳單資訊 如果沒有裝著個外掛,消費者就要一個個輸入,遇到比較沒耐心的消費者,可能就會流失訂單
Woocommerce教學-綠界金流物流串接

啟用「RY WC City Select」就可以擁有縣市&鄉鎮市的選單,並且自動帶入郵遞區號

Woocommerce教學-綠界金流物流串接
Woocommerce教學-綠界金流物流串接

RY Tools 設定教學

安裝完成並啟用「RY Woocommerce Tools 」

前往 WordPress後台 > Woocommerce > 設定 > RY Tools > 基本設定

Step 1

啟用綠界金流&物流模組

Woocommerce教學-綠界金流物流串接

Step 2

設定一般選項&地址選項

  1. 「允許訂單變更付款方式、強密碼檢測、於訂單明細中的付款方式提示為付款」3個選項都打勾
  2. 「顯示國家選項、先顯示姓氏輸入欄位、先顯示郵遞區號」3個選項都打勾

完成後,點擊「儲存設定」

Woocommerce教學-綠界金流物流串接

Step 3

前往 RY Tools > 綠界金流設定

  1. 「啟用綠界金流模組」打勾
  2. 輸入訂單編號前綴
  3. 綠界API憑證 若還沒有在綠界官網完成身份&銀行帳號的驗證,可以先開啟「綠界金流測試模式」
  4. 回到綠界的網頁複製介接資訊並貼到Wordpress後台
  5. 完成後,點擊「儲存設定」
Woocommerce教學-綠界金流物流串接

回到剛剛我們開啟的綠界後台頁面

複製

  1. 商店代號(貼到Wordpress的Merchant ID)
  2. 金流的介接 HashKey&HashIV(貼到Wordpress上)
Woocommerce教學-綠界金流物流串接

Step 4

前往 RY Tools > 綠界物流設定

  1. 「啟用綠界物流模組」打勾
  2. 「自動取得物流寄貨單號」打勾
    這樣Wordpress後台就會跟綠界整合,有訂單時會直接在Wordpress後台產生寄貨單號
  3. 「自動完成訂單」打勾
    當消費者收到商品後,訂單狀態會自動變成「完成」
  4. 輸入訂單編號前綴字&選擇超商取貨類型&填入寄件人資訊
  5. 綠界API憑證 若還沒有在綠界官網完成身份&銀行帳號的驗證,可以先開啟「綠界物流測試模式」
  6. 回到綠界的網頁複製介接資訊並貼到Wordpress後台
  7. 完成後,點擊「儲存設定」
Woocommerce教學-綠界金流物流串接

填入訂單編號前綴字

超商取類型選擇「C2C」

填寫寄件人資訊

Woocommerce教學-綠界金流物流串接

回到剛剛我們開啟的綠界後台頁面

複製

  1. 商店代號(貼到Wordpress的Merchant ID)
  2. 物流的介接HashKey&HashIV(貼到Wordpress上)
Woocommerce教學-綠界金流物流串接

完成後,記得點擊「儲存設定」

Woocommerce教學-綠界金流物流串接

付款方式 設定教學

接著,我們要來進行付款設定

前往 WordPress後台 > Woocommerce > 設定 > 付款

因為我們啟用了「RY Wooocommerce Tools」外掛,你可以看到我們多了許多綠界金流的付款方式

選擇符合自己網站的付款方式即可

另外,若要使用ATM轉帳,建議選擇「綠界ATM櫃員機」,綠界會產生一個虛擬帳戶,讓消費者到ATM轉帳付款,綠界收到款項後會再轉到你的銀行帳戶。

若選擇「綠界網路ATM」消費者則需要有讀卡機才能使用網路銀行轉帳。

我這邊以「貨到付款&綠界信用卡」作為示範

  1. 打開「貨到付款」的選項
  2. 打開「綠界信用卡」的選項
Woocommerce教學-綠界金流物流串接

「貨到付款」的右邊點擊「管理」

會到如下圖的畫面

  1. 「啟用貨到付款」打勾
  2. 完成其他資料填寫
  3. 「啟用運送方式」選擇自己想要的項目 我以7-11超商取貨為例
  4. 完成後,點擊「儲存設定」
Woocommerce教學-綠界金流物流串接

回到上一頁繼續設定信用卡付款方式

「綠界信用卡」的右邊點擊「管理」

會到如下圖的畫面

  1. 「啟用綠界信用卡」打勾
  2. 完成其他資料填寫
  3. 制定「最小訂購金額」 ex.消費滿NT$1000才能使用信用卡付款
  4. 完成後,點擊「儲存設定」
Woocommerce教學-綠界金流物流串接

到這邊,我們的付款方式設定就完成囉!

運送方式 設定教學

前往 WordPress後台 > Woocommerce > 設定 > 運送方式 > 運送區域

點擊「新增運送區域」

Woocommerce教學-綠界金流物流串接

我以「台灣」為例

  1. 「區域名稱」填入「台灣」
  2. 「區域中的地區」選擇「台灣」
  3. 點擊「新增運送方式」
    這邊我以「7-11超商取貨&黑貓宅配」為例
Woocommerce教學-綠界金流物流串接

點擊「新增運送方式」

就會出現如下圖的畫面,選擇你想要的運送方式

Woocommerce教學-綠界金流物流串接

將滑鼠移到每個「運送方式」的上方,就可以編輯該「運送方式」的細節

Woocommerce教學-綠界金流物流串接

點進去後可以更改

  1. 運送方式的標題
  2. 稅金狀態
  3. 運費
  4. 免運最小訂購金額(消費滿多少就可以免運)
  5. 加成計算運費
  6. 可否運送 這邊通常指較特殊的商品,例如「大型商品」,是否要開放這個「運送方式」運送特殊商品
Woocommerce教學-綠界金流物流串接

前往 設定 > 運送方式 > 運送類別

就可以替特殊商品新增「運送類別」

如果你有幾樣商品是比較大型的特殊規格,7-11超商不能寄送,就可以新增一個「運送類別」,用宅配的方式寄送

Woocommerce教學-綠界金流物流串接

回到 Woocommerce > 商品 > 運送方式

下方有一個「運送類別」可以選擇,你可以設定某項商品只適用哪個運送類別

這樣消費者在購買該項商品時,系統就會自動出現可運送的方式

ex. 我將「Macbook Pro」的運送類別設為「大型商品」,並且在「黑貓宅配」這個運送方式勾選「大型商品可運送」,當消費者在網站前台購買 「Macbook pro」時,運送方式就不會出現「7-11超商取貨」而是「黑貓宅配」

Woocommerce教學-綠界金流物流串接

回到 運送方式 > 運送區域

我們在台灣地區的運送方式已經設定完成囉~

如果要開放海外寄送,可以再新增其他運送區域,設定方法是一樣的,就不再重複一次

Woocommerce教學-綠界金流物流串接

到網站前台確認金物流設定

接著我們到商品的「結帳頁面」

確認一下剛剛設定的「付款方式&運送方式」是否順利出現在網站上,如果有的話「金流&物流設定」就完成囉!

另外,我們在設定「7-11超商取貨」時,有設定滿NT$1000就可以免運,下圖的消費金額為NT$1200,在「7-11超商取貨」的選項就沒有顯示運費金額,是因為系統已經自動幫我們設為免運費囉!

Woocommerce教學-折價卷

這樣我們的運送方式就設定完成囉!

折價卷

接下來,我們要來看如何在Woocommerce後台新增商店的折價卷

在折價卷的Woocommerce教學中,我會帶你走一遍新增折價卷的完整流程,並且介紹3種不同折價方式的用法

Woocommerce有3種折價方式

  1. 固定的購物車折扣(滿額折扣)
  2. 百分比折扣( X 折優惠)
  3. 固定的商品折扣(買越多賺越多)

不過一個電商網站的促銷方式有很多種,這邊的教學主要是讓你了解有哪些折價方式可以運用,當你有新的促銷策略時,就可以依照網站的需求,變化出各式各樣的折價卷使用

固定的購物車折扣(滿額折扣)

現在我們要來設定「凡消費滿1000元,折100元」的促銷折價卷

前往 WordPress後台 > 行銷 > 折價卷

點擊「新增折價卷」

Woocommerce教學-折價卷
  1. 填入折價卷代號(也可以點擊「產生折價卷代碼」系統會自動幫你產生一個)
  2. 內容說明(只會顯示在後台,方便網站管理者後續的管理)
  3. 設定折價卷資料 共有 3 個欄位要設定「一般、使用限制、使用上限」
  4. 發佈折價卷
  5. 到網站前台測試折價卷
Woocommerce教學-折價卷

折價卷資料 > 一般

  • 折扣種類選擇「固定的購物車折扣」
  • 輸入折價卷金額,以「NT$100」為例(凡消費滿1000元,折100元)
  • 設定折價卷到期日
Woocommerce教學-折價卷

折價卷資料 > 使用限制

  • 輸入最低消費金額,以「NT$1000」為例(凡消費滿1000元,折100元)
  • 勾選「現單獨使用」(此優惠不能與其他折價卷合併使用,會虧錢啊 XD)
  • 勾選「排除特價商品」(特價商品就不能使用此折價卷)

下面還有其他5個選項,你可以指定/排除某項商品、指定/排除某項商品分類、輸入特定的Email給特定的會員使用,依照自己的需求去設定,這邊就不多做介紹

Woocommerce教學-折價卷

折價卷資料 > 使用上限

  • 每張折價卷的使用上限(如同這張折價卷的發行張數,這邊設定50,如果被用到50次之後,這個折價卷就不能再被使用)
  • 每一個使用者的使用上限(這邊設定 1,表示每個消費者只能使用這張折價卷 1 次)

都設定完成後,記得點擊右上角的「發佈」

Woocommerce教學-折價卷

到前台測試一下折價卷

輸入折價卷代碼「MONICAWEBS100」,就可以看到「購物車總計」的地方,出現100元折扣囉!

Woocommerce教學-折價卷

百分比折扣( X 折優惠)

現在我們來設定「商品8折優惠」的折價卷

  • 輸入折價卷代碼

折價卷資料 > 一般

  • 折扣種類選擇「百分比折扣」
  • 折價卷金額輸入「20」(8折)
  • 輸入折價卷到期日

其他設定大同小異,上面都有介紹過,這邊就不再重複

Woocommerce教學-折價卷

一樣要到前台測試一下折價卷

輸入折價卷代碼「MONICAWEB20%」,就可以看到「購物車總計」的地方,出現8折優惠囉!

Woocommerce教學-折價卷

固定的商品折扣(買越多賺越多)

現在我們來設定「每台Macbook Pro折1000元,一人限購3台」的折價卷

  • 輸入折價卷代碼

折價卷資料 > 一般

  • 折扣種類選擇「固定的商品折扣」
  • 折價卷金額輸入「1000」
  • 輸入折價卷到期日
Woocommerce教學-折價卷

折價卷資料 > 使用限制

「商品欄位」輸入要促銷的商品

Woocommerce教學-折價卷

折價卷資料 > 使用上限

  • 輸入「每張折價卷的使用上限」
  • 「限制X項目的使用上限」因為「每人限購3台」,這邊這設定「3」
  • 「每一使用者的使用上限」設定「1」
Woocommerce教學-折價卷

最後到網站前台測試折價卷

當我輸入「3台」時,總折扣為NT$3000元

Woocommerce教學-折價卷

但輸入「4台」時,總折扣一樣為NT$3000(因為每人限購3台)

Woocommerce教學-折價卷

以上就是設定折價卷的基本概念,實際的運用要依網站需求調整,大家再自行發揮囉~

設定Woocommerce電子郵件

Woocommerce的電子郵件分為2大類

  1. 寄給網站的擁有/管理者
  2. 寄給在網站下單的消費者

在Woocommerce後台,每個不同的訂單狀態,都可以設定要發送哪些信件給客戶&網站擁有者,確保每一張訂單從下訂到出貨能順利完成

前往 WordPress後台 > Woocommerce > 設定 > 電子郵件

前面 3 封電子郵件是寄給網站的擁有者,通知其收到新的訂單、訂單被取消、訂單失敗

點擊右側的「管理」

Woocommerce教學-折價卷

就會進入到這個畫面,可以設定是否要開啟此電子郵件通知、信件主旨、標題…等,都可以依照個人喜好修改

Woocommerce教學-電子郵件設定

而下面其他的電子郵件是寄給客戶的,通知他們訂單的狀態,建議信件的細節要認真修改,讓客戶感受到店家的用心,是獲取客戶信任的第一步

Woocommerce教學-電子郵件設定

在電子郵件的最下方,你會看到「電子郵件發送選項」

這邊可以調整電子郵件的外觀,包括寄件者名稱、地址、頁首圖片、顏色、信件樣板…等

Woocommerce教學-電子郵件設定

頁首圖片可以放網站的Logo,先將Logo上傳到媒體庫,就會有「圖片的網址」

顏色的部分建議採用網站原本的色調才會有一致性

Woocommerce教學-電子郵件設定

以上就是Woocommerce電子郵件的重點介紹,接下來要進入到重要的「訂單管理」囉~

訂單管理

在網路上經營電商,有非常多的細節需要注意,其中訂單是非常重要的一個環節,若沒有處理好會影響客戶對品牌的信任、品牌的評價、聲譽、收入…等

接下來,要介紹Woocommerce後台的訂單管理系統,讓你對處理訂單的流程有較全面的了解,才不會在電商經營的初期手忙腳亂

前往 WordPress後台 > Woocommerce > 訂單

這邊可以看到網站的訂單列表,可以概覽所有訂單的下訂時間、訂單狀態、總計…等

Woocommerce教學-訂單管理

若要設定個別訂單的細節,只要點擊一下該訂單,就可以進入到如下圖的畫面,主要分為4個區塊

  1. 訂單資料
  2. 商品資料
  3. 訂單動作
  4. 訂單備註
Woocommerce教學-訂單管理

訂單資料

若需要編輯訂單資料,只要點擊右側的「鉛筆icon」就可以囉~

須要特別注意的是「訂單狀態」,若更改了狀態,系統會自動發信通知客戶(上個「電子郵件」章節有提到),建議先用自己的帳號在網站跑一次完整的購物流程,熟悉所有操作降低出錯機率

Woocommerce教學-訂單管理

商品資料

這邊會列出該筆訂單有哪些商品

在商品的下方有「新增項目、使用折價卷、退費」選項,若有需要變更商品資料都可以在這個欄位設定,編輯完成後記得點擊右側的「重新計算」「訂單總數」才會更新

Woocommerce教學-訂單管理

訂單動作

這邊有3個選項

  1. 將發票/訂單明細寄送給客戶
    若客戶完成付款,就可以將發票及明細傳給客戶
  2. 重寄新訂單通知信
    若有更改訂單內容或客戶沒有收到新訂單通知,都可以在這邊重新寄信給客戶
  3. 產生下載權限
    這個選項用在「虛擬可下載」商品 ex.電子書、軟體檔案…等

如果只是要更新訂單修改的內容,不需要選擇任何一項,直接點擊「更新」即可

Woocommerce教學-訂單管理

訂單備註

訂單備註分為 2 種

  1. 私人備註
    這個是給網站擁有者自己看的訂單備註
  2. 給顧客的備註
    若選擇這個項目,在你新增完備註後,系統會寄信通知客戶
Woocommerce教學-訂單管理

Woocommerce的訂單教學就到這邊囉~

顧客名單

搜集、管理客戶名單對於電商來說是非常重要的,擁有一群忠誠的鐵粉,日後有推出新產品、促銷活動,都可以對客戶做再行銷,這能為你的品牌帶來源源不絕的收入

前往 WordPress後台 > Woocommerce > 顧客

這邊可以看到所有客戶的資料

在最上方可以用篩選器選擇不同條件的客戶名單、搜尋客戶姓名

Woocommerce有提供客戶資料會出的功能,方便店家管理客戶資料

而在最右側「三個點點icon」可以選擇客戶列表要顯示哪些資訊

Woocommerce教學-顧客管理

Woocommerce後台的數據分析

前往 WordPress後台 > 分析

電商網站所有數據的分析Wooocommerce都統整在這,包括:商品、收益、訂單、折價卷、庫存…等

有需要查看哪些統計數據都可以來這邊找,而每種產品重視的數據不一樣,這邊就不一一介紹

Woocommerce教學-後台數據分析

結語

在還沒有使用Woocommerce架設出自己的電商網站之前,我對於Woocommerce是一種既期待又怕受傷害的感覺(XD)

一邊期待著摸熟Woocommerce外掛後,自己架設出的第一個電商網站,一邊又擔心網路上的資訊零零碎碎,我就算花很多時間東拼西湊,也沒辦法學好如何使用Woocommerce這款電商外掛,加上電商中最麻煩的金流、物流系統,總讓我在半路就想放棄(太沒用了吧XD)

好險最後靠著微薄的意志力,成功架設出屬於自己的第一個電商網站,所以讓我想要寫這篇完整的Woocommerce教學文,最大的用意就是希望幫助跟我一樣,想用Wordpress自架電商網站的人,可以在一篇文章中,獲得所有Woocommerce的重要資訊

而這篇Woocommerce教學主要著重在Woocommerce外掛本身的使用、設定。要架設出一個完整的電商網站,還包括許多層面,例如:網站的整體流程設計、客製化網站外觀、網站背後的數據分析、廣告投放、行銷策略的擬定…等。

這些電子商務網站背後的運作邏輯,因為文章篇幅的關係,我會在之後「自架站系列文」獨立一篇「電商網站教學」做介紹,敬請期待囉~

最後,感謝你閱讀這篇文章,希望這篇「Woocommerce教學」有幫助到你,如果有任何問題,歡迎在底下留言告訴我或是使用Messenger與我聯繫,我會盡我所能的幫助你 🙂

進階學習資源

若讀完文章後,你還有一些地方不了解,可以觀看我推薦的2個影片

我有非常多的Wordpress應用,都是從這兩位Youtuber的影片學的,他們的教學都會不斷地更新,非常推薦想學好Wordpress架站的人追蹤他們的頻道

影片的下方都有時間戳,可以直接跳到那個段落,學習起來會更有效率喔~

要特別注意的是,這兩個影片都是使用國外的金、物流系統,不適合台灣地區使用,這個部分建議參考我的文章就可以囉!

Darrel Wilson

Ferdy Korpershoek

常見問題

什麼是 WooCommerce ?

Woocommerce是Wordpress這套內容管理系統中,最熱門的電子商務外掛,可以協助你自己架設一個功能完整又兼具設計感的電商網站,從上架商品、客戶下單、出貨、收款都能幫你搞定

使用WooCommerce要付費嗎?

Woocommerce這款外掛本身是免費的,你只需要負擔網站的網域&主機費用(一年不到NT$4000),就能架設出一個客製化的電商網站,比起外包電商網站動輒10萬台幣以上,真的相當划算!

誰適合用Woocommerce?

1. 想要擁有網站100%所有權&掌控權
2. 沒有太多預算的中小企業主
3. 想要有有一個可以追蹤網站數據的電商網站
4. 想要在網路上銷售自家的商品
5. 想要有可以客製化的電商網站

其他架站平台和Woocommerce的差別?

Woocommerce是Wordpress開源系統中的免費外掛,使用Woocommerce你可以依照自己的需求,客製化專屬的電商網站,並且擁有網站的所有權,不用擔心平台倒閉商店也跟著倒閉的風險。

若使用其他電商平台,ex: Shopify, Wix ecommerce, 蝦皮等平台,你每個月都需要付給平台費用,甚至售出的商品會被抽成,更糟的是,你沒有網站的所有權,也不能客製化你的商店。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端