商品數量一旦超過百件,購物體驗往往就在這個關卡崩壞。訪客進站找不到想要的尺寸或價格區間,翻了三頁沒看到目標就直接離開,轉換率(Conversion Rate)就是這樣被一頁一頁侵蝕掉的。
WooCommerce 商品篩選的需求,通常在目錄規模變大後才會變得迫切。WooCommerce(線上電商外掛)的內建搜尋確實堪用,但它只比對商品標題與說明文字,對屬性(Attribute)、分類(Category)、價格區間一無所知。商品數量在兩三百件以下,這個侷限感受不明顯;超過這個量級,問題就會被放大。本文說明哪些外掛能補這個缺口、設定上有哪些關鍵決策,以及多條件組合篩選該怎麼建置。
內建搜尋的侷限與工具選擇的前提
WordPress 的核心搜尋走的是全文比對(Full-Text Search),資料庫查詢撈的是 post_title 與 post_content,這兩欄以外的資料——包括商品屬性、自訂欄位(Custom Field)、產品標籤——預設不在搜尋範圍內。訪客輸入「黑色 M 號」,內建搜尋找到的可能只是說明文字裡剛好含有這兩個字的商品,而不是真正依屬性比對的結果。
效能也是顯著的限制。WooCommerce 的商品目錄在資料庫裡以文章型態(post_type=product)儲存,商品數量擴大後,原生的 LIKE '%keyword%' 查詢會在每次搜尋時全表掃描,伺服器負擔直接反映在頁面回應時間上。
篩選功能的缺失更為直接。WooCommerce 本身沒有價格滑桿、沒有多屬性同步篩選,只有分類和標籤的連結——這些是靜態導覽,不是動態篩選。要達到「顏色+尺寸+500 元以下」這種組合篩選,單靠原生功能無法實現。
FiboSearch 與 AJAX 篩選外掛的差異
這兩類工具解決的是不同問題,不宜混為一談。
FiboSearch(原名 Ajax Search for WooCommerce)主打的是搜尋體驗。訪客在搜尋框輸入文字,結果以即時下拉清單呈現,不需按送出就能看到商品縮圖、價格與匹配關鍵字。它的索引機制可納入屬性、SKU、自訂欄位,比對範圍遠比原生搜尋寬廣。免費版已能滿足多數小型店家;付費版(Pro)開放模糊搜尋(Fuzzy Search)與同義詞設定,對打字有誤或習慣口語詞的訪客而言,命中率會有明顯提升。
AJAX 篩選外掛的代表,包括 WooCommerce 官方的 Product Filters(2024 年取代舊版 Layered Nav 小工具),以及第三方的 YITH WooCommerce Ajax Product Filter。這類外掛解決的是「不靠搜尋、直接縮減目錄範圍」的需求。訪客不一定知道想要的具體名稱,但他們知道「預算在 1,000 元以內」、「要有 L 號」——這種情境靠篩選欄位比靠搜尋框更有效率。
兩者的核心差異在於,搜尋工具優化的是「訪客有明確關鍵字」的路徑,篩選工具優化的是「訪客想縮小選擇範圍」的路徑。成熟的電商站台兩條路都需要兼顧。
屬性篩選的設定方式
WooCommerce 的屬性系統是篩選功能的基礎。如果商品的尺寸、顏色、材質沒有在後台「商品 → 屬性」裡建立,並確實套用到每一件商品,篩選外掛就沒有資料可讀取,設了也是空的。這個前置作業需要優先確認。
屬性的建立與指派
進入後台的「商品 → 屬性」,新增一組屬性(如「尺寸」),輸入對應的屬性值(如 S、M、L、XL)。建立後,進每件商品的編輯頁面,在「屬性」分頁加入這組屬性並選取對應的值。若商品有多個規格組合(如同時有尺寸與顏色),還需在「變體(Variation)」分頁依組合生成對應的子商品,庫存和價格才能各自獨立管理。
屬性指派完成後,篩選外掛才有實質意義。以 YITH WooCommerce Ajax Product Filter 為例,在外掛設定裡新增一組篩選預設,選「依屬性篩選」並指定對應的屬性名稱,存檔後用小工具或短代碼(Shortcode)放到目錄頁的側欄即可。
展示形式的選擇
屬性篩選的展示形式通常有核取方塊(Checkbox)、下拉選單(Dropdown)、色塊(Swatch)三種。核取方塊適合大多數情境,支援多選;下拉選單節省版面,適合屬性值數量較多的情況;色塊專門用於顏色屬性,視覺直觀,但需要額外設定對應的色碼或圖片。選擇哪一種,取決於屬性值的數量與視覺呈現需求,不必強求所有屬性採用相同形式。
價格滑桿的設定與常見問題
價格滑桿是 WooCommerce 商品篩選體驗中,對轉換率影響最直接的元件之一。訪客不必手動輸入數字,拖動兩端的把手即可設定預算區間,商品清單即時更新,這個互動節奏本身就降低了操作摩擦。
WooCommerce 官方的 Product Filters 外掛內建價格範圍篩選器,開啟後可在目錄頁顯示滑桿。若使用 YITH 或其他第三方外掛,通常在篩選預設裡新增「價格範圍」類型的篩選項即可生效。需要注意的是,滑桿的最大值預設來自目錄裡售價最高的商品。若有特殊高價品(如限量款),會把範圍拉到對多數訪客毫無意義的高點,這時應在外掛設定裡手動鎖定合理的上限值。
另一個常見問題是含有變體的商品。變體商品的價格在資料庫裡的儲存方式與簡單商品不同,部分外掛在讀取最低/最高價格時會出現顯示錯誤,導致滑桿範圍不準確。遇到這個情況,先確認外掛版本是否為最新,再確認每個子商品的售價欄位都已正確填入——空白售價是最常見的根源。
多條件組合篩選的建置邏輯
多條件篩選——同時選顏色「黑色」、尺寸「L」、價格「1,000 元以下」——看起來是前端的互動設計問題,實際上是資料庫查詢的架構問題。
當訪客同時選取多個篩選條件,外掛在後端要組合出一個查詢,這個查詢的邏輯分兩種,分別是交集(AND)與聯集(OR)。同一屬性內的多選項目通常走聯集(選了 S 和 M,回傳有 S 或有 M 的商品);跨屬性之間走交集(選了顏色「黑」和尺寸「M」,要同時符合兩個條件)。設定錯誤時,訪客選取越多條件,結果反而越少甚至歸零,這種情況幾乎都是交集與聯集的邏輯設定相反所致。
AJAX 更新的頁面行為
多條件篩選的使用體驗要求每次條件改變後,商品清單立即更新,不能讓訪客每次都要按「套用」才能看到結果。這就是 AJAX 更新的作用——條件一變動,外掛在背景送出新的查詢,只替換商品清單區塊,整頁不重新載入。啟用這個功能,需要確認主題的商品目錄頁面有正確的 HTML 結構,讓外掛能精準鎖定要更新的容器。若更新後版面偏移,通常是主題的 CSS 類別名稱與外掛預設的不一致,在外掛設定裡調整目標選擇器(Selector),或向主題開發者確認類別名稱即可。
篩選結果的頁數處理
組合篩選與分頁(Pagination)的相容性,是另一個需要測試的環節。訪客在第 3 頁調整篩選條件時,應自動跳回第 1 頁顯示新結果,而不是停留在第 3 頁出現空白。多數主流外掛預設會處理這個行為,但若搭配了客製化的分頁外掛,或主題自帶的無限捲動(Infinite Scroll),就需要單獨測試確認。
效能與相容性確認
上線前以下幾項值得逐一確認。
| 確認項目 | 說明 | 影響 |
|---|---|---|
| 外掛版本相容 | WooCommerce 每次大版本更新後,部分篩選外掛需同步更新才能正常運作 | 篩選結果不準或前端錯誤 |
| 快取外掛衝突 | AJAX 篩選依賴動態請求,若頁面被快取外掛整頁快取,篩選結果不會更新 | 訪客看到的商品清單不即時 |
| 行動裝置佈局 | 側欄篩選在窄螢幕會消失或折疊,需確認抽屜式(Drawer)展開行為 | 手機用戶無法使用篩選功能 |
| 空結果頁面 | 篩選條件過嚴時商品清單為空,需顯示有意義的提示訊息而非空白頁 | 訪客困惑,直接離站 |
| 索引熱身時間 | FiboSearch 等有獨立索引的外掛,商品數量大時初次建立索引需要等待 | 搜尋上線初期準確率偏低 |
快取衝突是實際部署中最容易被忽略的問題。若使用 WP Rocket 或 LiteSpeed Cache 這類快取外掛,需在設定裡將商品目錄頁排除在整頁快取之外,或確認篩選外掛已內建快取相容模式。多數主流篩選外掛的說明文件都有針對常見快取外掛的相容設定步驟,按步驟操作通常可以解決。
屬性資料與商品數量是一切的前提,工具只是讓它能被有效使用。設定篩選之前,先把商品目錄的屬性指派做扎實,後續的外掛設定才會有實質意義。