WordPress divi主题

如何为您的 Divi WooCommerce 页面创建过滤侧边栏

by | May 15, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

如果您曾经尝试将过滤后的 WooCommerce 侧边栏添加到您使用页面构建器制作的页面中,您可能已经注意到过滤器不会出现在您的页面上。 无论您使用哪个页面构建器,过滤器都不会显示。

google广告开户

原因是这些小部件与页面构建器不兼容。 在本文中,我们将介绍一种为使用 Divi Builder 或任何其他页面构建器创建的页面创建过滤后的 WooCommerce 侧边栏的简单方法。

标准 WooCommerce 侧边栏

WooCommerce 包括几个可过滤的小部件。

  • 按属性过滤产品
  • 按价格筛选产品
  • 按评级过滤产品

这些小部件适用于常规 WordPress 主题,但它们不会显示在使用页面构建器制作的页面上。

WordPress 主题

可过滤的小部件在使用常规 WordPress 主题制作的页面中工作正常。 二十七岁的人在侧边栏上毫不费力地展示了它们。 我正在使用 WooCommerce 示例数据,其中包括颜色和价格。 按属性和按价格过滤产品非常突出。

这是 Divi 显示 WooCommerce 默认商店页面而不使用 Divi Builder。 它像任何普通主题一样显示过滤器小部件。

WordPress 建设者

使用构建器制作的页面不显示 WooCommerce 过滤器小部件。 如果侧边栏显示在构建器中或作为标准侧边栏显示,则没有任何区别。 这里有一些例子。

WordPress divi主题

此页面是使用 Beaver Builder 构建的。 它包括侧边栏,但不显示过滤器。 我添加了一个文本小部件,因此您可以看到没有过滤器小部件的侧边栏确实显示。 我发布了该页面以实时查看,但没有任何区别。

这个是用 Elementor 构建的。 我在产品上方添加了侧边栏。 它显示文本小部件,但不显示过滤器。 我还发布了该页面以实时查看,但没有区别。

这是显示相同侧边栏的 Divi Builder。 使用 Divi Builder 插件或主题具有相同的结果。 我发布了页面以实时查看,但过滤器仍然没有显示。

在生成器侧边栏中显示 WooCommerce 过滤器

幸运的是,即使您正在使用页面构建器构建产品页面,也有一种简单的方法可以在侧边栏中显示 WooCommerce 产品过滤器。 我们需要一个名为 WooCommerce 产品过滤器的插件。

Themify – WooCommerce 产品过滤器

WooCommerce 产品过滤器是来自 Themify 的免费插件,其工作方式与标准 WooCommerce 产品过滤器小部件不同。 轻松创建多个过滤器组合。 使用拖放表单构建器创建表单。 将其设置为垂直或水平布局,选择列数并设置其样式以匹配您的网站。 它显示实时搜索结果并包含许多选项。 它使用起来很直观,并且适用于所有主题构建器。

创建新产品过滤器

fiverr建站WordPress程序员

从 WordPress 存储库安装插件。 在仪表板菜单中,转到 产品过滤器 > 产品过滤器 > 添新. 您将获得一个模式,其中包含创建过滤器所需的一切。 完成设置以创建您的简码。 这一个过滤器可以创建多种类型的自定义过滤器来创建任意数量的小部件,而不是具有三个过滤器小部件。

给它一个描述过滤器的标题。 从垂直或水平布局中选择是否显示空白字段、产品排序、产品计数和缺货产品。 选择是否显示分页并在标准、无限滚动或加载更多之间进行选择。

输入每页的产品数量。 选择是否要使字段组可切换、滚动到结果、在分类法的 AND 或 OR 逻辑之间进行选择,以及结果是否显示在当前页面或新页面上。 如果您选择一个新页面,您将能够从列表中选择该页面。 您还可以选择过滤器是否显示在新页面上。

做出选择后,您需要构建表单。 这将决定过滤器在侧边栏中的显示方式。 将您想要的每个表单元素拖到简码创建屏幕底部的字段中。

独立站选品工具

