如何在 WooCommerce 中搜索类别

已发表: 2022-02-15

您想知道如何在 WooCommerce 中按类别搜索吗?

如果您有一个包含大量产品和类别的 WordPress 电子商务网站,它会很方便。 但是,WooCommerce 默认不支持该功能。

在本文中,我们将向您展示在 WooCommerce 中启用类别搜索的 2 种方法。

以下是帮助您浏览的目录:

  • 如何创建仅限于特定类别的搜索表单
  • 如何创建类别选择搜索表单

为什么在 WooCommerce 中按类别搜索

默认情况下,WooCommerce 搜索结果显示所有现有类别的产品。

如果您的在线商店的产品数量很少,这不是问题。

但是,当涉及到拥有数千种产品和大量类别的大型商店时,搜索可能会变得很麻烦。

您是否曾经搜索过特定产品并获得大量甚至不包含您要查找的内容的搜索结果? 然后你就知道这有多令人沮丧。

如果您的在线商店访问者找不到他们想要的产品,他们很可能会立即离开。

它不仅会影响您的收入,还会增加您网站的跳出率。

由于跳出率是谷歌的关键排名因素之一,如果您想成功地从搜索引擎获得流量,最好将其保持在尽可能低的水平。

有两种方法可以让您的访问者按 WooCommerce 类别进行搜索。

第一个是创建一个仅限于特定类别的搜索表单。 第二个是创建一个搜索表单,允许访问者选择他们想要搜索的类别。

让我们按顺序分解它们。

方法 1:创建仅限于特定类别的搜索表单

创建搜索特定 WooCommerce 类别的搜索栏的最简单方法是使用 SearchWP 之类的插件。

SearchWP logo

它是最好的 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 帐户并打开“下载”选项卡。

go to the downloads tab

在那里,按下载 SearchWP按钮并将插件保存到您的计算机。

press the download searchwp button

复制您的许可证密钥,因为您很快就会需要它来激活插件。

copy your searchwp license key

下一步是将 SearchWP 插件 ZIP 文件上传到您的 WordPress 网站。

需要复习一下如何做到这一点? 查看有关如何安装 WordPress 插件的分步教程。

安装 SearchWP 后,单击出现在 WordPress 仪表板顶部栏上的SearchWP按钮。

go over to the searchwp settings

然后,转到“许可证”选项卡。

open the license tab

将您的插件许可证密钥粘贴到相应的字段中,然后单击激活

activate your license key

恭喜。 您已成功激活您的 SearchWP 副本并准备好进行下一步。

第 2 步:下载并安装 WooCommerce 集成扩展

下一步是安装 WooCommerce 集成扩展。

它确保 SearchWP 与 WooCommerce 的无缝集成,为您的访问者提供最佳的用户体验。

您可以在 WooCommerce 集成扩展下载页面获取它。

到达那里后,单击“下载扩展”按钮并将其保存到您的计算机。

download-woocommerce-integration-extension

下载完成后,只需像 SearchWP 一样安装并激活它。

第 3 步:创建新的搜索引擎

下一步是创建一个新的搜索引擎。 为此,请转到 SearchWP 设置中的“引擎”选项卡。

go over to the engines tab

在这里,您将看到您当前拥有的搜索引擎列表、自定义它们并添加新的。

the list of your search engines

您可以将搜索引擎视为 WordPress 在执行搜索时遵循的一组规则。 通过编辑它们,您可以完全自定义搜索在您的网站上的工作方式。

例如,您可以从搜索结果中排除特定帖子或页面,添加任何自定义帖子类型作为搜索源等等。

目前,我们只有适用于整个网站的默认搜索引擎。

由于我们想创建一个仅按特定 WooCommerce 类别搜索的自定义搜索表单,我们将为它添加一个新的搜索引擎。

为此,请单击添加新按钮。

press add new engine

之后,将出现补充搜索引擎。

the supplemental engine

如您所见,在我们的例子中,它有 5 个搜索源:帖子、页面、媒体、产品和用户。

来源的数量可能取决于您网站上安装的插件数量。

例如,当我们安装了 WooCommerce 插件时,会自动添加产品用户源。

由于我们希望此搜索引擎仅在 WooCommerce 产品中进行搜索,因此我们将删除除Products之外的所有其他来源。

为此,请单击右上角的来源和设置

press sources and settings button

取消选中除产品之外的所有框,并将您的引擎标签重命名为更易于识别的名称。

假设我们要为“帽子”产品类别创建一个搜索引擎,所以我们将其命名为帽子

choose the products source and rename the engine

完成后,按完成

press done to save the engine's settings

下一步是指定我们希望新搜索引擎搜索的产品类别。

