用 [products] 短代碼在頁面顯示 WooCommerce 商品

想在某個頁面、文章、Vibe 畫布、甚至側邊欄顯示一組精選商品？WooCommerce 內建的 [products] 短代碼一行就搞定，不用拉 block、不用設樣式，貼上去就出現商品卡片。

本篇講這個短代碼的所有參數、最常用的 10 個組合範例、跟自訂 listing block 的選擇建議，以及進階用法（多個分類交集、屬性篩選、特價/熱銷專區）。

什麼是 [products] 短代碼#

短代碼（Shortcode）是 WordPress 內建的「一行字產出一塊內容」機制。[products] 是 WooCommerce 提供的，效果是：把你商店裡符合條件的商品，以網格卡片方式渲染出來。

放在哪裡都可以：

• 文章內容（段落間插入精選商品）
• 頁面（首頁的「人氣商品」「新品上架」區段）
• Vibe 畫布的 HTML 區塊
• 側邊欄 widget
• 頁尾（顯示熱銷 Top 3）

最基本的用法#

在編輯器內加一個「短代碼」區塊（或在段落區塊直接打），貼上：

[products]

儲存後前台會顯示商店裡所有商品、依名稱排序、4 欄網格。實務上你會加參數限制數量、欄數、排序：

[products limit="8" columns="4" orderby="popularity"]

意思是「顯示 8 個商品、分 4 欄、依人氣排序」。下方逐一說明每個可用的參數。

顯示控制參數#

控制商品「怎麼顯示」、「顯示幾個」、「依什麼排序」。

orderby 各選項解釋#

• title：商品名稱字母順序
• date：商品建立日期（搭配 order="DESC" 就是「最新上架」）
• id：商品 ID（後台分配的編號）
• menu_order：商品自訂排序（後台商品列表可拖曳的順序）
• popularity：依銷量排（「熱銷排行榜」常用）
• rand：隨機（每次刷新順序不同）
• rating：依平均評分排

商品篩選參數#

決定「顯示哪些商品」。可以單獨用、也可以組合用（除了 on_sale / best_selling / top_rated 這三個互斥，看下一節）。

visibility 各選項說明#

• visible：商店與搜尋都顯示（預設）
• catalog：只在商店列表顯示、搜尋找不到
• search：只在搜尋結果顯示、商店列表找不到
• hidden：兩邊都隱藏（只能用直接網址訪問）
• featured：你在後台標記為「特色商品」的那批

實務上最常用 visibility="featured" 做首頁「精選商品」區塊。

操作符參數（多分類交集 / 排除）#

當 category / tag / terms 填多個值時，可以用對應的 operator 控制邏輯。

• IN：屬於其中任一個（聯集）。例如 category="shirts,bags" 配 cat_operator="IN" 顯示「上衣或包包」
• NOT IN：不屬於這些（排除）。例如顯示「除了上衣、包包以外」的商品
• AND：同時屬於全部（交集）。例如 category="shirts,limited" 配 cat_operator="AND" 顯示「同時屬於上衣與限定」

特殊篩選（三選一互斥）#

這 3 個篩選一次只能用 1 個（同時用會衝突）。

用 on_sale="true" 時，orderby 預設用 menu_order，需要排銷量可另外指定 orderby="popularity"。

10 個常用組合範例#

1. 首頁「人氣商品 8 個」#

[products limit="8" columns="4" orderby="popularity"]

2. 首頁「最新上架 4 個」#

[products limit="4" columns="4" orderby="date" order="DESC"]

3. 特價專區（顯示所有特價商品 + 分頁）#

[products columns="3" paginate="true" on_sale="true" orderby="popularity"]

4. 「特色商品」首頁區塊#

[products limit="6" columns="3" visibility="featured"]

5. 熱銷排行榜 Top 5#

[products limit="5" columns="5" best_selling="true"]

6. 高評價商品 Top 4#

[products limit="4" columns="4" top_rated="true"]

7. 指定 3 個商品 ID（手動精選）#

[products ids="123,456,789" columns="3"]

實務應用：寫部落格文章介紹 3 個產品時，文末用這段顯示這 3 個商品的卡片。

8. 某分類商品（聯集）#

[products limit="8" columns="4" category="shirts,bags"]

顯示「上衣」或「包包」分類底下的商品（預設操作符 IN）。

9. 多分類交集（同時屬於兩個分類）#

[products limit="8" columns="4" category="shirts,limited" cat_operator="AND"]

顯示「同時是上衣，也屬於限定系列」的商品。前提：你後台真的有商品同時打了這兩個分類。

10. 屬性篩選（特定顏色、尺寸）#

[products limit="8" columns="4" attribute="color" terms="red,blue"]

顯示「顏色屬性是紅色或藍色」的商品。前提：你商品有定義 color 屬性，並指派給商品。

怎麼找出商品 ID、分類 slug、SKU#

商品 ID#

1. 後台「商品」→「所有商品」
2. 滑鼠移到任一商品行，下方狀態列會出現該商品的 URL，網址尾巴 ?post=123 的 123 就是 ID
3. 或直接點商品進入編輯頁，瀏覽器網址欄看 ?post=XXX

分類 / 標籤 slug#

1. 後台「商品」→「分類」（或「標籤」）
2. 右側清單每個分類旁邊有「代稱」（Slug）欄
3. 例如分類名稱「上衣」對應 slug shirts

商品 SKU#

編輯商品時，「商品資料」→「一般」分頁裡的「商品編號（SKU）」欄位。如果你後台 SKU 都沒填，就先填好再用 skus 參數。

把短代碼放在哪裡#

編輯器內#

在文章 / 頁面編輯器加一個「短代碼」區塊（搜尋「shortcode」），把整段 [products ...] 貼進去。或者在段落區塊內直接貼也可以。

Vibe 畫布#

在 Vibe 畫布的 HTML 區塊內貼短代碼也會生效。適合在自訂 landing page 中插入「精選商品」區段。

小工具 / 側邊欄#

「外觀」→「小工具」（秒站在「網站設定」→「小工具」）→ 加一個「短代碼」小工具到側邊欄，貼進短代碼。適合全站側邊欄顯示「熱銷 Top 3」。

短代碼 vs 其他做法的選擇#

原則：

• 快速放幾個商品就走 → 短代碼
• 需要客製商品卡片視覺 → 列表 block 或 Greenshift
• 需要邏輯篩選（多分類交集、屬性、特價）→ 短代碼