重點整理
WooCommerce 商品篩選器可以用免費的 YITH WooCommerce Ajax Product Filter 外掛製作，2026 年 10 月版本 5.24.0，超過 7 萬個網站使用。4.0 版之後改成「篩選器組合（Preset）」制度：先建立一組篩選條件（分類、標籤、顏色、尺寸等屬性），再用小工具、短代碼或區塊放到商店頁、分類頁或任何自訂頁面，點選後不用重新整理頁面就會更新商品。價格滑桿、手機版彈出視窗、評價與庫存篩選等屬於付費版功能。
網路商店的商品一多，顧客最想要的就是「只看我要的」：只看黑色、只看 M 號、只看某個品牌。少了篩選器，顧客要一頁一頁翻，很容易直接離開。這篇說明商品篩選器的常見版面，以及怎麼用 YITH WooCommerce Ajax Product Filter 在 WooCommerce 商店加入顏色與尺寸篩選。
商品篩選器是什麼？
商品篩選器是商品列表旁的過濾工具，讓顧客依分類、顏色、尺寸、價格等條件縮小範圍，快速找到符合需求的商品。商品少的時候感覺不出差別，品項越多越需要它。
常見的篩選器版面有兩種：
- 垂直（側欄）：放在商品列表左側或右側，可以容納很多條件，把最常用的條件放最上面。
- 水平（列表上方）：位置醒目，但空間有限，適合條件少的商店。
YITH WooCommerce Ajax Product Filter 免費版能做什麼？
- 建立不限數量的篩選器組合，不同頁面放不同組合（例如商店頁一組、某分類頁一組）
- 依商品分類、標籤、任何商品屬性（顏色、尺寸、材質、品牌）篩選
- 篩選樣式可選核取方塊、下拉選單、文字或色塊
- 可複選並設定 AND／OR 條件、顯示「重設篩選」按鈕
- 自動隱藏目前沒有對應商品的選項
- 可設定篩選產生的網址是否讓搜尋引擎索引
付費版另外提供價格滑桿與價格區間、評價篩選、特價與有庫存篩選、手機版彈出式篩選視窗、圖片標籤樣式等功能。
步驟一：安裝並啟用外掛
使用前要先替商品建立好屬性（「商品 → 屬性」），例如顏色、尺寸，並在每個商品勾選對應的屬性值，篩選器才有資料可以篩。
到後台「外掛 → 安裝外掛」，搜尋「YITH WooCommerce Ajax Product Filter」，點「立即安裝」。
安裝完成後點「啟用」。外掛介面以英文為主。
步驟二：建立篩選器組合（Preset）
啟用後，到後台 YITH 選單中的 Ajax Product Filter 設定，找到「Filter presets」，新增一個組合：
- 輸入組合名稱，例如「商店頁篩選」。
- 新增第一個篩選條件：標題填「顏色」，篩選對象選商品屬性中的顏色，樣式選色塊，再替每個屬性值指定顏色。
- 新增第二個篩選條件：標題填「尺寸」，篩選對象選尺寸屬性，樣式選核取方塊或文字。
- 需要的話再加上分類、標籤篩選，最後儲存組合。
步驟三：把篩選器放到頁面上
組合建好後，有三種放法：
- 小工具：到「外觀 → 小工具」，把「YITH AJAX Filter Preset」小工具放到商店側欄，選擇剛建立的組合。
- 區塊：在區塊編輯器的頁面中插入 YITH 篩選器區塊並選擇組合。
- 短代碼：複製組合對應的短代碼，貼到 Elementor 等頁面編輯器的短代碼欄位。
舊版（4.0 以前）是直接在小工具裡逐一設定每個篩選條件，下面是當時的設定畫面。這種舊式小工具目前仍可使用，但官方建議改用篩選器組合，外掛也提供把舊小工具自動轉成組合的工具。
步驟四：到前台確認結果
打開商店頁，側欄就會出現顏色與尺寸篩選，點選後商品列表會直接更新，不用重新整理頁面。
設定頁中標示為付費的功能，例如價格篩選、評價篩選，需要升級付費版才能使用。
常見問題
WooCommerce 內建有商品篩選功能嗎？
有，使用區塊佈景主題或區塊版商店頁面時，WooCommerce 內建「商品篩選條件」相關區塊，可以依屬性、價格等篩選。傳統主題或需要更多樣式時，再使用 YITH 這類外掛。
篩選器上有些選項沒有出現？
外掛會自動隱藏目前沒有對應商品的選項。如果確定有商品卻沒出現，先確認商品有勾選該屬性值，再到「WooCommerce → 狀態 → 工具」清除外掛的暫存資料。
篩選結果的網址會影響 SEO 嗎？
每種篩選組合都會產生不同網址，數量多時可能被搜尋引擎大量收錄重複內容。外掛有設定可以讓篩選網址不被索引，一般商店建議開啟。
結語
商品品項多、規格多的商店，篩選器能讓顧客更快找到商品。用 YITH WooCommerce Ajax Product Filter 時，先把商品屬性整理好，再建立篩選器組合，最後用小工具、區塊或短代碼放到商店頁。高單價、品項少的商店不一定需要篩選器，把商品介紹做好更重要。