重點整理
用 Elementor 製作 WooCommerce 單一商品頁，要在 Elementor Pro 的 Theme Builder 新增「單一商品」（Single Product）範本，拖入商品圖片、標題、價格、加入購物車、商品資料分頁、相關商品等 WooCommerce 小工具，最後把顯示條件設為全部商品或指定分類。這個功能需要 Elementor Pro 含電商功能的方案：2026 年 10 月定價頁上，最便宜的 Essential 不含電商功能，要選 Advanced Solo（一年 US$84）以上。
WooCommerce 預設的商品頁版面由佈景主題決定，想在商品圖和說明之間多放一段品牌介紹、運送說明或 FAQ，不會寫程式就很難做到。用 Elementor Pro 的單一商品範本，可以用拖拉方式重新排版商品頁，而且只要做一個範本，所有商品就會套用，商品再多也不用一頁一頁修改。這篇分三個部分：建立範本、放入商品小工具、設定顯示條件。部分截圖拍攝於較早的 Elementor 版本，面板外觀可能略有不同。
需要的外掛：免費的 Elementor（2026 年 10 月為 4.3.3）、Elementor Pro，以及 WooCommerce。三者都啟用後，Elementor 才會出現 WooCommerce 相關小工具。
建立單一商品範本
步驟一：在 Theme Builder 新增 Single Product
確認 Elementor、Elementor Pro 與 WooCommerce 都已啟用，從 WordPress 後台 Elementor 的範本選單打開 Theme Builder，選擇 Single Product（單一商品），再按新增。
步驟二：替範本命名
輸入容易辨識的名稱，例如「一般商品頁」，按建立。
步驟三：選擇現成版型或從空白開始
建立後會先出現 Elementor 的範本庫，可以套用現成的商品頁版型再微調，也可以關掉視窗從空白開始。
步驟四：找到商品相關小工具
進入編輯畫面後，左側小工具面板最上方會列出和單一商品頁相關的小工具，直接拖到頁面即可。
放入商品小工具組成商品頁
步驟一：加入 WooCommerce 麵包屑
先放 WooCommerce 麵包屑（Breadcrumbs）小工具，可以在樣式中調整文字與顏色。如果主題本身已經有麵包屑，就不必重複加入。
步驟二：建立左圖右文的兩欄結構
接著建立商品主要區塊，這裡用左邊商品圖、右邊商品資訊的兩欄排版。新版 Elementor 用容器（Container）取代舊的區段與欄位，選擇兩欄的容器結構即可。
步驟三：左欄放商品圖片
左欄放入商品圖片（Product Images）小工具，會顯示商品主圖與商品圖庫縮圖，滑鼠移上去可以放大看細節，也能設定邊框與是否顯示特價標籤。
步驟四：右欄放標題、價格與簡短說明
右欄依序放入商品標題、商品價格、商品簡短說明、商品資訊（Product Meta）等小工具。可變商品如果各規格價格不同，價格會顯示成價格區間。
步驟五：把商品資訊的標籤改成中文
商品資訊小工具會顯示貨號、分類、標籤等，如果前面的標籤文字是英文，可以在小工具的 Captions 設定改成中文。
步驟六：加入購物車按鈕
放入加入購物車（Add To Cart）小工具，會依照簡單商品或可變商品自動顯示數量欄位或規格選單。
如果規格選單的樣式跑掉，通常是套到了主題的預設樣式，可以在小工具的樣式分頁分別調整按鈕、數量欄位與規格選單。
步驟七：加入商品資料分頁
下方放入商品資料分頁（Product Data Tabs）小工具，會顯示「描述」「額外資訊」「評價」等分頁。描述的內容來自商品編輯頁的主要內容欄位，額外資訊則顯示重量、尺寸與商品屬性。分頁項目本身是固定的，想新增自訂分頁需要另外安裝外掛或寫程式。
步驟八：加入相關商品
相關商品（Product Related）小工具預設顯示同分類或同標籤的商品。想自己挑選要顯示的商品，可以改用加購商品（Upsells）小工具，或用 Pro 的商品小工具指定來源。
相關商品列表也能調整細節，例如特價標籤是否顯示、背景顏色與圓角。
設定範本的顯示條件
步驟一：發布並開啟顯示條件
內容完成後按「發布」，會跳出顯示條件（Display Conditions）視窗；之後要修改，也可以從發布按鈕旁的選單重新開啟。
步驟二：選擇套用範圍
預設是套用到所有商品。如果不同分類要用不同的商品頁（例如服飾和配件），可以把條件改成指定分類、標籤或個別商品，再為其他分類建立另一個範本。完成後按儲存。
步驟三：到前台確認商品頁
打開任一商品頁，確認版面已經套用新範本。下圖是依照 WooCommerce 預設版面重新排版的結果，你也可以加入品牌介紹、運送說明等區塊。
常見問題
Elementor 免費版可以修改 WooCommerce 商品頁嗎？
不行，單一商品範本屬於 Elementor Pro 的 Theme Builder 功能，而且要選含電商功能的方案。免費版只能編輯一般頁面，無法建立套用到所有商品的範本。
Elementor Pro 哪個方案可以做 WooCommerce 商品頁？
2026 年 10 月的定價頁上，Essential 方案標示不含電商功能（eCommerce features），Advanced Solo（一年 US$84、1 個網站）、Advanced（一年 US$108、3 個網站）以上才包含。價格與續約價以官方定價頁為準。
做好的範本沒有套用到商品頁怎麼辦？
先檢查顯示條件是否設定為商品或對應的分類，再確認沒有另一個條件更精確的單一商品範本搶先套用；如果網站使用快取外掛，記得清除快取後再看。
結語
用 Elementor Pro 的單一商品範本，只要在 Theme Builder 做好一個版面、設定顯示條件，所有商品頁就會一起更新，比逐頁修改或改主題程式省事很多。同一個網站也能為不同分類準備不同範本。商品列表頁同樣可以用 Elementor 製作，可以參考 Elementor 建立 WooCommerce 商品列表頁教學。