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

• 安裝與使用
• 商品上架流程
• 串接第三方金流(以 AllPay 為例)(本篇)

WooCommerce 是很熱門的購物車系統，所以有很多的第三方金流服務，都有提供相關的 plugin 或 API 讓我們可以與 WooCommere 完整串接，今天要介紹的這個第三方金流服務是歐付寶，老實說我已經忘記選擇它的原因，但用了 4 個月還算不錯，而且安裝非常方便，客服回應也很快，所以分享給各位。

▼ 這是歐付寶手續費的明細，詳細的內容可到金流收費總覽觀看

大家應該有發現超商付款的手續費非常高，所以我並沒有使用超商付款的功能，我自己的網路商店也只有用信用卡與 ATM/ WebATM。
歐付寶的好處是提供了很多種付款方式，但你不一定全部都要啟用，可以視自己的需求啟用即可。

安裝歐付寶

接下來要跟大家說怎麼安裝歐付寶囉。

▼ 請先在首頁的「下載專區」找到「套裝購物車模組」

▼ 找到第四個 WordPress WooCommerce 專用的外掛，下載後照著一般安裝外掛的流程，裝到你自己的 WordPress 網站。
⚠ 檔案裡面有一份 allPay 金流外掛套件安裝導引(WooCommerce).docx 也寫得很清楚，建議大家可以先行閱讀再安裝。

▼ 啟用後，在後台選單：「WooCommerce」→「設定」→「結帳」的分頁裡，會多了一個歐付寶，你可以在此設定想要啟用的付款方式，以及一些說明內容。

那麼要如何設定，讓顧客的錢進入你的口袋呢？接下來這個是最重要的地方，就是金鑰設定。

▼ 承上個步驟，將頁面稍微往下捲一些，會到「特店編號」、「金鑰」與「向量」的設定，只要將這邊設定完成，在商店的任何付款資料，歐付寶都能透過這個設定匯入到你的歐付寶帳戶。

WordPress 後台先到此暫停，讓我們回到歐付寶的網站去申請會員吧！

申請歐付寶會員，取得金鑰設定

請先註冊成為歐付寶的會員，一開始選擇個人會員就可以了，個人跟商務目前最大的差別，是收款額度的不同。

雖然很想把步驟寫清楚，但是歐付寶會員綁定手機號碼，我沒有其他的手機號碼可以測試截圖了，所以在此跟各位說聲抱歉 😢。但是歐付寶的網站步驟很清楚，註冊與申請是沒啥困難的。

註冊成為會員之後，可以去申請你的金鑰，申請金鑰的網址請點我。假設你已申請完畢，可以登入廠商後台取得你的特店編號、金鑰等設定。

▼ 這些設定可以在廠商後台的「系統開發管理」➡️「系統介接設定」找到，不管是 AllinOne 還是一般金流，數字都是一樣的，所以只要選擇一組填寫到 WooCommerce 即可。

▼ 在尚未正式開店前，可以先啟用測試模式，試試看你的購物流程是否暢通

---

以上就是 WooCommerce 串接歐付寶的簡單步驟，我個人覺得，歐付寶已經把付款做得很簡單了，而且所有資料都可以在廠商後台搜尋到，有任何不懂得也可以先到他的客服中心爬文，這邊就不再贅述了。

以後如果你覺得外掛的功能不足，也可以使用歐付寶提供的 API，讓你的購物網站擁有更多功能。但我這幾篇文章是針對「個人小額經營者」，相信不是所有人都會串接 API，而如果您們是「公司行號」，相信您們的團隊一定有工程師駐點，對 API 一定已駕輕就熟不需要我多說。所以在此我不會特別介紹 API 串接，但如果您有興趣，可以直接到歐付寶的官網下載各種串接規格。

如果有任何問題也歡迎在底下留言，謝謝各位！

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

• 安裝與使用
• 商品上架流程(本篇)
• 串接第三方金流(以 AllPay 為例)

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

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

小補充：商品簡短說明

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

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

小補充：商品圖庫

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

---

商品資料

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

1.商品類型

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

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

2.商品設定

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

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

---

▼ 先在後台「商品」→「運送級距」的選單裡，設定額外的運費

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

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

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

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

屬性

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

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

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

▼ 範例可以參考我的寫法：

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

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

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

變化類型

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

▼ 回到前頭，就可以跟各大購物網站一樣，選擇單一產品的各種款式囉～

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

---

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

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

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

• 安裝與使用 (本篇)
• 商品上架流程
• 串接第三方金流(以 AllPay 為例)

很久以前寫過一篇 WooCommerce 的商品上架流程，但因為圖片都失效了，所以一直把「重寫」這件事情放在心上，但因為有段時間沒碰 WooCommerce 了，怕誤導大家所以遲遲未下筆。

