如何添加 WooCommerce AJAX 產品過濾器
已發表: 2021-07-13您想為您的站點創建 AJAX 產品過濾器嗎？ 你來對地方了。 在本文中，我們將向您展示如何添加 WooCommerce 產品過濾器以改善您商店的購物體驗。
在我們了解創建和添加產品過濾器的過程之前，讓我們更好地了解 AJAX 產品過濾器是什麼以及為什麼需要它們。
什麼是 AJAX 產品過濾器？
產品過濾器通過建立需求並過濾掉所有不需要的結果來幫助用戶快速找到他們想要的產品。 例如，如果客戶想要一件藍色 T 卹，他們將選擇一件 T 卹作為產品類型，並選擇藍色濾色片來丟棄所有其他產品和顏色。 同樣，可以有尺寸、重量、價格、平均評分等過濾器。
術語AJAX指的是一種 Web 開發技術，它允許為少量數據異步更新頁面。 這使站點可以在保持在同一頁面上的同時對網頁應用較小的更改，這意味著不需要刷新。 相反，使用較舊的技術，每次出現任何影響用戶體驗的微小變化並消耗更多服務器資源時，都必須重新加載整個網頁。
為什麼要使用產品過濾器？
現在出現的問題是為什麼要在商店中使用產品過濾器？ 簡而言之，您需要產品過濾器來改善客戶的購物體驗並幫助他們找到想要的東西。 幾乎每個擁有大量或多種產品的在線商店都使用產品過濾器。 亞馬遜、eBay 和 Zara 就是很好的例子。
通過使用過濾器，購物者可以輕鬆丟棄所有不需要的結果，只選擇他們感興趣的產品。這會提高客戶滿意度，從而帶來更多的轉化和銷售。
另一方面，如果沒有 AJAX 產品過濾器，客戶可能很難找到他們想要的產品。 在線購物應該既快捷又簡單，因此，如果流程耗時過長，客戶會離開您的商店並前往提供更好體驗的其他網站。
由於您可能不想失去您的客戶，因此產品過濾器應該是您在線業務戰略的重要組成部分。
所以，現在您知道它們的重要性，讓我們看看如何在您的 WooCommerce 商店中啟用產品過濾器。
如何添加 WooCommerce 產品過濾器
在本教程中，我們將向您展示將產品過濾器添加到商店的兩種不同方法。
- 默認 WooCommerce 產品過濾器
- 使用第三方插件
讓我們來看看這兩種方法。
1. 默認 WooCommerce 產品過濾器
默認情況下，WooCommerce 提供了一些基本的產品過濾器。 如果您的商店相對較小，沒有種類繁多的產品，您可能會發現默認過濾器足以滿足您的需求。
要將這些過濾器添加到您的商店，只需轉到WP 管理儀表板並導航到外觀 > 小部件。 在那裡，您將找到您網站的所有可用小部件的列表。
如果您啟用了 WooCommerce，您將在小部件列表中找到默認的產品過濾器。 只需單擊並將所需的過濾器小部件拖動到主題支持的任何小部件區域即可。 在我們的例子中，我們會將產品過濾器添加到側邊欄。
這就是將默認的 WooCommerce 產品過濾器添加到您的商店所需要做的所有事情。
默認產品過濾器
默認情況下，有三種產品過濾器：價格、屬性和平均評分。
- 按價格過濾：添加一個滑塊，可用於根據價格範圍過濾產品
- 按屬性過濾：它允許您根據大小、重量、顏色等屬性過濾項目。 請注意，您必須為每個屬性添加一個單獨的小部件
- 按平均評分過濾：顧名思義，您可以根據平均評分過濾產品
由於 WooCommerce 默認產品過濾器已預先配置，因此您無需設置它們。 只需將它們拖到小部件區域即可。 但是，它們的選項非常基本，因此它們不提供許多自定義選項來編輯字體、形狀或滑塊。
儘管默認的 WooCommerce 產品過濾器可以為大多數用戶完成這項工作，但還是有一個問題。 每次客戶選擇過濾器時，都需要重新加載整個頁面才能應用更改。 可以想像，這對用戶來說很煩人並影響他們的購物體驗。 這就是您應該添加AJAX 產品過濾器的原因。
不幸的是，WooCommerce 默認不支持 AJAX 過濾器，因此您必須依賴第三方插件。
2. 使用第三方插件
您可以使用多種工具來添加 WooCommerce 產品過濾器。 對於本教程，我們將使用BeRocket開發的Advanced AJAX Product Filters 。 這是一個免費增值功能豐富的工具，可確保流暢的用戶體驗。
該插件專門研究 AJAX 產品過濾器，並提供各種具有自定義樣式的過濾器，以匹配您商店的外觀和感覺。 它還允許個人和組過濾器，您可以設置對兩種過濾器類型都有效的一般首選項。
現在讓我們看看如何將此插件添加到您的 WooCommerce 商店。
第 1 步：安裝插件
首先，您需要安裝插件。 為此，請轉到WP Admin Dashboard並導航到Plugins > Add new。
搜索BeRocket的高級 AJAX 產品過濾器。 單擊安裝按鈕安裝插件，然後激活它。
之後，轉到BeRocket > 產品過濾器，您可以在其中設置過濾器的首選項。 這些不是技術設置，而是您可以根據需要配置的一般首選項和自定義選項。 您可以選擇屬性值的數量、隱藏值等。
現在您已經安裝並配置了插件，讓我們創建您的第一個過濾器。
第 2 步：創建新產品過濾器
要創建產品過濾器，請前往WP Admin Dashboard並轉到BeRocket > Filters。
在設置頁面上，按添加過濾器按鈕。
將出現一個新的設置頁面，您必須填寫所有詳細信息才能創建過濾器。 您需要填寫多個部分，因此讓我們一一查看。
- 標題：為您的過濾器賦予一個有意義的標題，以便於理解，例如尺寸、顏色、評級等
- 條件：您可以設置條件以在某些頁面、產品或類別上顯示過濾器。 您可以添加多個條件，甚至還可以添加嵌套條件。 您還可以在某些類型的設備（例如移動設備、標籤頁或桌面設備）上隱藏過濾器
- 小部件類型：您需要在此處選擇要創建的過濾器類型。 有四種類型可供選擇：過濾器、更新產品按鈕、重置產品按鈕和選定過濾器區域
- 屬性和值：指定當前過濾器的屬性
- 樣式：樣式和自定義過濾器。 您將獲得多種佈局可供選擇，例如復選框、下拉菜單、顏色框、滑塊等
- 必需選項：提供此過濾器下的所有可用選項。 例如，提供可用於濾色器的所有顏色
- 附加：此部分僅包含首選項。 您可以根據需要設置幾個選項
填寫表格後，單擊“保存過濾器”按鈕以創建過濾器。
管理您的過濾器
然後，您可以導航到BeRocket > Filters以在一個地方找到您創建的所有過濾器。 在此頁面中，您可以編輯、啟用、禁用甚至刪除您想要的任何過濾器。
恭喜！ 您現在已經使用插件創建了您的第一個 WooCommerce 產品過濾器。 同樣，您可以根據需要創建盡可能多的過濾器來改善客戶體驗。
但事實並非如此！ 您現在已經創建了一個單獨的過濾器，但您可以更進一步並創建過濾器組。 使用此插件，您可以將具有相似屬性的過濾器合併為一組。 例如，尺寸、重量和顏色可以組合起來創建一個過濾器組，稱為物理屬性。 過濾器組易於管理，並在您有太多過濾器的情況下保持側邊欄井井有條。
現在讓我們看看如何使用高級 AJAX 產品過濾器在 WooCommerce 中添加產品過濾器組。
步驟 3：創建過濾器組
在您的 WordPress 儀表板中，導航到BeRocket > Groups ，然後單擊添加過濾器組按鈕以創建過濾器組。
在設置頁面上，填寫添加新過濾器組表單，就像之前為單個過濾器所做的一樣。 這個略有不同，所以讓我們看一下選項：
- 標題：這裡沒有秘密，只需給您的過濾器組一個清晰而有意義的標題
- 條件：如果要在特定頁面或類別上顯示過濾器，請設置條件。 您可以添加多個條件以及嵌套條件。 您還可以選擇對特定設備隱藏過濾器
- 組設置：您可以選擇要添加到該組的單個過濾器。 從下拉菜單中選擇所需的過濾器，然後按添加過濾器將其添加到組中。 同樣，您可以根據需要添加任意數量的過濾器
完成後，單擊右上角的保存按鈕以保存過濾器組。
現在您可以導航到BeRocket > Groups並在一個地方查看所有過濾器組。 您還可以從此頁面管理、編輯或刪除組。
現在我們已經創建了它們，是時候在商店前端顯示這些過濾器了。
第 4 步：顯示過濾器
在您的WP 管理儀表板中，前往外觀 > 小部件。
找到AAPF Filters Single和AAPF Filters Group小部件並將它們拖放到所需的小部件區域。 請注意，您必須分別為每個過濾器添加小部件。 選擇要添加到此小部件的過濾器，然後單擊保存。
太棒了！ 你做到了。 過濾器現在顯示在商店前端的相應小部件區域中。
但是，還有其他事情。 這不是將產品過濾器添加到您的 WooCommerce 商店的唯一方法。 如果您想在小部件區域以外的其他區域顯示過濾器，您可以使用簡碼。
第 5 步：使用簡碼在小部件區域外顯示過濾器
每個過濾器都有一個簡碼，您可以使用它在您網站的任何位置顯示它。 轉到BeRocket > Filters ，您將找到每個過濾器的簡碼。 只需複制要顯示的過濾器的簡碼。
之後，轉到要顯示過濾器的頁面/帖子，單擊左上角的+圖標並蒐索短代碼塊。 然後選擇簡碼小部件圖標以將簡碼區域添加到您的頁面/帖子。
現在將您剛剛複制的過濾器簡碼粘貼到簡碼區域，然後按右上角的更新/發布以使更改生效。
而已！ 過濾器現在將顯示在您想要的位置。 您可以導航到前端以查看更改。
第 6 步：確定過濾器的問題
再堅持一點！ 我們很想提一下這個插件的另一個漂亮的小功能。 這個 WooCommerce 產品過濾器插件為您提供了一個方便的工具，讓您了解活動過濾器的狀態。 此外，它會告訴您特定過濾器是否存在任何問題及其背後的原因，因此您可以立即修復它並使其正常工作。
要使用活動過濾器狀態工具，請登錄到您的WP 管理員並導航到顯示過濾器的前端。 在頂部的黑色條上，您將看到帶有火箭圖標的產品過濾器選項卡。 單擊此選項卡，它將顯示所有有用的信息。
全做完了！ 恭喜！ 您現在可以在您的 WooCommerce 商店上成功創建、更新和顯示產品過濾器，並註意過濾器可能出現的任何問題。
結論
總而言之，如果您擁有大量產品或多種產品，WooCommerce 產品過濾器是必須的。 它們對客戶來說非常方便，因為它們可以幫助他們更快地找到他們正在尋找的產品並改善他們的購物體驗。
作為店主，客戶滿意度至關重要，它可以幫助您提高銷售額。 另一方面，如果您的購物者無法快速找到他們想要的東西，他們可能會離開並且不會回來。
在本教程中，我們了解瞭如何將產品過濾器添加到您的 WooCommerce 商店並確保用戶找到他們想要的東西。
總之，我們學到了：
- 什麼是 AJAX 產品過濾器？
- WooCommerce 產品過濾器的好處
- 如何添加 WooCommerce 產品過濾器
- 默認 WC 產品過濾器
- 使用第三方插件
您是否嘗試將產品過濾器添加到您的商店？ 您使用了哪種方法，您的體驗如何？ 在下面的評論部分讓我們知道。