如何在 WooCommerce 中搜索類別

您想知道如何在 WooCommerce 中按類別搜索嗎？

如果您有一個包含大量產品和類別的 WordPress 電子商務網站，它會很方便。 但是，WooCommerce 默認不支持該功能。

在本文中，我們將向您展示在 WooCommerce 中啟用類別搜索的 2 種方法。

以下是幫助您瀏覽的目錄：

• 如何創建僅限於特定類別的搜索表單
• 如何創建類別選擇搜索表單

為什麼在 WooCommerce 中按類別搜索

默認情況下，WooCommerce 搜索結果顯示所有現有類別的產品。

如果您的在線商店的產品數量很少，這不是問題。

但是，當涉及到擁有數千種產品和大量類別的大型商店時，搜索可能會變得很麻煩。

您是否曾經搜索過特定產品並獲得大量甚至不包含您要查找的內容的搜索結果？ 然後你就知道這有多令人沮喪。

如果您的在線商店訪問者找不到他們想要的產品，他們很可能會立即離開。

它不僅會影響您的收入，還會增加您網站的跳出率。

由於跳出率是谷歌的關鍵排名因素之一，如果您想成功地從搜索引擎獲得流量，最好將其保持在盡可能低的水平。

有兩種方法可以讓您的訪問者按 WooCommerce 類別進行搜索。

第一個是創建一個僅限於特定類別的搜索表單。 第二個是創建一個搜索表單，允許訪問者選擇他們想要搜索的類別。

讓我們按順序分解它們。

方法 1：創建僅限於特定類別的搜索表單

創建搜索特定 WooCommerce 類別的搜索欄的最簡單方法是使用 SearchWP 之類的插件。

它是最好的 WordPress 搜索插件，受到全球 30,000 多個網站的信賴。

除了按 WooCommerce 類別搜索外，SearchWP 還允許您製作可搜索的產品屬性、標籤和評論。

這將使您的訪問者更容易找到他們想要的產品，增加銷售額並提供更好的用戶體驗。

此外，SearchWP 具有無縫的 WooCommerce 集成，並自動集成到您網站上的任何現有搜索欄。

SearchWP 還可以通過以下方式提升您的 WordPress 搜索：

• PDF 和 Office 文檔索引：默認情況下，WordPress 不會索引您網站上的文檔中的任何文本。 SearchWP 讓您只需單擊幾下即可將 PDF 和 office 文檔包含到搜索結果中。
• 關鍵字詞幹：原生 WordPress 搜索引擎不理解不同的關鍵字變體，例如“hat”和“hats”，本質上是指同一個產品。 使用 SearchWP，您可以啟用關鍵字詞幹並解決此問題。
• 搜索跟踪：您是否對訪問者在您的網站上搜索的內容感到好奇？ SearchWP 允許您收集所有現場搜索活動數據。 使用這些有價值的信息，您可以更好地了解客戶的需求。

現在讓我們看看如何使用 SearchWP 添加綁定到特定 WooCommerce 類別的搜索欄。

第 1 步：安裝並激活 SearchWP

第一步是在此處獲取您的 SearchWP 副本。

然後，轉到您的 SearchWP 帳戶並打開“下載”選項卡。

在那裡，按下載 SearchWP按鈕並將插件保存到您的計算機。

複製您的許可證密鑰，因為您很快就會需要它來激活插件。

下一步是將 SearchWP 插件 ZIP 文件上傳到您的 WordPress 網站。

需要復習一下如何做到這一點？ 查看有關如何安裝 WordPress 插件的分步教程。

安裝 SearchWP 後，單擊出現在 WordPress 儀表板頂部欄上的SearchWP按鈕。

然後，轉到“許可證”選項卡。

將您的插件許可證密鑰粘貼到相應的字段中，然後單擊激活。

恭喜。 您已成功激活您的 SearchWP 副本並準備好進行下一步。

第 2 步：下載並安裝 WooCommerce 集成擴展

下一步是安裝 WooCommerce 集成擴展。

它確保 SearchWP 與 WooCommerce 的無縫集成，為您的訪問者提供最佳的用戶體驗。

您可以在 WooCommerce 集成擴展下載頁面獲取它。

到達那里後，單擊“下載擴展”按鈕並將其保存到您的計算機。

下載完成後，只需像 SearchWP 一樣安裝並激活它。

第 3 步：創建新的搜索引擎

下一步是創建一個新的搜索引擎。 為此，請轉到 SearchWP 設置中的“引擎”選項卡。

在這裡，您將看到您當前擁有的搜索引擎列表、自定義它們並添加新的。

您可以將搜索引擎視為 WordPress 在執行搜索時遵循的一組規則。 通過編輯它們，您可以完全自定義搜索在您的網站上的工作方式。

例如，您可以從搜索結果中排除特定帖子或頁面，添加任何自定義帖子類型作為搜索源等等。

目前，我們只有適用於整個網站的默認搜索引擎。

由於我們想創建一個僅按特定 WooCommerce 類別搜索的自定義搜索表單，我們將為它添加一個新的搜索引擎。

為此，請單擊添加新按鈕。

之後，將出現補充搜索引擎。

如您所見，在我們的例子中，它有 5 個搜索源：帖子、頁面、媒體、產品和用戶。

來源的數量可能取決於您網站上安裝的插件數量。

例如，當我們安裝了 WooCommerce 插件時，會自動添加產品和用戶源。

由於我們希望此搜索引擎僅在 WooCommerce 產品中進行搜索，因此我們將刪除除Products之外的所有其他來源。

為此，請單擊右上角的來源和設置。

取消選中除產品之外的所有框，並將您的引擎標籤重命名為更易於識別的名稱。

假設我們要為“帽子”產品類別創建一個搜索引擎，所以我們將其命名為帽子。