为此,请单击编辑规则

press the edit rules button

然后,单击添加规则

add a new rule

从下拉列表中选择产品类别分类。

select the product categories attribute

然后,选择您希望产品搜索引擎坚持的特定类别。

type the name of your category

在我们的例子中,我们将选择帽子类别。 完成后,按完成

press done to save the category

要保存您刚刚完成的更改,请单击右上角的保存引擎

click save engines

而已。 您已成功创建了一个仅按 Hats WooCommerce 产品类别搜索的新搜索引擎。

第 4 步:下载并安装简码扩展

现在我们需要下载 Shortcodes SearchWP 扩展。 此扩展程序允许您将带有简码的搜索栏添加到帖子或页面中的任何位置。

您可以在 Shortcodes 扩展下载页面获取它。

到达那里后,按下载扩展程序按钮。

download the shortcodes extension

然后以与 SearchWP 相同的方式安装并激活扩展。

第 5 步:创建新的搜索表单页面

下一步是创建一个单独的页面。 我们将在其上放置一个链接到新创建的产品搜索引擎的搜索栏。

为此,请在 WordPress 仪表板的页面下单击添加新的。

add a new page

然后,给你的页面一个标题,然后单击号向它添加一个新块。

click the plus button

找到自定义 HTML块并单击它。

select the custom html block

然后复制下面的代码并将其粘贴到您刚刚添加的自定义 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 类别进行搜索。

完成后,按右上角的发布按钮发布您的新页面。

press the publish button

然后在下一步中单击查看页面,我们将测试我们的新搜索框。

click view page

第 6 步:测试您的新搜索

我们创建了 2 件产品来测试新的搜索框:一顶红色帽子和一件红色 T 恤。 它们都被分配到适当的类别。

让我们看看如果我们在搜索表单中输入“红色”搜索词会发生什么。

press find results

如您所见,产品“red t-shirt”没有出现在搜索结果中。 只有“红帽”出现。 这意味着我们已经成功地将这个搜索框限制在帽子产品类别中。

we found our page

恭喜,您刚刚学会了如何在 WooCommerce 中创建仅限于特定类别的搜索栏。

方法 2:创建类别选择搜索表单

但是,如果您想让访问者选择他们想要搜索的类别怎么办? 最好的方法是添加一个类别选择搜索表单。

第 1 步:安装并激活 SearchWP

第一步是安装并激活 SearchWP 插件。 如果您还没有这样做,您可以在此处获取您的 SearchWP 副本。

在本文前面,我们已经详细描述了如何在您的网站上安装 SearchWP,因此请随时查看该教程。

第 2 步:创建子主题

安装并激活 SearchWP 后,下一步是创建您在站点上使用的当前主题的子主题。

这很重要,因为此方法涉及更改您的主题代码。

问题是,当您编辑子主题的代码时,更改与父主题的文件分开。

因此,即使您在编辑导致网站崩溃的代码时犯了严重错误,您也可以简单地切换回父主题。

此外,如果您直接对父主题进行更改,一旦您决定更新它,您就会丢失它们。

这就是为什么如果您要编辑 WordPress 主题代码,拥有一个子主题是必不可少的。

如果您需要复习如何创建子主题,请查看如何创建子主题教程。

第 3 步:更改 Functions.php 文件

创建子主题后,下一步是打开 functions.php 文件。

为此,请导航到 WordPress 仪表板中的外观 » 主题文件编辑器

go to the theme editor

然后,在右侧面板中找到functions.php文件并单击它。

open the functions php file

打开后,将以下代码复制并粘贴到文件的最底部:

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' );

这是它在我们的测试站点上的外观:

paste the code to the functions php file

此代码在您网站上的每个现有搜索栏旁边添加一个类别下拉菜单。 它可以让您的访问者选择他们想要搜索的类别。

添加代码后,不要忘记按页面底部的更新文件按钮以保存更改。

click update file

完成后,您就可以进行最后一步并测试您的新搜索了。

第 4 步:测试您的新搜索

为此,请单击 WordPress 仪表板左上角您站点名称下的访问站点按钮。

click visit site

现在,如果您查看任何搜索表单,您会在其旁边看到一个类别下拉菜单。

the category drop-down menu

在本文中,您学习了 2 种方法来创建按 WooCommerce 类别搜索的搜索表单。

如果您准备好创建特定类别的表单,您可以在此处获取您的 SearchWP 副本。

是否要从搜索结果中删除特定页面? 查看此分步指南,了解如何从 WordPress 的站点搜索结果中排除页面。

想知道如何在您的网站上添加搜索栏吗? 那么您可能会对如何使用 4 种不同方式教程在 WordPress 中添加搜索栏感兴趣。