Elementor 與 WooCommerce 一起形成了在 WordPress 上建立自訂網上商店的靈活組合。WooCommerce 處理電子商務功能（產品、購物車、結帳、付款），而 Elementor 則讓您可以視覺上控制這些商店頁面的外觀和功能。在本指南中，我們將介紹如何使用 Elementor 建立關鍵的 WooCommerce 頁面，包括產品頁面、商店存檔和購物車體驗。
本教程假設您已安裝 WordPress、WooCommerce 和 Elementor Pro。WooCommerce 小工具需要 Elementor Pro，免費版本的 Elementor 不包含這些小工具。
開始之前需要的條件
| 需求 | 為什麼需要 | 在哪裡獲得 |
|---|---|---|
| WordPress 6.x+ | 核心 CMS 平台 | wordpress.org |
| WooCommerce（免費） | 電子商務功能 | WordPress 插件目錄 |
| Elementor Pro | WooCommerce 小工具和主題建構器 | PluginTheme.net |
| 相容的主題 | 您商店的基礎 | 主題選擇指南 |
| 範例產品 | 設計模板的內容 | WooCommerce → 工具 → 匯入範例數據 |
了解 Elementor 的 WooCommerce 建構器
Elementor Pro 在其主題建構器系統中包含了一個專用的 WooCommerce 建構器。這使您能夠為以下項目創建自訂模板：
- 單一產品頁面：控制單個產品頁面的佈局
- 產品存檔：自訂商店頁面和類別頁面
- 購物車頁面：設計自訂購物車佈局
- 結帳頁面：自訂結帳表單佈局
- 我的帳戶頁面：重新設計客戶帳戶儀表板
每個模板使用 WooCommerce 特定的小工具，從您的產品中提取動態數據。這意味著您只需設計一次佈局，便可自動應用於所有產品（或特定類別）。
建立自訂產品頁面
步驟 1：創建模板
- 在您的 WordPress 管理後台導航至 模板 → 主題建構器
- 點擊 "新增" 並選擇 "單一產品" 作為模板類型
- 選擇一個預建的產品頁面模板或從空白畫布開始
- Elementor 編輯器將打開，面板中將顯示 WooCommerce 小工具
步驟 2：添加 WooCommerce 小工具
產品頁面的關鍵 WooCommerce 小工具：
| 小工具 | 顯示內容 | 自訂選項 | |
|---|---|---|---|
| 產品圖片 | 帶縮略圖和燈箱的畫廊 | 畫廊佈局、縮略圖位置、縮放切換 | |
| 產品標題 | 產品名稱（H1） | 字體排版、顏色、對齊 | |
| 產品價格 | 常規價格和促銷價格 | 字體排版、促銷標籤顏色、佈局 | |
| 產品評分 | 來自評論的星級評分 | 星星顏色、大小、對齊 | |
| 加入購物車 | 數量選擇器 + 加入購物車按鈕 | 按鈕樣式、顏色、數量佈局 | |
| 產品簡短描述 | 簡要產品摘要 | 字體排版、間距 | |
| 產品元數據 | SKU、類別、標籤 | 佈局、字體排版、分隔符 | |
| 產品數據標籤 | 描述、評論、附加信息標籤 | 標籤樣式、邊框、間距 | |
| 相關產品 | 來自同一類別的產品 | 列數、數量、排序 | |
| 加售產品 | 手動鏈接的加售產品 | ducts | 欄位、數量、佈局 |
步驟 3：佈局最佳實踐
高轉換率的產品頁面遵循經過測試的佈局模式：
- 折疊區域上方： 產品圖片（左側，50-60% 寬度）+ 標題、價格、評分、簡短描述和加入購物車按鈕（右側，40-50% 寬度）
- 折疊區域下方： 產品數據標籤（完整描述、規格、評論）
- 底部區域： 相關產品和升級銷售以網格形式顯示（3-4 欄）
- 信任元素： 運送資訊、退貨政策、靠近加入購物車按鈕的安全徽章
在桌面和移動設備上，保持加入購物車按鈕在可見範圍內，無需滾動。使用對比色來吸引注意。
自訂商店頁面（產品檔案）
步驟 1：創建檔案模板
- 轉到 模板 → 主題建構器 → 產品檔案
- 添加新模板並選擇“產品檔案”作為類型
- 分配顯示條件（所有檔案、特定類別或標籤頁面）
步驟 2：配置產品網格
檔案產品小工具顯示您的產品列表，並提供以下選項：
- 欄位： 2-6 欄（3-4 欄對於大多數商店效果良好）
- 每頁產品數量： 12-24 是用戶體驗的標準
- 分頁： 編號頁面、“加載更多”按鈕或無限滾動
- 排序下拉選單： 允許客戶按價格、人氣或評分排序
- 促銷徽章： 自訂促銷徽章的位置、顏色和文本
對於產品較多的商店，在網格上方添加類別過濾器。您可以使用 Elementor 的菜單小工具或像 JetWooBuilder 這樣的產品過濾插件來獲取進階過濾選項。
設計購物車頁面
Elementor Pro 讓您自訂購物車頁面的佈局。一個好的購物車頁面應該：
- 在乾淨的表格中顯示產品圖片、名稱、價格和數量
- 顯示明顯的總金額
- 包含一個“繼續購物”按鈕，返回商店頁面
- 顯示 運費計算器，讓客戶可以估算運送成本
- 在購物車表格下方顯示交叉銷售產品
Elementor 購物車小工具用視覺編輯器替換了默認的 WooCommerce 購物車佈局，您可以為每個元素進行樣式設置——表格邊框、按鈕顏色、字體和間距。
自訂結帳頁面
結帳頁面直接影響您的轉換率。Elementor Pro 的結帳小工具提供對以下內容的控制：
- 表單佈局： 單欄或雙欄的計費/運送表單
- 訂單摘要位置： 與表單並排或在上方/下方
- 按鈕樣式： 下單按鈕的顏色、大小和文本
- 付款區域： 付款方式的單選按鈕或選項卡佈局
- 信任徽章： 在付款表單附近添加安全圖標和保證文本
有關結帳轉換優化的提示，請參見我們的 WooCommerce 結帳優化指南。
性能考量
Elementor 向您的頁面添加 CSS 和 JavaScript。對於 WooCommerce 商店，性能與轉換率直接相關。請記住以下提示：
- 使用 Flexbox 容器 而不是區段/欄位，以減少 DOM 元素
- 優化產品圖片： 使用 WebP 格式、適當的尺寸和延遲加載。請參見我們的 圖片優化指南
- 限制小工具數量： 每個小工具都會增加標記；僅使用您所需的部分
- 啟用 Elementor 的性能功能： 改進資產加載，改進 CSS 加載
- 使用緩存插件： WP Rocket 與 Elementor WooCommerce 設置配合良好
Elementor WooCommerce 的基本附加元件
這些 Elementor 附加元件擴展了 WooCommerce 的構建能力：
| 附加元件 | 主要 WooCommerce 功能 |
|---|---|
| JetWooBuilder | 高級產品網格，自定義存檔模板，帶有條件邏輯的單產品佈局 |
| Essential Addons Pro | 產品網格，產品輪播，WooCommerce 結帳 |
| Happy Elementor Addons | 產品類別網格，迷你購物車，產品輪播 |
常見問題
我需要 Elementor Pro 來使用 WooCommerce 嗎？還是免費版本可以使用？
WooCommerce 特定的小工具（產品圖片、加入購物車、產品數據標籤、購物車、結帳等）需要 Elementor Pro。Elementor 的免費版本不包括這些小工具。您可以使用免費版本設計常規頁面，但自定義 WooCommerce 模板需要 Elementor Pro。
我可以使用 Elementor 來設計結帳頁面嗎？
可以。Elementor Pro 包含一個結帳小工具，取代默認的 WooCommerce 結帳佈局。您可以自定義表單字段、訂單摘要、付款部分和整體佈局。但是，請小心過度自定義，可能會破壞支付網關集成—在進行更改後，始終測試完整的購買流程。
我如何為不同類別創建不同的產品頁面佈局？
在 Elementor 的主題生成器中，您可以為每個模板分配顯示條件。為服裝創建一個產品頁模板（帶有尺寸/顏色選擇器），為數字產品創建另一個模板（不包含運送信息），等等。每個模板僅適用於指定類別中的產品。
Elementor 會減慢 WooCommerce 的速度嗎？
Elementor 為任何頁面增加了 CSS 和 JavaScript 的開銷。在包含許多小工具的產品頁面上，這可能會使加載時間比默認的 WooCommerce 模板增加 0.5-1.5 秒。使用 Elementor 的內置性能功能、優化圖片和使用緩存插件有助於減輕這一影響。對於性能要求高的商店，考慮使用像 GeneratePress 這樣的輕量主題。
我可以將 Elementor WooCommerce 模板與任何主題一起使用嗎？
大多數 Elementor WooCommerce 模板可以與任何支持 WooCommerce 的主題一起使用。然而，一些主題可能有自己的產品頁樣式，與 Elementor 模板衝突。像 Astra、GeneratePress 和 OceanWP 這樣的主題旨在與 Elementor 無縫協作，並為自定義模板提供最乾淨的畫布。
獲取 Elementor Pro 以建設 WooCommerce 商店
訪問所有 WooCommerce 小工具、主題生成器和 100 多個專業模板。直觀地構建自定義產品頁面、商店存檔和結帳佈局。
瀏覽 Elementor Pro →
