WooCommerce綠界教學 :金流+物流串接(信用卡+超商取貨)

WooCommerce綠界教學 :詳細金流+物流串接(信用卡+超商取貨)

這是一篇完整的「 WooCommerce綠界教學 」。

WooCommerce 系統本身來自國外,所以有關於網站金流、物流有些會不太符合台灣用戶操作。

但別擔心,因為在台灣有很多電商主,是使用 WooCommerce 架設網路商店,所以像是綠界科技、藍新金流,都有開發支援 WordPress 平台的外掛,可以擴充網站金物流功能。

瀏覽此文章前,可先參考 WooCommerce 預設金流和物流,了解基本的幾種方法,或許基本的幾種方法就能滿足你的需求,就不用再安裝第三方外掛。

如果這篇文章看完了,發現綠界官方的外掛無法滿足你的需求,可以使用 RY WooCommerce Toos 外掛 替代,因為裡面有更多人性化的金物流功能。

好囉,本文章節如下:

準備好了嗎?我們開始吧:)


1. 建立網路商店需準備?

架設購物網站建立形象網站 一樣,都需具備網站架設 3 要素,如下。

架設網站 3 要素
1. 網域申請
(申請門牌)
2. 主機租用
(租一塊地)
3. 網頁設計
(搭建房子)
  • 個人網域:就如同家裡門牌一樣,可以讓訪客順利搜尋到網站。
  • 主機租用:網站需有一個放置的家,而主機就是網站的家,可依照個人需求挑選適合的主機。
  • 網頁設計:有了個人網域+虛擬主機,接下來就是做網頁設計,打造網站品牌風格。

對於新手來說,假如不知道如何一次完成上面 3 要素,Bluehost 是 WordPress 官方推薦的主機,能一次幫你處理完畢,費用便宜+使用者體驗良好,很適合第一次入手。

新手入門,請參考 Bluehost 教學 有完整架站流程(網域+主機+網頁設計)。

如果有更大的主機需求,擔心主機負擔不了網站流量,可參考 Cloudways 教學,它的主機性能更好,但費用會稍微多一點。

優質主機推薦 有更完整的比較,這是我用了 10 幾家國內外主機所整理出來的,應該會減少你花費時間尋找的成本。

網頁設計部分,參考 最棒電商佈景主題 或搭配 頁面編輯器,可做出客製化的網站風格。

至於系統操作熟練度,可參考 WordPress 後台教學WooCommerce 完整教學,會幫助你打通任度二脈。

以上的教學文,包含完整的網域申請、主機租用、網頁設計、系統學習的全部流程,如果都具備好個人或公司網站了,就跟著我繼續學習吧:)


2. 綠界會員申請+外掛串接綁定

在開始「 WooCommerce綠界教學 」前,需註冊綠界科技的會員,才能使用金物流相關服務,下面我整理簡單幾步驟,幫助大家進入狀況:)

Step1:註冊綠界會員

前往 綠界官網 點選右上角「 註冊 」。更多 綠界會員註冊流程

WooCommerce綠界教學 :註冊綠界會員
註冊綠界會員

然後填入註冊資料,這邊就先自行填寫,申請成功後就會得到基本的金物流功能。

WooCommerce綠界教學 :註冊綠界表單
註冊綠界表單

Step2:開通+設定金物流功能

有部分功能綠界那邊會進行審核,這就需經過他們的二度認證,可能會需要一些工作天,才能夠使用(像是信用卡收款、部分物流功能等 ..)。

綠界也會告訴你金物流的開通狀態。

綠界金物流功能開通
綠界金物流功能開通

我們也可對金物流做設定,像是下圖的「 物流型態異動 」,就可勾選宅配方式、使用 B2B / C2C 方式、超商退貨設定等 ..

綠界金物流設定:物流型態異動(綠界)
綠界金物流設定:物流型態異動(綠界)

Step3:查詢正式的介接資料

金物流功能開通+設定完成後,可前往+登入綠界的管理後台。

前往綠界管理後台
前往綠界管理後台

進入後會看到功能豐富的管理後台,前往「 系統開發管理 > 系統介接設定 」,商店介接資料都放在這。

WooCommerce綠界教學 :綠界的金物流介接資料(正式的)
綠界的金物流介接資料(正式的)

這裡的 MerchantID(商家代號)、HashKeyHashIV 都是正式版的,也都是重要資料請妥善保存(勿外流)。

