WooCommerce产品过滤器评论：灵活的Ajax产品过滤器

如果您拥有WooCommerce商店，则需要使购物者可以轻松地从众多产品中找到他们感兴趣的产品。 最好的方法之一是使用产品过滤器。 例如，让人们按价格，颜色，类别等进行过滤。

您几乎在所有电子商务商店中都会看到这种方法。 但是，尽管WooCommerce确实为您提供了一些基本的过滤器小部件，但本地的WooCommerce插件在很大程度上缺少任何类型的高级产品过滤系统。

免费的WooCommerce产品过滤器插件可以改变这一点。 它为您提供了购物者可以使用的各种过滤器，包括Ajax选项，使他们可以过滤产品而无需重新加载页面。 这些包括搜索框，范围过滤器（例如价格），复选框（例如类别），按钮，属性选择器，下拉菜单，切换开关，自定义分类过滤等。

在动手的WooCommerce产品过滤器评论中，我们将带您了解该插件必须提供的所有内容。

WooCommerce产品筛选器审查：主要功能

简而言之，WooCommerce产品筛选器为您的购物者提供了选择以按照不同的条件（例如价格，类别，标签，属性（例如大小或颜色），评论等级，销售状态等）筛选产品。 它还使他们能够使用Ajax实时搜索功能按关键字进行搜索。

您可以添加过滤器：

• 在边栏中使用专用小部件。
• 在具有专用Elementor集成的Elementor设计中。
• 使用简码在您网站上的其他任何地方。
• 使用PHP函数直接在主题的模板文件中。

您将获得大量不同的过滤器选项：

• 价格–最小/最大滑块
• 价格范围–从预定的价格范围（您可以自定义）中选择
• 分类目录
• 标签
• 产品属性–颜色，滑块等的输入选项
• 产品作者–适用于多供应商商店
• 特色产品
• 特价产品
• 库存状况
• 产品等级
• 关键字–用于按文本搜索的搜索框
• 自定义分类法和自定义字段，包括ACF兼容性

此外，每个过滤器选项都包含多种输入类型。 例如，如果您使用预设的价格范围，则可以让人们使用复选框或下拉列表选择他们的范围。 有些选择还远远不止这些。 例如，根据过滤器，您可以使用：

• 单选按钮（单选）
• 下拉菜单（单选）
• 多个下拉
• 复选框列表（多选）
• 纽扣
• 文本
• 滑杆
• 颜色
• 切换

通常，您还将获得许多用于控制过滤器功能和样式的选项。

最后，您可以创建无限制的过滤器集，并在不同情况下显示不同的过滤器。

例如，您可以向移动访问者显示一组过滤器，向桌面访问者显示另一组过滤器。 或者，您可以为一个类别中的产品显示一组过滤器，为另一类别中的产品显示一组不同的过滤器（对于标签也是如此）。

这样可以确保您的过滤器始终针对特定的访问者/产品进行优化。

让我们动手，我将向您展示其工作原理…

动手使用WooCommerce产品过滤器

作为参考，本部分使用的是WooCommerce产品过滤器的高级版本。 但是，基本版本与免费版本相同。

安装并激活插件后，第一步就是创建第一个“过滤器”。 过滤器是您希望购物者进行过滤的一组选项。 可能是一件事，例如价格范围，或者可能是多件事。

如前所述，您可以创建多个过滤器组并在不同情况下显示不同的过滤器组。

创建您的第一个过滤器

要开始使用，请转到 Woo产品过滤器→添加新过滤器。

给它命名后，将获得三个设置选项卡来控制它的工作方式。

首先，您将使用下拉菜单选择要添加的过滤器类型。 对于第一个，我将选择价格范围选项。 您也可以只选择“价格”为用户提供价格滑块。

如果需要，可以添加多个过滤器。 这样做时，您会看到它们在完成的过滤器的实时预览中自动更新：

要配置单个过滤器，您可以在列表中展开其选项。 例如，如果您扩展价格范围过滤器，您将获得很多选择来控制其功能和显示。

例如，如果将其从复选框列表更改为下拉列表，则可以看到实时预览更新：

不同的过滤器将为您提供不同的设置。 例如，如果您添加“搜索依据”文本框，则可以选择要搜索的内容。 您可以包括/排除内容，摘要，类别，属性，SKU等。

通常，每个过滤器选项都会为您提供很多选择输入的控件。 您可以根据需要从不同的输入中进行选择，例如复选框，单选按钮，下拉菜单等。 您甚至可以获得一些独特的东西。 例如，对于评级过滤器，您可以在一行中添加星级（访客点击他们想要多少颗星）或多行。

完成后，您应该拥有一个看起来像下面的过滤器列表。 如果要更改任何过滤器选项的顺序，只需将它们拖放到新位置即可：

探索自定义分类过滤

