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 的產品過濾體驗，非常值得嘗試一下。