如果商店要正式開始營運,就需把這幾個填入到 WordPress 後台,在綠界管理後台才會實際有金物流進出。

備註:商店要準備正式營運,再更改為正式介接資料即可。

Step4:安裝綠界金物流外掛(WordPress 專用)

前往 WordPress 外掛 > 安裝外掛,搜尋 ecpay 就會出現。

分別安裝+啟用 ECPay Payment for WooCommerce(金流)ECPay Logistics for WooCommerce(物流) 這兩款外掛,這是綠界官方自己開發的。

WooCommerce綠界教學 :安裝綠界的金物流外掛
安裝綠界的金物流外掛

啟用完成後,我們就能幫商店加上擴充的金物流功能啦!我們接著來學習!

備註:綠界官方的金物流外掛,系統預設會有測試的介接資料,方便下單測試流程(已經輸入在外掛裡面)。

等購物站流程測試完畢後,準備要正式上線運作,再把介接資料改成正式的即可(上面有提到,如何找到正式的介接資料)。


3. 綠界相關資源

綠界有些相關資源,在串接過程中可能會用到,這邊也一起提供給大家。

資源1:綠界管理後台(正式版&測試版)

綠界有分為正式版&測試版後台(測試下單用的),請記得 WordPress 裡的介接資料需設定成對應的,這樣管理後台才找得到資料。依照你的需求,擇一登入即可。

正式版的登入帳密就是你註冊綠界時,自己申請的那一組。

另外下圖是綠界後台(測試版)的登入介面,可點選左方的新型閘道做登入。

綠界測試後台
綠界測試後台

測試帳密它們都有提供,可點選上方連結,找到相關登入帳密,依照輸入即可。

綠界測試後台
綠界測試帳號&密碼

資源2:綠界介接資料(測試版)

下面是綠界提供用來測試的介接資料,金流部分有分為「 特店測試資料 」&「 平台商測試資料 」兩種,物流部分有分為「 B2C 及宅配 」&「 C2C 」兩種。

看你在 WordPress 是選擇哪一種,然後填入對應的介接資料即可。

MerchantID(測試)HashKeyHashIV
3002607(特店測試資料)pwFHCqoQZGmho4w6EkRm7iFT261dpevs
3002599(平台商測試資料)spPjZn66i0OhqJsQhT5OJckN45isQTTs
綠界提供的測試介接資料(金流)
MerchantID(測試)HashKeyHashIV
2000132(B2C 及宅配)5294y06JbISpM5x9v77hoKGq4kWxNNIS
2000933(C2C)XBERn1YOvpM9nfZch1ONHk4P4yqbl5LK
綠界提供的測試介接資料(物流)

備註:簡單理解就是,測試用的綠界管理後台,介接資料要用測試用的;正式的綠界管理後台,介接資料要用正式的。

資源3:測試用的信用卡號(綠界提供)

在跑信用卡付款的流程,當然就是看綠界有無提供測試卡號啦,答案是有的。請參考 綠界測試卡號

但記得,刷測試卡號時,請用測試用的介接資料(綠界提供的),不要用正式的介接資料(自己申請的),否則有狀況需自行承擔唷。

  • 信用卡號:4311-9522-2222-2222
  • 有效日期:大於今日
  • 安全碼:任意輸入三碼數字

刷完後,系統會發送認證簡訊到手機中,所以手機請填寫正確的,才能順利認證付款。


4. 綠界金流設定

這章節是「 WooCommerce綠界教學 」的金流設定。

綠界提供的金流方式,有超商貨到付款、信用卡付款、信用卡分期付款、網路 ATM、ATM、超商代碼付款、超商條碼付款、Apple Pay 等 .. ,非常符合台灣的付款方式。

前往 WooCommerce > 設定 > 付款,可把 超商貨到付款綠界科技(內有多種付款方式)這兩個打開,因為定期定額比較少用,這邊就不多提。(可依照自己需求調整,如下圖)

然後,點擊「 綠界科技 」選項。

WooCommerce綠界教學 :前往 WooCommerce 綠界金流
前往 WooCommerce 綠界金流

進入後在付款方式這裡,會看到有多種綠界整合進來的功能,可依自己需求選擇。

WooCommerce綠界教學 :綠界金流的多種付款方式
綠界金流的多種付款方式

前往網站前台看一下,Great!果然新增的付款功能都出現了。但目前都是使用綠界的虛擬商家帳戶,還沒串接正式商店。