每个元素都会打开一组新功能。 每个都是不同的,但大多数都有相似的选择。 下面看一下类别。

给它一个标题。 如果需要,您可以隐藏标题。 选择是否显示产品数量、类别层次结构并包括子项。 将过滤器显示为复选框、链接、单选按钮、下拉框或多选。 选择逻辑,设置排序顺序,并选择具有列数的布局。 设置文本颜色。 您还可以选择要包含或排除的类别。

如果您选择颜色,它将打开一组颜色选择器的图标,您可以在其中单独设置每个产品类别的颜色。 设置背景和文本的颜色。 您可以从选择器中选择颜色或在字段中输入十六进制代码。

高质量外链购买

您还可以按照需要的顺序拖放字段。 创建过滤器后,选择 节省.

关闭模式,您会看到您的过滤器已添加到列表中。 它提供名称、简码和过滤器中的字段列表。 您可以编辑、导出或删除过滤器。 复制简码。

JasperAI 10000字免费额度试用

将文本小部件添加到侧边栏并粘贴短代码。

过滤器现在显示在使用构建器创建的商店页面中。 这是 Divi Builder 的页面。

这是在 26 岁主题中制作的 Beaver Builder 页面上显示的过滤器。

WordPress备份工具updrafplus

这是 27 岁主题中使用 Elementor 的过滤器。 这个使用水平布局。

使用 Themify – WooCommerce 产品过滤器和 Divi 布局

Divi 有很多商店布局可供选择。 在此示例中,我向家具店商店页面添加了一个文本模块,并将过滤器简码放置在文本模块中。 我本可以选择侧边栏模块,但这个例子并不重要。

这是垂直布局。 它非常适合布局的设计。

我设置按钮以匹配布局的样式。 不幸的是,我无法调整搜索按钮。

这是水平布局。 此示例仍然使用我为垂直过滤器选择的 3/2 列布局。

过滤器在悬停时打开。 它是响应式的,因此它垂直显示以适应列。

对于这个,我将过滤器放在了商店模块下。

这是商店模块上方的过滤器。

无论您是在文本模块中还是在侧边栏中使用简码,您都可以使用 Divi 模块的“设计”选项卡添加一些样式。 这意味着您可以通过设置模块文本的样式来设置标签文本的样式。 在此示例中,我将文本设置为红色,增加了大小,并使其全部大写。

过滤 WooCommerce 产品

要执行搜索,用户单击按钮,选中复选框,然后滑动滑块以过滤他们正在查找的内容。 他们还可以输入标题。 当他们准备好时,他们只需点击搜索按钮。

搜索结果

结果将显示您在设置中设置的方式。 对于这个,我已将其设置为在页面底部显示它们。 它会自动滚动到结果并为用户提供排序功能。

如果您将其设置为在新页面中打开,它会将结果放在该页面的底部。 在此示例中,我使用家具店商店页面中的标题创建了一个页面。 我已经打开了排序功能来显示排序选项。

结束的想法

这就是我们如何为使用 Divi Builder 制作的页面创建过滤后的 WooCommerce 侧边栏。 该插件很直观,并为 WooCommerce 产品添加了许多过滤功能。 您可以根据需要创建任意数量的过滤器并将它们放置在您想要的任何页面上。 您甚至可以使用 Divi 的造型功能来设计它们。 由于它是一个简码,您可以在侧边栏或模块中使用它们。

我想更好地控制结果的显示方式。 例如,在结果出现的地方放置一个简码会很有帮助。 这将允许将结果放置在页面上的任何位置而不是底部。 这将允许自定义页脚、页面内的结果区域等。我还希望有更多的样式选项。 主要是,我想设置搜索按钮的样式。

Themify – WooCommerce 产品过滤器是一个不错的选择,如果您想要一个免费插件来将产品过滤器添加到您的 Divi Builder 页面。

我们希望收到你的来信。 您是否尝试过使用 Divi Builder 制作的商店页面的 Themify – WooCommerce 产品过滤器插件? 请在评论中告诉我们您的体验。

特色图片来自 Max Griboedov / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题