WooCommerce 頁面
WooCommerce 建立和使用的核心頁面說明。
安裝 WooCommerce 時,會自動建立數個核心頁面。這些頁面對商店運作至關重要。
核心頁面
商店頁面
用途: 顯示所有商品的主要目錄頁面
功能:
- 商品網格或列表顯示
- 商品篩選
- 分類和排序選項
- 分頁
自訂:
- 使用簡碼: [woocommerce_shop]
- 透過外觀 > 自訂工具調整
- 使用區塊編輯器編輯
位置: 通常設為 /shop/
購物車頁面
用途: 顯示購物車內容並允許修改
功能:
- 顯示購物車商品
- 調整數量
- 移除商品
- 套用優惠券
- 顯示小計和總計
- 前往結帳
簡碼: [woocommerce_cart]
位置: 通常設為 /cart/
結帳頁面
用途: 顧客完成購買的頁面
功能:
- 收集帳單資訊
- 收集物流資訊
- 選擇物流方式
- 選擇付款方式
- 訂單審查
- 完成購買
簡碼: [woocommerce_checkout]
位置: 通常設為 /checkout/
我的帳戶頁面
用途: 顧客管理帳戶的中心
功能:
- 儀表板
- 訂單歷史
- 地址管理
- 帳戶詳情
- 下載項目(數位商品)
- 訂閱管理(若使用)
簡碼: [woocommerce_my_account]
位置: 通常設為 /my-account/
條款和條件頁面
用途: 顯示商店的條款和條件
功能:
- 在結帳時顯示
- 要求顧客同意
- 法律保護
設定: WooCommerce > 設定 > 進階 > 頁面設定
額外頁面
隱私權政策頁面
用途: 說明資料收集和使用政策
重要性:
- GDPR 合規要求
- 建立信任
- 法律要求
設定: 設定 > 隱私權
退款政策頁面
用途: 說明退款規則和流程
應包含:
- 退款條件
- 退貨期限
- 退款流程
- 例外情況
物流政策頁面
用途: 說明物流選項和費用
應包含:
- 物流方式
- 物流時間
- 物流費用
- 國際物流
頁面設定
指定頁面
前往 WooCommerce > 設定 > 進階 > 頁面設定
為每個功能選擇對應頁面:
- 商店基本頁面
- 購物車頁面
- 結帳頁面
- 我的帳戶頁面
- 條款頁面
建立遺失頁面
若頁面被誤刪:
- 前往 WooCommerce > 狀態 > 工具
- 找到「建立預設 WooCommerce 頁面」
- 選擇「建立頁面」
自訂頁面
使用區塊編輯器
- 前往 頁面 > 所有頁面
- 選擇要編輯的頁面
- 使用區塊新增內容
- 儲存變更
新增內容
在頁面中可以新增:
- 文字和圖片
- 商品區塊
- 類別展示
- 橫幅
- 行銷內容
保留簡碼
編輯頁面時,保留 WooCommerce 簡碼:
[woocommerce_cart][woocommerce_checkout][woocommerce_my_account]
移除這些簡碼會導致功能失效。
頁面範本
選擇範本
某些佈景主題提供專用範本:
- 編輯頁面
- 在右側邊欄找到「頁面屬性」
- 選擇範本
- 更新頁面
常見範本
- 全寬度: 移除側邊欄
- 側邊欄: 包含側邊欄
- 無標題: 隱藏頁面標題
- 商品目錄: 專為商店頁面設計
端點頁面
我的帳戶端點
「我的帳戶」頁面包含多個端點:
/my-account/orders/- 訂單/my-account/downloads/- 下載/my-account/edit-address/- 地址/my-account/edit-account/- 帳戶詳情
自訂端點
前往 WooCommerce > 設定 > 進階 > 帳戶端點
修改端點的 URL slug:
- 訂單
- 下載
- 地址
- 帳戶詳情
- 登出
側邊欄
新增側邊欄
- 前往 外觀 > 小工具
- 找到「商店側邊欄」
- 新增小工具:
- 商品搜尋
- 商品類別
- 商品標籤
- 篩選器
- 最近瀏覽
移除側邊欄
使用全寬度範本或透過程式碼:
remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
SEO 優化
頁面標題
設定描述性標題:
- 商店: 「商店 - [品牌名稱]」
- 購物車: 「購物車 - [品牌名稱]」
- 結帳: 「結帳 - [品牌名稱]」
Meta 描述
為每個頁面撰寫獨特的 meta 描述:
在 [品牌名稱] 瀏覽我們的商品系列,找到最適合你的商品。
使用 SEO 外掛
推薦外掛:
- Yoast SEO: 全面的 SEO 解決方案
- Rank Math: 功能豐富的 SEO 外掛
- All in One SEO: 易用的 SEO 工具
效能優化
快取
啟用頁面快取:
- WP Super Cache
- W3 Total Cache
- WP Rocket
圖片優化
優化頁面上的圖片:
- 使用適當尺寸
- 壓縮檔案大小
- 使用 WebP 格式
- 延遲載入
程式碼優化
最小化不必要的程式碼:
- 移除未使用的外掛
- 優化 CSS 和 JavaScript
- 使用 CDN
安全性
SSL 憑證
確保關鍵頁面使用 HTTPS:
- 結帳頁面
- 我的帳戶頁面
- 登入頁面
表單保護
新增保護措施:
- reCAPTCHA
- 防垃圾郵件外掛
- 防暴力破解
疑難排解
頁面顯示 404
檢查:
- 頁面是否發布
- 固定網址設定
- 重新儲存固定網址
- 清除快取
簡碼不運作
確認:
- 簡碼拼寫正確
- WooCommerce 已啟用
- 沒有外掛衝突
- 佈景主題支援
樣式問題
驗證:
- 佈景主題相容性
- CSS 衝突
- 外掛衝突
- 快取問題
最佳實務
清晰導航
確保顧客能輕鬆找到頁面:
- 在主選單包含商店連結
- 在頁尾包含政策連結
- 提供麵包屑導航
內容品質
維護高品質內容:
- 清楚的說明
- 正確的資訊
- 定期更新
- 無錯字或語法錯誤
行動友善
確保所有頁面:
- 響應式設計
- 易於導航
- 快速載入
- 觸控友善
測試
定期測試:
- 所有頁面連結
- 表單提交
- 結帳流程
- 跨瀏覽器相容性