WordPress × WooCommerce 實作路線

從零開設
WooCommerce 線上商店

四個階段，從主機與網域，到設計、商品、金流物流，最後測試上線。

全局地圖

四個階段，一條完整路線

1

基礎建設

Hostinger、網域、SSL、Astra 主題、備份

2

設計與版面

Elementor、部落格頁、頁首頁尾

3

表單與商品

WPForms、三種商品、折價券

4

金流與上線

ECPay、SMTP、測試訂單、Live Mode

階段 1 · 基礎建設

像蓋房子：土地、地址、安全鎖

主機 Hostinger

儲存全站資料。伺服器位置選印尼，較靠近台灣與東南亞客群，載入更快。

網域 Domain

品牌在網路上的地址（.com、.net、.online）。ICANN 要求如實填寫擁有者資料。

SSL 憑證

加密瀏覽器與伺服器間的連線，網址由 http 轉為 https，保護付款資訊。

固定網址

永久連結改為「文章名稱」/post-name/，網址簡短，對 SEO 更友善。

省錢提醒：Hostinger 預設自動續約。到 Billing 的 Domain 與 Web Hosting 關閉 Auto-Renewal，先評估營運成效再決定。

階段 1 · 主題與備份

Astra 打底，一鍵套用範本

Astra 像簡報母片，提供字體與版型規則；Starter Templates 是做好的整站範本。

  1. 安裝並啟用 Astra 主題
  2. 啟用 Starter Templates，選 Elementor
  3. E-Commerce 分類 → Plant Store 範本
  4. 選色盤與字體，按 Submit & Build

安全機制

  • 外掛與主題啟用 Enable Auto-updates，及時補上安全漏洞
  • 安裝 All-in-One WP Migration
  • 備份：Export → File，下載整站到電腦
  • 還原：Import，拖入備份檔即可回到原樣

階段 2 · 設計與版面

用 Container 思維，免寫程式排版

Container 容器

頁面由容器堆疊而成，大容器內可放小容器。兩欄＝父容器內放兩個橫向子容器。

調整 Direction、Alignment、Gaps。

響應式

切換 Tablet / Mobile 檢視，縮小字級與間距；手機版把方向改為 Right to Left，圖片會排到文字上方。

失誤救援

Ctrl + Z 復原，或用左下角 History 回到任一修訂版本。

部落格頁

Unlimited Elements 的 Post Blocks 與 Post Pagination；版面左 75% 文章、右 25% 側欄（最新文章、分類、廣告、標籤雲）。

頁首與頁尾

用 Astra Customizer 換 Logo、Favicon、中文選單並加入搜尋；頁尾改雙欄深色背景，放版權資訊與社群連結。

階段 3 · 聯絡表單

訪客留言表單：越簡單越好填

  1. WPForms → Add New，命名「訪客留言」
  2. 姓名欄改為 Simple，合併成一格
  3. 文字欄改名「留言」，刪除多餘欄位
  4. 設定送出按鈕文字與確認訊息
  5. 在聯絡頁以 WPForms 小工具嵌入

處理流程

訪客送出留言後，系統自動寄通知信到管理員信箱。你只要直接在信件中按「回覆」，就能回應客人。

階段 3 · WooCommerce 商品

三種商品，涵蓋多數生意

Simple

簡單商品

單一品項，無規格選項，如標準盆栽。填名稱、描述、圖片、分類、標籤；設定售價與特價（可排程），並輸入重量尺寸計算運費。

Variable

可變商品

  • 選擇 Variable product
  • 建立屬性：高度、盆色
  • 勾選 Used for variations
  • Generate variations 自動組合
  • 逐一設定圖片、價格與預設值
Virtual + Downloadable

數位／免費商品

同時勾選「虛擬」與「可下載」，運費欄位自動隱藏。上傳 PDF，可設定下載次數或到期時間。適合電子書、課程、講義。

階段 3 · 行銷與結帳

折價券與精簡結帳表單

折價券 Coupons

Marketing → Coupons → 自訂代碼，三種折扣：

  • Fixed cart discount：整單折固定金額
  • Percentage discount：整單折百分比
  • Fixed product discount：指定商品折固定金額

Checkout Field Editor

  • 安裝並啟用外掛
  • WooCommerce → Checkout Form
  • Edit：欄位改為中文
  • Remove：隱藏公司名稱、郵遞區號等
  • 拖曳調整填寫順序

階段 4 · 金流、物流、Email

在地金流物流＋可信任的寄信

RY WooCommerce Tools（ECPay 綠界）

  • 停用預設 Stripe / PayPal
  • 測試模式：複製特店編號與 HashKey、HashIV
  • 設定運送：免運、超商取貨、宅配
  • 付款：銀行轉帳、信用卡

為什麼系統信會進垃圾信箱？

WordPress 預設用 PHP mail() 寄信，寄件者與網域不符，又缺 SPF/DKIM 驗證，Gmail、Outlook 會判為垃圾信。

解法：網域信箱＋WP Mail SMTP

在 Hostinger 建立 service@你的網域 → 設定轉寄到 Gmail 並輸入驗證碼 → WP Mail SMTP 選 Other SMTP，填入 Host、Port 帳密與 From Email → 用 Email Test 確認進入收件匣。

階段 4 · 開張前最後確認

測試訂單通過，再切換 Live Mode

扮演買家測試

  • 選規格、加入購物車、套用折價券
  • 結帳選運送與信用卡，用測試卡付款
  • 測試模式無法選超商門市，屬正常現象
  • 確認出現 Order Received 並收到確認信
  • 後台開啟訂單，列印寄貨單
  • 正式上線：填入真實特店編號與 HashKey/HashIV，關閉兩處 Test Mode