如何为您的 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