banner

在電子商務網站中，往往需要一個產品過濾器，如亞馬遜產品列表頁面左側的過濾器。使用 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_button
  • attribute(required) – 產品屬性，如價格或長度，不要忘了，woocommerce 加了一個 pa_的前綴到產品屬性上面，如果您添加了 area 這個屬性，這裏的屬性名禪應該是 pa_area
  • type(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 的產品過濾體驗，非常值得嘗試一下。