如何為您的 Divi WooCommerce 頁面創建過濾的側邊欄

如果您曾嘗試向使用頁面構建器製作的頁面添加過濾的 WooCommerce 側邊欄，您可能已經註意到過濾器沒有出現在您的頁面上。 無論您使用哪個頁面構建器，過濾器都不會顯示。

原因是這些小部件與頁面構建器不兼容。 在本文中，我們將介紹一種為使用 Divi Builder 或任何其他頁面構建器製作的頁面創建過濾的 WooCommerce 側邊欄的簡單方法。

標準 WooCommerce 側邊欄

WooCommerce 包括幾個可過濾的小部件。

• 按屬性過濾產品
• 按價格過濾產品
• 按評級過濾產品

這些小部件在常規 WordPress 主題上運行良好，但它們不會顯示在使用頁面構建器製作的頁面上。

WordPress 主題

可過濾的小部件在使用常規 WordPress 主題製作的頁面中運行良好。 二十七歲將它們顯示在側邊欄上，沒有任何問題。 我正在使用 WooCommerce 示例數據，其中包括顏色和價格。 按屬性和按價格篩選的產品很突出。

這是 Divi 在不使用 Divi Builder 的情況下顯示 WooCommerce 默認商店頁面。 它像任何普通主題一樣顯示過濾器小部件。

WordPress 建設者

使用構建器製作的頁面不顯示 WooCommerce 過濾器小部件。 如果側邊欄顯示在構建器中或作為標準側邊欄顯示，則沒有任何區別。 這裡有一些例子。

此頁面是使用 Beaver Builder 構建的。 它包括側邊欄，但不顯示過濾器。 我添加了一個文本小部件，因此您可以看到側邊欄確實在沒有過濾器小部件的情況下顯示。 我發布了頁面以實時查看，但沒有任何區別。

這個是用 Elementor 構建的。 我在產品上方添加了側邊欄。 它顯示文本小部件但不顯示過濾器。 我還發布了頁面以實時查看，但沒有區別。

這是顯示相同側邊欄的 Divi Builder。 使用 Divi Builder 插件或主題有相同的結果。 我發布了頁面以實時查看，但過濾器仍然沒有顯示。

在構建器側欄中顯示 WooCommerce 過濾器

幸運的是，即使您使用頁面構建器構建產品頁面，也有一種簡單的方法可以在側欄中顯示 WooCommerce 產品過濾器。 我們需要一個名為 WooCommerce 產品過濾器的插件。

Themify – WooCommerce 產品過濾器

WooCommerce 產品過濾器是 Themify 的免費插件，其工作方式與標準 WooCommerce 產品過濾器小部件不同。 輕鬆創建多個過濾器組合。 使用拖放表單構建器創建表單。 將其設置為垂直或水平佈局，選擇列數並設置樣式以匹配您的網站。 它顯示實時搜索結果並包含許多選項。 它使用起來很直觀，並且適用於所有主題構建器。

創建新產品過濾器

從 WordPress 存儲庫安裝插件。 在儀表板菜單中，轉到產品過濾器>產品過濾器>新增。 您將獲得一個模態，其中包含創建過濾器所需的一切。 完成設置以創建您的短代碼。 這一個過濾器可以創建多種類型的自定義過濾器來創建任意數量的小部件，而不是具有三個過濾器小部件。

給它一個描述過濾器的標題。 從垂直或水平佈局中選擇是否顯示空字段、產品分類、產品數量和缺貨產品。 選擇是否顯示分頁並在標準、無限滾動或加載更多之間進行選擇。

輸入每頁的產品數量。 選擇是否要使字段組可切換、滾動到結果、在分類的 AND 或 OR 邏輯之間進行選擇，以及結果是否顯示在當前頁面或新頁面上。 如果您選擇一個新頁面，您將能夠從列表中選擇該頁面。 您還可以選擇是否在新頁面上顯示過濾器。

做出選擇後，您需要構建表單。 這將決定過濾器在側邊欄中的顯示方式。 將您想要的每個表單元素拖到短代碼創建屏幕底部的字段中。

每個元素都會打開一組新的功能。 每一種都不同，但大多數都有相似的選擇。 下面來看看類別。