綠界金流的多種付款方式(依照不同 WordPress 主題,顯示方式會有所不同)
綠界金流的多種付款方式(依照不同 WordPress 主題,顯示方式會有所不同)

改為正式的介接資料 – 金流

當購物流程都測試完畢後,就可把綠界提供的測試介接資料,改成正式的囉!這樣訪客才能正式購買。

而且金物流訂單,才會進入到正式的綠界管理後台,也代表你的商店才能正式運作。

前往 WooCommerce 設定 > 付款,點選 綠界科技

前往 WooCommerce 綠界金流
前往 WooCommerce 綠界金流

分別輸入正式的特店編號(MerchantID)、HashKey、HashIV,在綠界管理後台都找的到(剛上面有介紹),完成後記得儲存。

WooCommerce綠界教學 :設定綠界金流介接資料
設定綠界金流介接資料

這樣自己商店的金流,就和綠界正式串接起來囉,如果有刷卡消費什麼的,會是真實有金流進出的,綠界的商家後台都查得到資料。


5. 綠界物流設定

這章節是「 WooCommerce綠界教學 」的物流設定。

綠界有提供超商取貨的物流方式,加上 WooCommerce 系統 原有的物流種類,組合起來就滿夠中小型企業做使用。

新增運送區域+WooCommerce 預設物流種類設定

前往 WooCommerce 設定 > 運送方式,新增運送區域。

WooCommerce 運送方式設定
WooCommerce 運送方式設定

這邊範例新增台灣,點「 新增運送方式 」可新增多種物流方法,完成後記得儲存。接著前往 「 綠界科技超商取貨 」。

WooCommerce綠界教學 :WooCommerce 物流設定
WooCommerce 物流設定

綠界超商取貨設定

進入後打開「 啟用超商取貨 」,也可更改名稱方便顧客理解,舉例能取名「 超商取貨 」就好。

啟用綠界超商取貨模組
啟用綠界超商取貨模組

備註:物流類型用 B2C 或是 C2C 都可以,但建議先用預設的(B2C),因為綠界預設給的介接資料,也是給 B2C 專用的。

如果要改為 C2C,請記得介接資料要改為 C2C 專用的(金物流都要改),有關綠界提供的測試介接資料,我在上面章節有提到過。

接著,可填寫基本資料,設定超商運費&條件等 .. 。

WooCommerce綠界教學 :綠界超商取貨,相關內容設定
綠界超商取貨,相關內容設定

最後就選擇要哪種超商配合就好囉,完成後記得儲存。

超商取貨方式選擇
超商取貨方式選擇

設定完畢後,前往 WordPress 商店前台,看一下成果。Great!剛設定的超商確實都出現了,可以玩玩看。

WooCommerce綠界教學 :綠界商店取貨設定完成
綠界商店取貨設定完成

改為正式的介接資料(商店串接)- 物流

當購物流程都測試完畢後,就可把綠界提供的測試介接資料,改成正式的囉!這樣訪客才能正式購買。

一樣前往 運送方式 > 綠界超商取貨,分別輸入正式的特店編號(MerchantID)、HashKey、HashIV,在綠界管理後台都找的到(剛上面有介紹),完成後記得儲存。

輸入正式的商家介接資料
輸入正式的商家介接資料

這樣自己商店的物流,就和綠界正式串接起來囉,有關顧客所購買的訂單記錄,都可以在綠界後台查詢的到唷。


6. 如何產生一段標 / 託運單?

下單完成後,我們需把一段標 / 託運單列印出來,這樣才有辦法委託超商 or 物流公司,幫我們把貨寄給顧客,下面我分享幾個方法。

方法1:在 WordPress 點擊「 建立物流訂單 」

下單完成後,需在 WordPress 網站中點擊「 建立物流訂單 」按鈕,這樣物流訂單才會傳到綠界管理後台。

但綠界外掛有時候更新版本比較慢,所以像這次就遇到「 建立物流訂單 」按鈕沒有出現 ..,就需用別種方法解決(多謝網友分享,可參考 這則貼文串)。

首先,前往 WooCommerce > 訂單,找到你下的訂單,點擊運送方式的 Icon 修改。

WooCommerce綠界:編輯運送方式
WooCommerce綠界:編輯運送方式

點選「 複製帳單地址 」,然後更新。

WooCommerce綠界:複製帳單地址+進行更新
WooCommerce綠界:複製帳單地址+進行更新