完成後，按完成。

下一步是指定我們希望新搜索引擎搜索的產品類別。

為此，請單擊編輯規則。

然後，單擊添加規則。

從下拉列表中選擇產品類別分類。

然後，選擇您希望產品搜索引擎堅持的特定類別。

在我們的例子中，我們將選擇帽子類別。 完成後，按完成。

要保存您剛剛完成的更改，請單擊右上角的保存引擎。

而已。 您已成功創建了一個僅按 Hats WooCommerce 產品類別搜索的新搜索引擎。

第 4 步：下載並安裝簡碼擴展

現在我們需要下載 Shortcodes SearchWP 擴展。 此擴展程序允許您將帶有簡碼的搜索欄添加到帖子或頁面中的任何位置。

您可以在 Shortcodes 擴展下載頁面獲取它。

到達那里後，按下載擴展程序按鈕。

然後以與 SearchWP 相同的方式安裝並激活擴展。

第 5 步：創建新的搜索表單頁面

下一步是創建一個單獨的頁面。 我們將在其上放置一個鏈接到新創建的產品搜索引擎的搜索欄。

為此，請在 WordPress 儀表板的頁面下單擊添加新的。

然後，給你的頁面一個標題，然後單擊加號向它添加一個新塊。

找到自定義 HTML塊並單擊它。

然後復制下面的代碼並將其粘貼到您剛剛添加的自定義 HTML 塊中：

[searchwp_search_form engine="hats" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="hats" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="hats"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="hats"]
</div>

請注意，如果您將搜索引擎命名為Hats以外的名稱，則需要在上述代碼中的 4 個位置替換其名稱。

此代碼輸出鏈接到Hats搜索引擎的搜索表單。 這意味著它僅按“帽子”WooCommerce 類別進行搜索。

完成後，按右上角的發布按鈕發布您的新頁面。

然後在下一步中單擊查看頁面，我們將測試我們的新搜索框。

第 6 步：測試您的新搜索

我們創建了 2 件產品來測試新的搜索框：一頂紅色帽子和一件紅色 T 卹。 它們都被分配到適當的類別。

讓我們看看如果我們在搜索表單中輸入“紅色”搜索詞會發生什麼。

如您所見，產品“red t-shirt”沒有出現在搜索結果中。 只有“紅帽”出現。 這意味著我們已經成功地將這個搜索框限制在帽子產品類別中。

恭喜，您剛剛學會瞭如何在 WooCommerce 中創建僅限於特定類別的搜索欄。

方法 2：創建類別選擇搜索表單

但是，如果您想讓訪問者選擇他們想要搜索的類別怎麼辦？ 最好的方法是添加一個類別選擇搜索表單。

第 1 步：安裝並激活 SearchWP

第一步是安裝並激活 SearchWP 插件。 如果您還沒有這樣做，您可以在此處獲取您的 SearchWP 副本。

在本文前面，我們已經詳細描述瞭如何在您的網站上安裝 SearchWP，因此請隨時查看該教程。

第 2 步：創建子主題

安裝並激活 SearchWP 後，下一步是創建您在站點上使用的當前主題的子主題。

這很重要，因為此方法涉及更改您的主題代碼。

問題是，當您編輯子主題的代碼時，更改與父主題的文件分開。

因此，即使您在編輯導致網站崩潰的代碼時犯了嚴重錯誤，您也可以簡單地切換回父主題。

此外，如果您直接對父主題進行更改，一旦您決定更新它，您就會丟失它們。

這就是為什麼如果您要編輯 WordPress 主題代碼，擁有一個子主題是必不可少的。

如果您需要復習如何創建子主題，請查看如何創建子主題教程。

第 3 步：更改 Functions.php 文件

創建子主題後，下一步是打開 functions.php 文件。

為此，請導航到 WordPress 儀表板中的外觀 » 主題文件編輯器。

然後，在右側面板中找到functions.php文件並單擊它。

打開後，將以下代碼複製並粘貼到文件的最底部：

function my_searchwp_get_search_form_with_categories_dropdown( $form ) {
    ob_start(); ?>
        <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
            <label>
                <span class="screen-reader-text">Search For</span>
                <input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
            </label>
            <?php
                // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
                $swp_cat_dropdown_args = array(
                        'show_option_all'  => __( 'Any Category' ),
                        'name'             => 'swp_category_limiter',
                    );
                wp_dropdown_categories( $swp_cat_dropdown_args );
            ?>
            <input type="submit" class="search-submit" value="Search" />
        </form>
    <?php return ob_get_clean();
}
 
add_filter( 'get_search_form', 'my_searchwp_get_search_form_with_categories_dropdown' );

這是它在我們的測試站點上的外觀：

此代碼在您網站上的每個現有搜索欄旁邊添加一個類別下拉菜單。 它可以讓您的訪問者選擇他們想要搜索的類別。

添加代碼後，不要忘記按頁面底部的更新文件按鈕以保存更改。

完成後，您就可以進行最後一步並測試您的新搜索了。

第 4 步：測試您的新搜索

為此，請單擊 WordPress 儀表板左上角您站點名稱下的訪問站點按鈕。

現在，如果您查看任何搜索表單，您會在其旁邊看到一個類別下拉菜單。

在本文中，您學習了 2 種方法來創建按 WooCommerce 類別搜索的搜索表單。

如果您準備好創建特定類別的表單，您可以在此處獲取您的 SearchWP 副本。

是否要從搜索結果中刪除特定頁面？ 查看此分步指南，了解如何從 WordPress 的站點搜索結果中排除頁面。

想知道如何在您的網站上添加搜索欄嗎？ 那麼您可能會對如何使用 4 種不同方式教程在 WordPress 中添加搜索欄感興趣。