较独特的功能之一是能够基于自定义分类法或自定义字段设置自定义过滤器的功能。 您将获得针对流行的自定义内容工具（例如高级自定义字段（ACF）和自定义帖子类型UI（CPT UI））的内置集成。 它也可以与其他自定义分类法一起使用，甚至包括您使用代码手动创建的分类法。

例如，如果您要销售音乐，则可以为“流派”添加自定义分类法。 然后，您可以使用各种输入选项中的任何一个轻松地将该自定义分类法设置为过滤器。 这是切换后的样子：

配置选项设置

接下来，您可以转到 选项 标签为所有过滤器配置一些设置。

最重要的选择之一是是否启用Ajax。 启用后，购物者可以使用过滤器而无需重新加载页面，这是一种真正的用户友好体验。

另一个重要的选择是在何处显示此组过滤器以及谁应该看到它们。 您可以在不同的WooCommerce内容或不同的设备（移动设备与台式机）上启用/禁用过滤器。

这很有用，因为它使您可以通过在不同情况下显示不同的筛选器来创建优化的体验。 它还可以帮助您为移动访问者创建更加用户友好的体验。 例如，您可以为桌面访问者使用一个复选框，为移动访问者使用一个更适合移动设备的输入。

在其他选项标签中，您可以进行一些其他选择：

• 纽扣 –配置有关过滤器按钮的所有内容。
• 内容 –控制产品内容区域。 例如，您可以在购物者应用过滤器后添加“显示更多”按钮或重新计数产品。 该插件还为您提供了一个简短的代码来显示您的产品，如果您想创建一个专用的过滤器页面，该代码将非常有用。
• 装载机 –自定义/禁用使用Ajax时应用过滤器时出现的加载器图标。

配置设计设置

最后，您可以转到 设计 标签以配置过滤器的样式。 这里有一些重要的选择：

• 使用插件的内置样式或主题的样式。
• 配置宽度和高度。
• 添加自定义CSS或JavaScript。

其他选项卡-块，标题和按钮-都是可选的。 如果需要，可以为这些区域启用自定义样式，以便能够使用自己的选择覆盖所有样式设置。

如果启用了自定义样式，则外观如下：

显示您的过滤器

至此，您已经完成工作了–剩下要做的就是向购物者显示过滤条件。

再次，WooCommerce产品筛选器为您提供了几种选择：

• 本机WordPress小部件
• Elementor小部件
• 短代码
• PHP功能

例如，如果您添加专用 Woo产品筛选器 小部件，然后您可以使用下拉菜单选择要显示的过滤器：

然后是商店的侧边栏中的过滤器–我将它们配置为继承主题的样式：

简码和PHP方法也很容易解释。 但是，让我们更深入地研究Elementor集成，因为我知道很多人可能正在使用Elementor WooCommerce Builder设计商店。

在这里，我正在使用Elementor WooCommerce Builder创建产品归档模板。 首先，我创建了一个两列的设计，其中在左栏中包含了Archive Products小部件，以显示我的所有产品。 然后，我可以添加新的 Woofilters 右列的窗口小部件以显示过滤器。

您还可以在不离开Elementor界面的情况下创建和自定义过滤器，这是一个不错的奖励：

在元素中 风格 标签，您还可以从常规WooCommerce产品过滤器界面访问所有选项。 元素 先进的 标签，然后为您提供所有来自 设计 标签（以及Elementor的所有常规选项）。

总体而言，如果您使用的是Elementor，则此小部件非常方便，可以在设计中包含产品过滤器。

WooCommerce产品筛选器定价

WooCommerce产品过滤器既有WordPress.org的免费版本，又有增加了更多功能的高级版本。

免费版包含大多数核心功能，而高级版则为您提供了更多过滤产品的选项，这些产品具有搜索框和复选框列表（多选）以及用于过滤产品属性的图标等功能。

如果要使用Pro，则有三个计划。 这些计划具有相同的功能–唯一的不同是，您可以在以下位置使用多少个插件：

• 1个网站– $ 49
• 5个网站– $ 99
• 无限网站– 199美元

关于WooCommerce产品筛选器的最终思考

总体而言，我发现WooCommerce产品过滤器是一种将产品过滤器添加到WooCommerce商店的直观且灵活的方法。

当我测试它们时所有的过滤器都可以工作，并且Ajax过滤器可以快速加载产品（作为参考，我的商店有大约15种产品）。

过滤器也非常灵活，具有许多设置来控制输入，功能，样式等。

另外，我喜欢您有很多显示过滤器的选项，尤其是Elementor集成，因为这使您可以直接在Elementor界面内部进行工作。

如果您想对其进行测试，则可以免费获得大多数功能。 然后，考虑升级以访问搜索框和其他高级过滤器。

获取专业版获取免费版