在電子商務網站中,往往需要一個產品過濾器,如亞馬遜產品列表頁面左側的過濾器。使用 WordPress 架設電子商務網站的時候,大部份使用者會選擇 WooCommerce 外掛,WooCommerce 外掛自帶的產品過濾器並不是很強大,於是出現了 WooCommerce AJAX Filters 這個產品過濾外掛。
外掛主頁:https://wordpress.org/plugin/woocommerce-ajax-filters
下載地址:https://downloads.feibisi.com/plugin/woocommerce-ajax-filters.zip
WooCommerce AJAX Filters 外掛功能
- AJAX 過濾,分頁和排序
- 過濾條件的個數不限
- 多使用者介面元素
- SEO 友好的連結 URL
- 可以設定在某個分類過濾或全域性顯示過濾。
- 可以透過簡碼顯示過濾條件
- 可以在滾動主題中限制過濾盒子的高度
- 可以在側邊欄區域中使用
- 拖拽方式調整佈局
最近新增的功能
- 沒有過濾小工具可以新增不同的自定義 CSS 類。
- 更新按鈕 – 是否在點選更新按鈕時才開始進行過濾。
- 點選選中的單選按鈕時是否取消選擇。
- 為了更好的結構,URL 被縮短了。
- 小工具可以顯示子分類。
簡碼選項
小工具类型 widget_type
– filter 或 update_buttonattribute
(required) – 產品屬性,如價格或長度,不要忘了,woocommerce 加了一個 pa_的字首到產品屬性上面,如果您新增了 area 這個屬性,這裡的屬性名禪應該是 pa_areatype
(required) – 多選,單選,滑塊和下拉選擇。比较方法
– OR 或 AND标题
– 篩選工具的標題,可以為空。父级产品分类 product_cat
– 父級產品分類 id是否分页
– 是否顯示分頁,設定 1 為顯示分頁- 高度
height
– 過濾工具的最大高度,如果超過最大高度,將會出現捲軸。 - 滾動主題
scroll_theme
– 選擇捲軸的主題,只在設定了固定高度,且內容超出了固定高度時使用
高階設定(小工具區域)
- CSS 類 – 如果您需要給過濾工具新增自定義樣式,在這裡新增 css 類。
- 過濾小工具高度 – 如果設定選項中有太多內容,設定一個固定高度以防止過濾器佔用太多的介面高度
- 滾動主題 – 如果設定了 “過濾小工具高度”,可以在這裡設定一個捲軸主題
高階設定 (外掛設定):
- 可以在管理介面的 WooCommerce -> 產品過濾找到外掛的高階設定
- “沒有產品” 的提示資訊 – 沒有找到產品時的提示資訊
- “沒有產品” 的 CSS 類 – 新增 CSS 類到 “沒有產品” 的提示區塊
- 產品選擇 – 產品選擇的標籤
- 排序控制- 控制 WooCommerce 的排序選項
- SEO 友好的 URL – 選擇了過濾器以後,URL 將被修改
- 關閉所有的過濾選項 – 如果想隱藏過濾工具而不丟失當前設定,關閉此項
Advanced AJAX Product Filters 小工具為我們提供了一些非常實用的設定選項,我們可以在任何風格的主題中整合這個小工具,只要稍微調整一下過濾小工具的 CSS 就可以了,對比於 WooCommerce 內建的過濾小工具,設個外掛可以瞬間提升 WooCommece 的產品過濾體驗,非常值得嘗試一下。