Woocommerce 教學
Woocommerce + WordPress 開網店
本 Woocommerce 教學會講在 WordPress 網站上如何安裝並設定 Woocommerce，將網站變成能給客人提供 online 支付功能的網店，包括多種主要的信用卡、PayPal、等。
Woocommerce 是什麼？Woocommerce 跟 Worpress 有什麼關係？
Woocommerce 是一個開源軟件，可免費在 WordPress 網站上安裝並使用的電子商務外掛，即開網店。Wordpress 本身並不附帶電商網站的功能，必須通過額外安裝 Woocommerce plugin (外掛) 後，才能實現網店功能。
WordPress + Woocommerce 模式讓你可從零基礎，開始搭建擁有自己品牌 (brand name) 和網域 (domain name) 的電商網站，而網站有功能齊全的商店頁面、商品頁面、購物車 (cart)、結帳頁面，並讓客人可選擇不同的 online 支付方式進行付款。
- 使用 Woocommerce 前的準備工作
- 安裝 Woocommerce 外掛
- Woocommerce 設定
- 創建產品頁面 (Product Page)
- Simple Product (單個商品)
- Grouped Product (組合商品)
- External/Affiliate Product (會員聯盟商品)
- Variable Product (變量商品)
- 設定網上支付方式
- 設定 PayPal 支付
- 設定信用卡支付 (Stripe)
- 設定其他支付方式 – 包括 AliPay、WeChat Pay
- 創建必須的網頁
- 匹配所有必須的頁面
- 為什麼選擇使用 WordPress + WooCommerce 模式？
使用 Woocommerce 前的準備工作
由於Woocommerce 屬於一個 WordPress 外掛，你在使用 Woocommerce 前的準備工作會包括：
1. 購買一個網站寄存空間 – 可通過例如 Siteground、Hostgator 網站寄存服務提供商 (web hosting service provider) 購買。
2. 購買一個網域 (domain name) – 你的網店必須有一個獨立的網域。
3. 將 WordPress 安裝到你已購買的網站寄存空間 – 可參考 WordPress 教學 (安裝)。
4. 給你網站開啟 SSL 證書 (certificate) – WordPress 網站必須要有 SSL (或 https 協議) 才能安全使用 Woocommerce 外掛，並讓客人進行線上支付。
5. 安裝佈景主題 (WordPress theme) – 例如可先參考 OceanWP 教學，再安裝佈景主題。
安裝 Woocommerce 外掛
登入 WordPress 管理後台。
在左邊主菜單選中 Plugins，並點擊 Add New。
在 Add New Plugins 頁面上的關鍵字搜尋框輸入 Woocommerce。
在外掛結果中的 Woocommerce 點擊 Install Now，再點擊 Activate。
或你也可直接到官網下載 Woocommerce 外掛：
https://wordpress.org/plugins/woocommerce/
https://woocommerce.com/
Woocommerce plugin 激活後，你可選擇是否要使用繼續 Setup (設定) Woocommerce。點擊 Yes please 按鈕，就會進入 Woocommerce Setup Wizard 流程。
流程裡包括以下 5個步驟：
- Store Details (店鋪信息)
- Industry (行業)
- Product Types (商品類型)
- Business Details (商業信息)
- Theme (佈景主題)
Store Details
填寫你的商業地址，包括街道地址 (street address)、國家/地區 (country/region)、城市 (city)、郵政編碼 (postal code)、等，並點擊 Continue。
Industry
根據你網店要銷售的商品行業，從 Woocommerce Setup Wizard 中選擇一個行業。可選的行業包括：
- Fashion, apparel, and accessories (時裝、服裝、配飾)
- Health and beauty (健康、美容)
- Art, music, and photography (藝術、音樂、攝影)
- Electronics and computers (電子、計算機)
- Food and drink (飲食)
- Home, furniture, and garden (家裝、家具、花園)
- Education and learning (教育、學習)
- Other (其他)
點擊 Continue。
Product Types
勾選一個或多個產品類型：
- Physical products / 實體商品
- Downloads / 下載 – 例如電子書 (eBooks)
- Subscriptions / 訂閱 (會需要安裝付費 WordPress 外掛)
- Memberships / 會員制 (會需要安裝付費 WordPress 外掛)
- Bookings / 預訂 (會需要安裝付費 WordPress 外掛)
- Bundles / 套餐 (會需要安裝付費 WordPress 外掛)
- Customizable products / 自定義產品 (會需要安裝付費 WordPress 外掛)
點擊 Continue。
Business Details
接著會被問到以下 2個問題：
- How many products do you plan to display? / 在 WordPress 網站上，你打算展示多少個產品？(可選擇 1-10)
- Currently selling elsewhere? 你同時有在別的渠道銷售這些產品嗎？(可選擇 No)
選擇後，Woocommerce Setup Wizard 會給你勾選好，需要安裝以下 3個工具：
- Facebook 廣告
- Mailchimp (電郵行銷/名單行銷)
- Google Analytics (網站分析工具)
如果你不需要安裝任何一個，可反勾選。
點擊 Continue。
如果你之後需要進行電郵行銷，你可自行設置 Mailchimp 電郵行銷計劃。可參考這篇 Mailchimp 教學。
Theme
你可給你 WordPress 網站選擇一個 Theme (佈景主題)，當中一些 theme 是 Woocommerce 提供的。
如果現在不需要安裝 WordPress 網站佈景主題，點擊 Skip this step 連結 (在頁面最底部)。
之後，你可自己安裝例如 OceanWP 佈景主題 (一個功能強大的 WordPress theme) – 可參考這篇 OceanWP 教學。
完成 Woocommerce Setup Wizard 並繼續
接著你會被問及是否安裝 JetPack 外掛，你可點擊 No thanks 連結暫時拒絕。
你會需要繼續設定 Woocommerce 中的其他細節，包括：
- Add products / 添加商品信息
- Set up payments / 設定支付信息
- Set up tax / 設定稅務信息
- Set up shipping / 設定送貨信息
- Personalize the store / 自定義網店
Woocommerce 設定
Woocommerce 設定中，會區分為以下幾塊：
- General (通用)
- Products (產品) – 創建產品頁面 (Product Page)
- Shipping (發貨)
- Payments (支付)
- Accounts & Privacy (帳戶 & 私隱)
- Emails (電子郵件)
- Advanced (高級)
General (通用)
選中並打開 Woocommerce Settings，默認就是 General tab。
Store Address (店鋪地址)
在 General 頁面上，填寫你業務的實體地址 (street address)。
General Options (通用選項)
選擇/設定 selling location(s) (商品市場/地區)。可選擇所有國家、指定某幾個國家、指定排除某幾個國家。
選擇/設定 shipping location(s) (商品送貨地區)。可選擇給所有國家送貨、只給能銷售商品的國家送貨、指定某幾個國家能送貨、不需要送貨。
選擇/設定 default customer location (默認客人地區)。可選擇無默認客人地區、店鋪地址、其他。
Currency Options (貨幣選項)
選擇你 WordPress 所使用的貨幣 (currency)。例如你網店只要賣商品給香港市場，可選擇港幣 (HK＄)。
創建產品頁面 (Product Page)
要添加商品，你必須創建一個商品 (產品) 頁面。通過 Woocommerce，你可創建以下類型的商品頁面：
- Simple Product (單個商品)：你給你的一個商品創建一張商品頁面，而在這張商品頁面上只展示一個單一個商品的信息。
- Grouped Product (組合商品)：你希望將兩個或好幾個商品捆綁在一起在網店上銷售，所以需要創建一張 grouped product 頁面。
- External/Affiliate Product (會員聯盟商品)：如果你加入了某個或多個第三方的會員聯盟計劃 (affiliate programs)，並需要在你網站上銷售會員聯盟計劃所提供的商品 (即，並非你自己的商品)，你可創建 External/Affiliate Product 頁面。
- Variable Product (變量商品)：Variable Product 是比 Group Product 更為複雜的組合商品頁面。
Simple Product (單個商品)
Woocommerce 中的 Simple Product 讓你創建最簡單的單個商品。本例子中我們會創建 Simple Product (簡單商品)，並添加/輸入商品的所有信息。
在左邊主菜單選中 Woocommerce，點選 Products，並點擊 Add New。這時候會打開創建/編輯新商品 (product) 的頁面。
填寫商品名稱和描述
輸入商品的名稱 (標題, title) 和文字描述 (description)。
選擇為默認的 Simple Product
在 Product Data 板塊中選中 Simple Product (默認)。
輸入商品價格
在 Regular Price 欄中輸入商品的正常價格。
在 Sale Price 欄中輸入商品打折後的價格。
填寫商品短描述
雖然並非必填，你還是可輸入商品短描述 (Product short description)，去讓你商品頁面的文字內容更豐富。
添加商品照片
客人在決定購買你的商品前，都會希望先見到商品的模樣。通過照片，你可展示商品的模樣。
在 Product image 板塊下，點擊 Set product image 連結，並上傳至少一張商品照片。當然，你可給一個商品上傳多張照片。
發布商品頁面
點擊 Publish 按鈕去將網頁發布到互聯網上。
Grouped Product (組合商品)
如果你希望將多個商品合併為一個套餐產品，並在你的 WordPress 網店銷售，你會需要使用 Woocommerce 的組合商品 (grouped product)。
創建組合商品前，有以下幾個預備步驟：
- 創建一張單個商品頁面，並對商品設定價格。
- 繼續創建第二個或更多個的單個商品頁面，並對每一個商品設定價格。
- 創建一張組合商品頁面。
- 將所有單個商品頁面歸屬到組合商品頁面。
- 給組合商品設定價格。
Grouped Product (組合商品) 中的每個單個商品都會擁有自己的獨立網頁 (即，網址 URL)。
組合商品的一個使用例子是，你銷售的手提電腦 (portable / laptop computer) 中有不同的款式，黑色外殼、白色外殼、粉紅色外殼各自是自己一個款式。在組合產品中，你會給每一個款式 (顏色) 的商品創建一張獨立的產品頁面。
由於每個商品款式都有自己的獨立產品頁面，推廣的時候你可給每一個款式的商品獨立做行銷。
當然，Grouped Product (組合商品) 最終目的是可通過組合商品頁面去進行行銷。
創建 Grouped Product 頁面
在 Product Data 板塊中選中 Grouped Product。
選中 Linked Products，並在 Grouped products 輸入框裡輸入剛才創建過的單個商品名稱。
將所有單個商品都添加到 Grouped products 輸入框後，點擊 Publish 去發布組合商品頁面 (Grouped Product page)。
External/Affiliate Product (會員聯盟商品)
如果你的網店並非銷售你自己所提供的產品或服務，而是為其他網站去推廣產品／服務，你可使用 Woocommerce 的會員聯盟商品 (External/Affiliate Product)。
External/Affiliate Product 頁面設定完成後，客人來到產品頁面上點開產品，會被跳轉到你所推廣的網站。客人會在被推廣的網站上完成產品的購買和支付。
要創建會員聯盟商品，可在 Product Data 板塊中選中 External/Affiliate Product，並輸入其他需要的信息。
Variable Product (變量商品)
Simple Product 並不支持在一個商品中顯示多個款式。
除了使用 Grouped Product 去創建，通過 Variable Product 也可以創建擁有多個款式的商品。例如，一部手提電腦 (portable/laptop computer) 的外殼可以有 3種顏色選擇，包括黑色、白色、粉紅色。 通過 variable products，可創建一個商品，並在一個商品中添加/提供多種不同的顏色。
要創建變量商品，可在 Product Data 板塊中選中 Variable Product，並輸入其他需要的信息。
通過 Variable Product 創建的多個商品款式，都會使用同一張產品頁面網址 URL。
設定網上支付方式
網店必須要提供 online 支付方式，讓客人可在網站的 checkout 流程中選定商品後，直接完成支付。
你可通過 Woocommerce 外掛去給你的 WordPress 網店設定 online 支付方式。
本 Woocommerce 教學會講啟動 PayPal 和最常用信用卡 (credit cards) 的操作。
設定 PayPal 支付
你必須預先在 Woocommerce 裡進行設定，才能給你網店的客人提供 PayPal 支付方式 (payment method)。
要通過 PayPal 收款，你必須擁有一個 PayPal 賬戶。PayPal 賬戶可到官方網站註冊/開通：
https://www.paypal.com/
在 WordPress 管理後台左邊主菜單選中 WooCommerce，並點擊 Settings 去進入 Woocommerce 設定主頁。
在頂部菜單點選 Payments 去進入支付方式清單頁面。頁面上 Woocommerce 提供的默認支付方式。
其中一個默認支付方式是 PayPal。勾選啟動 PayPal，並點擊 Set up 連結。
PayPal email 一欄中輸入你的 PayPal 電郵地址，並保持 Enable PayPal Standard 已勾選。
點擊 Save changes 按鈕。
設定信用卡支付 (Stripe)
要允許客人在你 WordPress 網站上用信用卡支付並購買商品，你需要：
- 註冊一個 Stripe 帳戶。
- 在 WordPress 中安裝一個基於 Woocommerce 的 WordPress 外掛，去對接 Stripe 的數據信息。
開通 Stripe 帳戶
可到官方網站上去註冊一個 Stripe 帳戶：
https://stripe.com/
安裝 Woocommerce Stripe Payment Gateway (WordPress 外掛)
在 WordPress 管理後台中，從左邊菜單選 Plugins，並點擊 Add New。
在關鍵字搜尋欄中輸入 Woocommerce Stripe Payment Gateway。
在 Woocommerce Stripe Payment Gateway 的外掛結果上，點擊 Install Now (立即安裝)，點擊 Activate (激活)。
設定 Stripe 支付方式
在 WordPress 管理後台左邊主菜單選中 WooCommerce，並點擊 Settings 去進入 Woocommerce 設定主頁。
在頂部菜單點選 Payments 去進入支付方式清單頁面。頁面上會顯示 Woocommerce 提供的默認支付方式。
因為剛才安裝了 Woocommerce Stripe Payment Gateway 外掛，支付方式清單就出現 Stripe。
勾選啟動 Stripe，並點擊 Manage 去打開 Stripe 設置頁面。
在 Stripe 設置頁面上，勾選 Enable Stripe，這樣做會將 Stripe 的使用在 WordPress / Woocommerce 中啟用。
填寫 Title 和 Description。
- Title 中可填寫 Credit Cards。
- Description 中可填寫 Pay with credit cards。
你所使用的外掛 Woocommerce Stripe Payment Gateway 可讓你通過 Stripe 的測試模式，先進行 online 訂單交易的測試。
測試成功後，你必須換成正式模式 (Live Mode)。
反勾 (disable) Test mode (即是 Stripe 測試模式)。
從你的 Stripe 帳戶中獲取 Live Publisher Key 和 Live Secret Key 後，複製到 Woocommerce Stripe Payment Gateway 外掛中。
點擊 Save changes 保存所有設定。
設定其他支付方式 – 包括 AliPay、WeChat Pay
如果你的網站有面向其他地區的客人包括例如中國大陸，你可能需要考慮接受
支付 Alipay (支付寶) 或 WeChat Pay (微信支付)。你的選擇有：
- 通過第三方 WordPress 外掛實現 Alipay 或 WeChat Pay 支付方式。
- 通過使用官方的 API 數據接口 – 這方式需要你寫代碼將 Alipay / WeChat Pay 的數據接口跟你 WordPress 網站對接。
創建必須的網頁
按照電商網站的最佳實踐，你必須給你 WordPress 網站創建以下頁面：
- Shop page (商店主頁)
- Cart page (購物車頁面)
- Checkout page (結帳頁面)
- My Account page (我的帳戶頁面)
- Terms and Conditions page (使用條款頁面)
- Privacy Policy page (私隱條款頁面)
Shop page
在 WordPress 裡，創建一張新 Page (頁面)，將頁面命名做 Shop。將以下 shortcode 複製到內容框裡：
[products]
Cart page
創建一張新 Page (頁面)，將頁面命名做 Cart。將以下 shortcode 複製到內容框裡：
[woocommerce_cart]
Checkout page
創建一張新 Page (頁面)，將頁面命名做 Checkout。將以下 shortcode 複製到內容框裡：
[woocommerce_checkout]
My Account page
創建一張新 Page (頁面)，將頁面命名做 My Account。將以下 shortcode 複製到內容框裡：
[woocommerce_my_account]
Terms and Conditions page
創建一張新 Page (頁面)，將頁面命名做 Terms。無需添加 shortcode。
Privacy Policy page
創建一張新 Page (頁面)，將頁面命名做 Privacy。無需添加 shortcode。
匹配所有必須的頁面
完成創建必須的頁面後，你需要將所有網頁跟 Woocommerce 匹配上。
在 Woocommerce Settings 中，點選 Products。
在 Shop page 下拉框裡，找到相對應的 WordPress page (頁面)。
點擊 Save changes (保存)。
在 Woocommerce Settings 中，點選 Advanced。
在每一個下拉框裡，包括 Cart page、Checkout page、Account page、Terms and Conditions page，找到跟每一個類型相對應的頁面 (WordPress page)。
點擊 Save changes (保存)。
從左邊主菜單 Settings，點選 Privacy。
打開 Privacy 設置後，從下拉框裡選中剛才給 Privacy Policy 創建的頁面。
點擊 Use This Page 保存。
為什麼選擇使用 WordPress + WooCommerce 模式？
除了使用 WordPress + WooCommerce 模式去進行網店的部署，還有其他方法。
Shopify 和 Shopline 是其他 2種網站平台，並提供商品信息上傳、展示，和接受客人 online 支付的網店平台。
在網店、網上支付方式上，你可理解為 WordPress + WooCommerce 模式可相等於 Shopify 或 Shopline。
通過 WordPress + WooCommerce 搭建和運行網店，你並需要支付年費/月費/執照費 (license)。但一旦使用 Shopline 或 Shopify 開網店後，你必須持續支付月費或年費。
所以通過 WordPress + WooCommerce 搭建電商網站，其實成本是最低的。
我寫過這篇 WooCommerce 教學的英文版。
總結
WordPress 設置：
WordPress 外掛：
更多開網店的介紹/教學：
或開網課的介紹/教學：