後來，因為我現在有經營手帳寫真市集，是用 WooCommerce + AllPay 串接，所以可以有比較新、也比較完整的經驗分享啦！也歡迎大家購買市集的商品，給我一點支持喔 😳

---

事前準備：挑選佈景主題與安裝外掛

我不會寫適用 WooCommerce 的佈景主題，所以我都是從網路上找免費的 WooCommerce 佈景自己玩。

開發 WooCommece 的 WooThemes 也有提供免費與付費的主題，有興趣的朋友也可以從 WooThemes 下載。此外 WordPress.org 裡，也有人會上傳適用 WooCommerce 的 Themes，不過就要自己稍微找一下囉。

我選用的範例主題是從 WordPress.org 下載的 Klasik，如果你們想要自己練習，可以跟我下載一樣的佈景主題。

佈景主題裝好後，就可以安裝 WooCommerce 外掛了，直接從後台搜尋 WooCommerce 即可。

▼ WooCommerce 相關外掛有很多，我們首先要安裝的是由 WooThemes 開發的 WooCommerce – excelling eCommerce 主程式

啟用外掛後的第一步，就是安裝翻譯檔啦！WooCommerce 有提供繁體中文的版本，所以大家不用緊張，放手去安裝吧 🙂

▼ 請點選「Install Translation」

▼ 安裝成功後，畫面會變成繁體中文，然後就一直點選紫色按鈕進行你的商品設定即可。

這些設定之後都可以從後台更改，現在不想設定也沒關係 😊

事前準備到此告一段落，一來 WooCommerce 有中文化，二來很多設定都是要靠大家實際的販售情況調整。設定也不難，如果真的有問題再留言給我吧！

---

WooCommerce 的架構

安裝完左側會多了兩個選單，分別是：

• WooCommeerce：WooCommerce 外掛相關設定，例如付款格式、付款方式、發送郵件… 等等。
• 商品：上架或分類商品設定，有點類似「文章」選單的感覺，有獨立的分類與標籤，每一個商品都是一個單獨的文章格式。

那麼，我們該如何在前台顯示 WooCommerce 的相關頁面資料呢？所有 WooCommerce 的資料，我們可以在「頁面」透過 shortcode 進行設定。

▼ 安裝 WooCommerce 之後，他也會自動新增一些頁面在「頁面」選單裡，像是商店、忘記密碼、我的帳號… 等。

這邊提醒大家，因為我們選的是繁體中文語系，所以 WooCommerce 預設會把網址代碼也設為中文，我建議大家到「頁面」選單後」，把所有頁面的代碼都改回英文，不然一些頁面可能會連不上喔！

固定網址也要記得改。固定網址的設定，可以選擇「商品起點」，總之就是確保你的固定網址都是/shop/而不是/商店/

接下來你可以試著連到商店頁面啦，網址通常是http://你的部落格網址/shop，如果你有試著新增商品，可以在這一頁看到所有的商品清單。

顯示特定的分類

一間店會有很多不同分類的商品，這是無庸置疑的，所以你一定會有一個需求，就是在顯示單一分類的所有商品。

假使我們以衣服 👔 為例子，頁面只會顯示分類為衣服的商品，就我所知的有兩種方法，一併分享給大家。 記得要先新增商品分類，這邊就不再敘述怎麼新增了。

直接把連結抓出來

第一種方法，是直接找到「商品分類」的真正網址。

這個方法很簡單，到後台的「商品分類」選單中，找到你想要連結的商品分類，然後選擇「查看」就可以啦 😊

搭配 shortcode

另外，記得我們前面有提到，WooCommerce 幫我們建了一些頁面以顯示資料嗎。

我們先從後台點選「頁面」→「我的帳號」，你會看到文章內有一段程式碼為：[woocommerce_my_account]，這段程式碼，就是我們常用的 WordPress Shortcode。

因此，我們可以用同樣的方式，新增一個叫做「衣服」的頁面，然後插入一段 shortcode，告訴 WordPress 顯示所有分類為衣服的商品：[product_category category="clothing" ]

category 後面接的clothing，就是看你的商品分類的代碼怎麼寫，這邊就跟著寫一樣的字。

( 更多的 WooCommerce Shortcut 資料，請參考 Shortcodes included with WooCommerce )

乍看之下，感覺第一種方法比較簡單，但如果你還有一些特殊的需求，例如顯示指定的 SKU 商品、指定的單一商品 … 等等，都可以透過 Shortcode 幫你達成喔！記得使用方法，都是在「頁面」把對應的 Shortcode 插入即可。

---

WooCommerce 系列教學的第一篇就到此告一段落了，其實安裝並不難，設定也很簡單。所以我只是把大家初步使用，可能會碰到的問題先整理好放出來，希望對大家有所幫助！

如果有照著安裝的朋友們，可以試著先建立幾個商品，接下來我會分享進階的的商品設定，所以如果你有新增商品的經驗，會更快上手 😊，閱讀或實作有任何問題，都歡迎留言告訴我。