給它一個標題。 如果需要，您可以隱藏標題。 選擇是否顯示產品計數、類別層次結構並包括子項。 將過濾器顯示為複選框、鏈接、單選按鈕、下拉框或多選。 選擇邏輯，設置排序順序，根據列數選擇佈局。 設置文本顏色。 您還可以選擇要包括或排除的類別。

如果您選擇顏色，圖標將打開一組顏色選擇器，您可以在其中單獨設置每個產品類別的顏色。 設置背景和文本的顏色。 您可以從選擇器中選擇顏色或在字段中輸入十六進制代碼。

您還可以按所需順序拖放字段。 創建過濾器後，選擇Save 。

關閉模式，您將看到您的過濾器添加到列表中。 它提供過濾器內的名稱、簡碼和字段列表。 您可以編輯、導出或刪除過濾器。 複製短代碼。

將文本小部件添加到側邊欄並粘貼短代碼。

過濾器現在顯示在使用構建器創建的商店頁面中。 這是帶有 Divi Builder 的頁面。

這是頁面上顯示的過濾器，使 Beaver Builder 以 26 為主題。

這是二十七主題中帶有 Elementor 的過濾器。 這個使用水平佈局。

使用 Themify – 帶有 Divi 佈局的 WooCommerce 產品過濾器

Divi 有很多商店佈局可供選擇。 在此示例中，我已將文本模塊添加到家具店商店頁面，並將過濾器短代碼放置在文本模塊中。 我本可以選擇側邊欄模塊，但對於這個例子來說並不重要。

這是垂直佈局。 它非常適合佈局的設計。

我設置按鈕以匹配佈局的樣式。 不幸的是，我無法調整搜索按鈕。

這是水平佈局。 此示例仍然使用我為垂直過濾器選擇的 3/2 列佈局。

過濾器在懸停時打開。 它是響應式的，所以它垂直顯示以適應列。

對於這個，我將過濾器放在商店模塊下。

這是商店模塊上方的過濾器。

無論您是在文本模塊中還是在側邊欄中使用短代碼，您都可以使用 Divi 模塊的設計選項卡添加一些樣式。 這意味著您可以通過設置模塊文本的樣式來設置標籤文本的樣式。 在這個例子中，我將文本設置為紅色，增加了大小，並使其全部大寫。

過濾 WooCommerce 產品

要執行搜索，用戶單擊按鈕，選中復選框，然後滑動滑塊以過濾他們要查找的內容。 他們還可以輸入標題。 當他們準備好時，他們只需點擊搜索按鈕。

搜索結果

結果將顯示您在設置中設置的方式。 對於這個，我已將其設置為在頁面底部顯示它們。 它會自動滾動到結果並為用戶提供排序功能。

如果您將其設置為在新頁面中打開，它會將結果放在該頁面的底部。 在此示例中，我使用“家具店商店”頁面中的標題創建了一個頁面。 我打開了排序功能來顯示排序選項。

結束的想法

這就是我們對如何為使用 Divi Builder 製作的頁面創建過濾的 WooCommerce 側邊欄的看法。 該插件很直觀，並為 WooCommerce 產品添加了許多過濾功能。 您可以根據需要創建任意數量的過濾器並將它們放置在您想要的任何頁面上。 您甚至可以使用 Divi 的造型功能對它們進行造型。 由於它是一個短代碼，您可以在側邊欄或模塊中使用它們。

我想對結果的顯示方式有更多的控制。 例如，在結果出現的地方放置一個短代碼會很有幫助。 這將允許將結果放置在頁面上的任何位置而不是底部。 這將允許自定義頁腳、頁面內的結果區域等。我還希望有更多樣式選項。 主要是，我想設置搜索按鈕的樣式。

Themify – 如果您想要一個免費的插件將產品過濾器添加到您的 Divi Builder 頁面，WooCommerce 產品過濾器是一個不錯的選擇。

我們希望聽到您的意見。 您是否嘗試過使用 Divi Builder 製作的商店頁面的 Themify – WooCommerce 產品過濾器插件？ 請在評論中告訴我們您的體驗。

精選圖片來自 Max Griboedov/shutterstock.com