重點整理
想用 Elementor 自訂 WooCommerce 的商品列表，要同時啟用 WooCommerce 與 Elementor Pro，編輯器裡才會出現 Products（商品）與 Product Categories（商品分類）小工具。Products 小工具可設定欄數、列數、分頁、排序，商品來源可選目前查詢、最新、特價、精選、手動選擇、相關、追加銷售與交叉銷售；Product Categories 小工具則能手動挑選要顯示的分類並隱藏空分類。下面分兩段，一步步做出商品展示區與分類入口。
WooCommerce 預設的商店頁樣式由佈景主題決定，想調整一列幾個商品、只顯示特價品、改折扣標籤顏色，通常要改主題設定或寫 CSS。改用 Elementor Pro 的 WooCommerce 小工具，就能在視覺化編輯器裡直接設定商品來源、排序與樣式。這篇示範兩個最常用的小工具：用 Products 做商品展示區，用 Product Categories 做分類入口。
開始前請確認：
- 已安裝並啟用 WooCommerce、Elementor 與 Elementor Pro。WooCommerce 小工具屬於 Pro 功能，只裝免費版看不到。
- 已經建立幾個商品與分類，預覽時才看得到效果。
使用 Elementor 建立 WooCommerce 商品展示區
第一步：把 Products 小工具拖進頁面
用 Elementor 開啟要編輯的頁面，在左側小工具面板找到 WooCommerce 分類（也可以直接搜尋 Products），把 Products 小工具拖到頁面上的空白容器。
第二步：設定欄數、分頁與排序選單
加入後會先顯示商品，左側「內容」分頁可以調整：
- Columns／Rows：一列幾個商品（1 到 12 欄）、最多顯示幾列。
- Pagination：是否顯示分頁。
- Allow Order：是否讓顧客自己選排序方式（熱門、評分、最新、價格高低等）。
- Show Result Count：是否顯示「共幾項結果」。
第三步：選擇商品來源（Query）
Query 區的 Source 決定要顯示哪些商品。2026 年官方文件列出的選項有：Current Query（目前查詢，用於分類頁或標籤頁範本）、Latest Products（最新商品）、Sale（特價商品）、Featured（精選商品）、Manual Selection（手動選擇），以及 Related、Upsells、Cross-Sells（相關、追加銷售、交叉銷售，用在單一商品頁）。選定來源後，還可以用 Include／Exclude 依分類或標籤篩選。
第四步：手動挑選商品
選 Manual Selection 時，輸入商品名稱就能搜尋並加入，適合做「本月推薦」這類固定商品區。
第五步：設定排序條件
Order By 設定商品的排列依據，官方文件列出的選項包含標題、價格、熱門程度、評分、隨機與選單順序，再用 Order 選遞增（ASC）或遞減（DESC）。隨機排序可以讓每次載入看到不同商品，但若網站有頁面快取，訪客看到的可能是快取當下的順序。
第六步：調整商品區樣式
切到「樣式」分頁，可以設定欄距與列距、對齊方式、商品圖片邊框與圓角、標題與價格的顏色和字型、評分星星顏色，以及加入購物車按鈕的一般與滑過狀態。
第七步：設定分頁樣式
有開啟分頁時，可以設定頁碼的顏色與間距。建議把「目前頁碼」設成明顯不同的顏色，讓顧客知道自己在第幾頁。
第八步：修改特價標籤（Sale Flash）
Sale Flash 是商品圖片上的「特價」標籤，可以改文字顏色、背景、大小與位置。要注意，商品本身必須填了「特價」價格，標籤才會出現。
使用 Elementor 建立商品分類入口
第一步：加入 Product Categories 小工具
在同一個小工具面板找到 Product Categories，拖到頁面上。官方建議它常用在商品彙整頁範本，但一般頁面（例如首頁的分類入口）一樣可以使用。
第二步：設定顯示數量與欄數
Layout 區可以設定欄數與 Categories Count（要顯示幾個分類）。舊版輸入 -1 代表全部顯示，新版請以面板上的說明為準。
第三步：手動選擇要顯示的分類
在 Query 的 Source 選 Manual Selection，再從 Categories 下拉選單挑選分類。例如可以排除預設的「未分類」，只留下真正要給顧客點的分類。
第四步：隱藏沒有商品的分類
開啟 Hide Empty，沒有商品的分類會自動隱藏，避免顧客點進去看到空頁面。
第五步：調整分類樣式
樣式選項比 Products 少，但間距、對齊、標題文字與商品數量（Count）的字型顏色都能調整。如果不想顯示每個分類的商品數，可以在 Count 的字型設定中把它縮到最小或用自訂 CSS 隱藏。
想要自訂每張商品卡片，該用哪個小工具？
Products 小工具的卡片結構是固定的（圖片、標題、評分、價格、按鈕），只能改樣式。如果想自己決定卡片要放哪些欄位、怎麼排，可以改用 Elementor Pro 的 Loop Grid：先設計一張「Loop Item」範本，再讓它套用到每個商品。做法可以參考 Elementor Loop Grid 教學；單一商品頁的版型則可以看 如何使用 Elementor 建立 WooCommerce 單一商品頁。
常見問題
為什麼我的 Elementor 找不到 WooCommerce 小工具？
最常見的原因是沒有安裝 Elementor Pro，或 WooCommerce 沒有啟用；兩者都啟用後，小工具面板才會出現 WooCommerce 分類。
Products 小工具和 WooCommerce 短代碼有什麼不同？
兩者都能在頁面上列出商品，差別在 Products 小工具可以在編輯器裡即時預覽並用面板調樣式，短代碼則要記屬性寫法、樣式依佈景主題而定，但不需要 Elementor Pro。
特價標籤為什麼沒有出現？
因為該商品沒有填「特價」價格，或特價排程還沒開始；在商品編輯頁的一般分頁填入特價後，Sale Flash 才會顯示。
結語
有了 Elementor Pro，WooCommerce 的商品列表與分類入口不必寫程式就能調整：Products 小工具負責「顯示哪些商品、怎麼排序」，Product Categories 小工具負責「分類入口」。建議先決定商品來源與欄數，再處理樣式；需要更自由的卡片設計時，再進一步改用 Loop Grid。