把加入購物車按鈕搬到價格正下方、在商品標題旁邊掛一個庫存倒數的小標籤，這類需求聽起來很基本，WooCommerce 預設的商品頁卻常常做不到。打開後台試著調整，能動的通常只有顏色、字體這幾項外觀選項，商品資訊要放在哪個位置、用什麼順序排列，早就寫死在佈景主題的模板檔案裡，不懂 PHP 只能將就著用。
Elementor WooCommerce 這個組合能解決的正是這件事。搭配 Elementor Pro 內建的 WooCommerce Builder，商品頁被拆成一個個獨立的小工具，圖片、標題、價格、加入購物車、相關商品都能自由拖拉組合位置，設計好一次就套用到全部商品，不用逐頁手動調整。這篇會從裝好前置外掛開始，依序做出單一商品頁範本、商店與分類頁範本，把加入購物車按鈕跟相關商品區塊排到位，最後處理顯示條件的分工與幾個最常卡關的地方。先從 WooCommerce Builder 能做什麼、跟預設商品頁差在哪裡講起。
Elementor WooCommerce Builder 是什麼？和預設商品頁有什麼差異？
Elementor WooCommerce Builder 是 Elementor Pro 裡專門用來設計 WooCommerce 頁面的工具，透過主題建構器（Theme Builder）建立「範本」，設計一次就能套用到全部商品，或指定某個分類，不用逐頁手動排版，也不需要碰任何一行 PHP。
跟 WordPress 內建能調的地方比一比，差別就很明顯。多數情況下，WooCommerce 或佈景主題後台能改的只有顏色、字體這類外觀選項；商品資訊要擺在哪個位置、用什麼版面排列，是寫死在佈景主題的範本檔案裡的，想搬動一個按鈕的位置，得改程式碼才行。WooCommerce Builder 把整個商品頁拆成一個個獨立的小工具，標題、圖片、價格、加入購物車、相關商品都能自由拖拉、決定誰放在誰旁邊，動的是版面結構本身，不只是換顏色而已。
它管的核心是兩種範本：Single Product（單一商品頁）負責所有商品共用的詳情頁版面，Product Archive（商品列表／分類頁）負責商店首頁、分類頁、標籤頁這類列表頁的版面，兩者各自有專屬的小工具組合，後面兩節會分別拆開講。
動手做之前，WooCommerce 和 Elementor Pro 要先裝好
這套功能要動起來，兩個外掛缺一不可。先確認 WooCommerce 本身有裝好、啟用，也照精靈完成基本設定，例如地區、幣別、運費；如果網站上還沒有 WooCommerce，Elementor 編輯器裡完全不會出現任何商品相關的小工具，這是最容易卡住的第一步。
接著才是 Elementor Pro，免費版的 Elementor 拖不出任何 WooCommerce 小工具，WooCommerce Builder 整套功能都要靠付費的 Pro 版才解鎖。兩者都裝好後，回到「Elementor > 設定」確認「商品」這個文章類型有被 Elementor 支援，多數安裝完會自動勾選；如果小工具面板裡還是看不到商品相關項目，先回來這裡把這個開關確認打開。
版本門檻不算高，官方標示 WooCommerce Builder 需要 Elementor Pro 2.1 以上、WooCommerce 3.4 以上，現行版本都遠遠超過這個門檻。訂閱方案要留意一個細節，最入門的方案不含 WooCommerce Builder，要選到中階以上（官方分級名稱可能隨方案調整而變動，訂閱前直接到官網比對功能表最保險）才會解鎖商品範本功能，不是隨便一個付費方案都通用。
Single Product 範本，把商品頁骨架一次設計好
到後台「Templates > Theme Builder > Single Product > Add New」，類型選 Single Product，取一個好辨識的名稱建立範本。畫面會先跳出版型庫，可以挑一個現成範本直接套用再微調，或關掉版型庫從空白畫布自己排，兩種做法都行，端看想要多少自由度。
這裡要先建立一個觀念，設計的不是「某一件商品」的內容，而是所有商品共用的骨架。標題欄不是寫死的固定文字，而是掛動態內容，每個小工具負責自動抓對應商品的資料，換一件商品瀏覽，同一份範本顯示的標題、圖片、價格會自動跟著換。範本設計好一次，之後不管上架幾十幾百件商品，都自動套用同一套排版，不用再逐件手動調整。
以下拆三塊細節，分別是最基本的小工具怎麼排、加入購物車按鈕的眉角，以及相關商品跟加購推薦怎麼區分。
商品圖片、標題、價格，基本小工具怎麼排？
商品頁最先要決定的通常是圖文怎麼排。Product Images 負責主圖跟縮圖，可以開啟燈箱讓訪客點開放大看細節；圖片旁邊放 Product Title 顯示商品名稱、Product Price 顯示售價。價格這裡有個容易忽略的細節：如果商品是可變商品，同一件商品有不同規格、不同價格，Product Price 小工具會自動顯示成一個價格區間，不用另外設定，選好規格後才會收斂成單一價格。
再往下通常放 Short Description（商品簡短介紹）、Product Stock（庫存數字）、Product Meta（SKU、分類、標籤這類資訊，能設定橫排或直排）。要寫這些文字內容時，Elementor 內建的「Write with AI」功能可以直接在 Short Description 這類文字小工具裡生成或潤飾草稿，點開文字編輯區的 AI 圖示，它會依當下小工具的情境給出建議，寫完還能再請它精簡或修飾語氣，不用切換到另一個視窗處理。
Add to Cart 是必要元件，這顆按鈕該怎麼調整？
Add to Cart 小工具在 Single Product 範本裡是必要元件，如果整份範本裡沒有放這顆小工具，Elementor 編輯器會直接打不開，不是排版跑掉這種小問題，是編輯畫面根本進不去。先把這顆按鈕放進畫布，再回頭調整樣式，順序不能顛倒。
按鈕本身能調的地方不少。跟其他元素的排列方式有三種，Inline（同一行並排）、Stacked（上下堆疊）、Auto（依版面自動判斷）；文字、邊框、圓角，還有正常狀態與滑鼠移過去的 hover 狀態顏色，都能分別設定。如果商品有尺寸、顏色這類規格選項，下方會多出一組 Variations 樣式設定，選單的文字顏色、背景色、邊框都能獨立調整，不會被按鈕的樣式牽動。另外還有一個容易被忽略的 Quantity（數量）欄位，可以決定要不要顯示，以及跟按鈕之間要留多少間距。
相關商品和加購推薦，兩種排版邏輯不一樣
這兩個小工具常被當成同一件事，其實抓的商品邏輯完全不同。Product Related（相關商品）是 WooCommerce 自己的邏輯，自動抓「跟目前這件商品有相同標籤或分類」的其他商品列出來，店家不用手動指定；Upsells（加購推薦）則相反，是編輯單一商品時由店家自己指定要推薦哪幾件價格更高、規格更好的商品。兩者不是同一份清單的兩種顯示方式，而是自動比對跟手動挑選這兩套完全不同的機制。
排版能調整的項目大致相同：每頁顯示幾件商品、要排成幾欄（桌機、平板、手機可以各自設定不同欄數）、依日期、標題、價格、熱門度、評分或隨機排序；圖片邊框、標題、星級評分、價格、按鈕的顏色與字體都能分別設定，連「相關商品」這行標題文字都能單獨關掉或改樣式。
Product Archive 範本，讓商店和分類頁長一個樣
商品頁做好之後，還有商店首頁、分類頁這些列表頁要處理。不管是商店首頁、某個商品分類頁、標籤頁，還是商品搜尋結果頁，在 WordPress 的世界裡都算同一種東西，也就是 Archive（封存頁），差別只在篩選條件不同，設計邏輯是共用的一套範本機制。
建立路徑跟 Single Product 幾乎一樣，到「Templates > Theme Builder > Product Archive > Add New」，選一個 Product Archive 版型直接套用，或從空白開始自己排。核心是兩個小工具：Archive Title 顯示頁面標題，例如目前所在的分類名稱；Archive Products 負責把商品排成一格一格的列表。內容要抓哪些商品、版面細節怎麼調，分兩節往下拆。
來源（Source）設定，決定分類頁要顯示哪些商品
Archive Products 小工具的查詢（Query）設定裡，來源（Source）決定要抓哪些商品，可以選「目前查詢（Current Query）」，讓範本自動依照使用者目前所在的分類或標籤頁抓對應商品；也可以選最新商品、特價商品、精選商品，或手動指定某幾件商品。
如果目標是同一份範本要套用到所有分類頁，各自只顯示自己分類底下的商品，來源一定要選目前查詢，不用每個分類各做一份查詢設定。沒選這個選項、而是手動指定了固定條件的話，換到別的分類頁，列表顯示的內容不會跟著換，還是停在原本設定好的那組，這是排查「分類頁怎麼都顯示一樣的商品」時，第一個要回頭檢查的地方。
排序、分頁與折扣標籤，商店頁細節怎麼調整？
內容抓對之後，這節收版面呈現。排序（Allow Order）可以開放讓瀏覽的人自己選要依預設、熱門度、評分、上架時間，還是價格高低排序；商品數量多的話，開啟分頁（Pagination）避免一頁塞爆，也能設定「顯示結果數量」的文字，例如「共 24 件商品」，跟找不到商品時要顯示的提示文字。
折扣標籤（Sale Flash）可以調整顏色、圓角、顯示位置這些樣式，但有個前提容易被忽略，折扣標籤只有在商品本身填了「特價」欄位時才會顯示，樣式調得再漂亮，商品資料沒設定特價，標籤照樣不會冒出來。這是折扣標籤怎麼調都不出現時，該回頭確認的地方。
想讓不同商品分類套用不同版型，顯示條件怎麼分工？
範本設計好之後，最後要決定套在哪裡。發佈 Single Product 或 Product Archive 範本時都會跳出「顯示條件（Display Conditions）」視窗，預設通常會建議套用到所有商品或整個網站，但可以改成只套用在指定的商品分類，例如限量商品用一種比較搶眼的版面，其他商品維持一般版面。
這裡只聚焦在 WooCommerce 這兩種範本實際會用到的條件組合。Single Product 常見的是「所有商品」或「指定分類的商品」；Product Archive 常見的是「整個商店」或「指定的商品分類、標籤」。如果同一個範圍被兩份範本同時鎖定，Elementor 會用「條件愈精準的範本優先」判斷要套用哪一份。鎖定「限量商品」這個分類的範本，會蓋過設定成「整個商店」的寬範圍範本。
預覽跑版、折扣標籤不見了，這幾個地雷最常踩
範本做完，實際套用後常會踩到幾個地方。第一個狀況是預覽時只拿一件商品看，換成別的商品，尤其是可變商品，或標題特別長的商品，排版就跑掉。編輯器左下角有預覽設定，可以直接切換不同商品即時檢查，養成習慣至少換三、四件不同類型的商品看過一輪，不要只看設計時眼前這一件。
第二個狀況是可變商品的規格下拉選單樣式跑版，看起來跟按鈕不搭。常見原因是佈景主題本身的預設樣式蓋掉了 Elementor 的設定，回到 Add to Cart 小工具的 Variations 樣式分頁，把選單的背景色、邊框、字體都手動指定一次，通常就能蓋回來。
第三個狀況是折扣標籤明明設定好樣式卻不出現，通常代表該商品還沒填「特價」欄位，回頭確認一次就能排除。
範本做的是一次性的功夫，換來的是往後每一次上架新商品，都不用再重新排一次版。熟悉了 Single Product 跟 Product Archive 這兩種範本的邏輯之後，同一套思路也能用在購物車頁、結帳頁這些 WooCommerce 其他頁面上，不必等網站商品越堆越多，才回頭一件一件補救。