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

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

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

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

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

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

如果功能不夠使用,可再搭配這篇文章,使用綠界開發的 WordPress 外掛,完成金物流功能擴充。

安裝完成後,WooCommerce 就能支援信用卡付款、商店貨到付款、商店條碼、ATM轉帳、超商取貨等 .. ,多種金物流方式。

至於其他金物流廠商串接+使用方法其實也差不多,主要就是它們要有開發支援 WordPress 使用的外掛,其他流程就大同小異。章節如下:

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


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

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

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

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

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

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

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

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

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

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


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

在開始「 WooCommerce綠界教學 」前,需註冊綠界科技的會員,才能使用相關金物流服務。前往 綠界官網 點選右上角「 註冊 」。

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

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

但有部分功能綠界那邊會進行審核,這就需經過他們的二度認證,可能會需要一些工作天,才能夠使用。

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

註冊完成,可前往綠界的商家後台 > 系統開發管理 > 系統介接設定,商店介接資料都放在這。

其中綠界金 / 物流中的 MerchantID(商家代號)、HashKeyHashIV,先保留起來等等會用到,這些都是重要資料請勿外流

WooCommerce綠界教學 :綠界的金物流介接資料
綠界的金物流介接資料

安裝綠界金物流外掛

綠界會員申請完成後,前往 WordPress 後台的外掛 > 安裝外掛,安裝綠界開發的 WordPress 金物流外掛,搜尋 ecpay 就會出現。

分別安裝+啟用 ECPay Payment for WooCommerce(金流)ECPay Logistics for WooCommerce(物流) 這兩款外掛。

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

操作方法也可參考綠界的官方金流文件官方物流文件。如果看不懂沒關係,本文會教如何使用。

備註:一開始安裝綠界的 WordPress 金物流外掛,系統會提供虛擬的介接資料,方便測試金物流。等購物流程測試完畢後,可再把介接資料改成正式的,下面我會教學如何操作。


3. 綠界金流設定

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

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

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

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

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

備註:金流標題名稱都能更改,因為預設前面都加綠界會有點刻意,而且對顧客也沒幫助。

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

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

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

綠界金流的多種付款方式(前台顯示)
綠界金流的多種付款方式(前台顯示)

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

當網站架設完成,或是整個購物流程都測試完畢後,就可把原來綠界提供的介接資料,改成正式的囉!這樣訪客才能正式購買。

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

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

記得開啟金流功能,標題和說明都可調整成訪客容易理解的文字,分別輸入特店編號(MerchantID)、HashKey、HashIV,在綠界後台都找的到,剛上面有介紹。

設定完成後,記得儲存。

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

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


4. 綠界物流設定

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

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

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

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

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

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

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

綠界超商取貨設定

進入後最重要的請 啟用超商取貨模組

然後可更改名稱方便顧客理解,舉例取名「 超商取貨 」就好。選擇是 C2C or B2B 商家類型。

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

備註:當前的特店編號(商家編號)、HashKey、HashIV 都先不更動,這是綠界提供的測試帳戶,等購物流程都測試完畢後,再改為正式的即可。

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

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

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

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

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

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

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

當網站架設完成,或是整個購物流程都測試完畢後,就可把原來綠界提供的介接資料,改成正式的囉!這樣訪客才能正式購買。

一樣前往 運送方式 > 綠界超商取貨,分別對應輸入 MerchantID(特店編號)、HashKey、HashIV,最後記得儲存就可以囉。

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

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


WordPress學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

當然,如果怕問題描述不清楚,可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

希望這對你有所幫助,祝架站順利啦。

發表迴響

Scroll to Top