這樣「 建立物流訂單 」按鈕就出來囉,點擊後前往綠界管理後台。

WooCommerce綠界:建立物流訂單
WooCommerce綠界:建立物流訂單

點選列印,就能把一段標 / 託運單給列印出來啦:)

WooCommerce綠界:列印一段標 / 託運單
列印一段標 / 託運單

方法2:手動建立出貨單

除了用系統自動建立的方法外,我們也能手動建立物流訂單(出貨單)。

首先,前往+登入綠界管理後台,點擊「 出貨訂單建立 」。

WooCommerce綠界:出貨訂單建立
出貨訂單建立

再輸入訂單相關資訊,就能建立物流訂單了,後面列印一段標 / 託運單的方法是一樣的,就不多說囉。

WooCommerce綠界:自行建立出貨單
WooCommerce綠界:自行建立出貨單

方法3:直接使用 RY Woocommerce Tools

剛上面的方法還是有點太繁瑣了,除了可能會遇到綠界自家的外掛更新慢,導致無法產生物流單等鳥事 ..。

加上還需要我們自行點擊,才有辦法產生物流單,會有點不是很人性化。

這裡推薦使用 RY Woocommerce Tools,它有整合多家金流公司的服務,而且功能比綠界自己開發的好太多了。更多 RY Woocommerce Tools 教學

剛提到的問題都不會發生,而且只要訂單狀態變為「 處理中 」,系統就會自動產生物流單到綠界,不需要我們還要手動點擊產生,非常的方便。


7. 綠界管理後台(常用動作)

綠界管理後台有很多常用的功能,下面我選幾個跟大家分享,希望能幫助到你們。

查詢金流訂單

登入到綠界管理後台,前往一般訂單查詢 > 全方位金流訂單,這裡會列出所有類型的金流,像是信用卡付款、ATM 轉帳、超商代碼等 ..。

點擊「 查詢 」就會顯示訂單資料了。

WordPress 綠界:查詢金流訂單
WordPress 綠界:查詢金流訂單

查詢物流訂單

前往物流管理 > 對帳查詢,就會出現物流訂單了,這裡能查詢訂單狀態,也能列印一段標 / 託運單。

WordPress 綠界:查詢物流訂單
WordPress 綠界:查詢物流訂單

至於如何手動建立出貨訂單,或是一些其他操作,剛上面章節也有簡單分享了,也能參考學習。


常見問題

如何在 WordPress 上串接金流,開始經營網路商店?

在 WordPress 上串接常見的金流很容易(像是綠界 / 藍新 ..),只要用安裝外掛的方式就能完成。

不用像一般網站製作一樣,還需特別請工程師花錢+時間製作,因為主流的幾乎都有現成的了。

如果要串接綠界,有推薦哪一款外掛嗎?

綠界自家開發的 ECPay Payment for WooCommerce(金流)ECPay Logistics for WooCommerce(物流),使用起來有些不是很人性化。

通常在串綠界金物流,我們都會使用 RY WooCommerce Tools,比較能處理掉問題。

像是這款外掛,就有提供黑貓 / 宅配通整合、支援「 取貨付款 」需搭配「 貨到付款 」的結帳方式、能先進行「 超商選擇 」再進入結帳動作等 ..。

一定要串接第三方金物流嗎?

這是不一定的,因為 WooCommerce 內建預設就有多種金物流方式選擇,只是並不支援台灣人習慣的信用卡付款、超商取貨等方式。

它能衍伸很多用法,也滿適合小型商家使用,可參考 WooCommerce 金流+物流

如果需要串接國外金流服務,也可參考 WooCommerce 串接 PayPal 金流

我的金物流訂單,沒有在綠界管理後台出現怎麼辦?

確認一下你用的介接資料是綠界測試版的,還是自己申請的正式版。

如果打算在綠界測試後台找到資料,介接資料必須用綠界提供測試用的那組(反之,綠界正式後台,就需用正式介接資料)。

還有,如果已經在使用正式介接資料下單,WordPress 上設定的物流類型(B2C 或 C2C),需和綠界會員後台的「 物流型態 」一致,才能順利運作。


聯絡犬哥網站

在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。

資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)

如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!

我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!

犬哥網站|台北網頁設計&SEO 行銷公司
犬哥網站|台北網頁設計&SEO 行銷公司

資源二:WordPress+SEO 超強線上課程

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。

帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

返回頂端