新! 使用AJAX过滤器窗口小部件创建一个WooCommerce产品表–麦客网络外贸建站

我们在WOOF的同事发布了一个连接器插件 WooCommerce产品过滤器 插件与我们的 WooCommerce产品表 插入。 您可以使用此创建产品表视图与即时AJAX过滤器小部件。

这是一个关于如何使用连接器插件并将其全部设置的分步指南。

获取产品表 获取过滤器

WooCommerce AJAX过滤器小部件产品表插件

请参阅我们的演示网站上的集成操作

我需要AJAX过滤器小部件吗?

客户可以通过多种不同的方法来搜索和过滤WooCommerce产品表中的数据。 插件中内置以下选项。 它们都是可选的,您可以根据需要显示或隐藏它们:

  • 关键字搜索框。
  • 按任意列进行排序
  • 过滤器下拉列表 可以让您按照产品类别,标签,自定义分类法,属性或变体进行过滤。 过滤器下拉列表可以使用AJAX立即工作。
  • 过滤小部件 它复制了与WooCommerce本身一起的那些。 这些可以添加到任何窗口小部件区域,例如左侧或右侧边栏。 执行过滤器时,页面会重新加载。 您可以按产品属性,评级或价格过滤。

您可以测试我们的内置过滤器选项 演示页面

WOOF过滤器插件是如何构建的?

WOOF WooCommerce产品过滤器 插件为过滤产品表添加了额外的选项。 它使用AJAX,它立即过滤产品,而不重新加载页面。 除了能够按产品属性,价格和评级过滤,您还可以创建其他类型的过滤器。 这包括按类别过滤,自定义产品属性,标签和自定义分类法。

限制

在您开始之前,有两个主要的限制要注意:

  • 您只能在标准WordPress页面上使用WooCommerce产品表与WOOF AJAX过滤器小部件。 WOOF桥接插件提供了一个简单的短码,您可以添加到任何页面。 这会自动将产品表添加到页面,侧边栏中的WOOF过滤器小部件。 不可能将AJAX过滤器小部件的产品表添加到您的主要WooCommerce商店页面或产品类别页面。 您仍然可以使用内置过滤器将产品表添加到商店和类别模板,但WOOF过滤器只能与标准WordPress页面上的产品表一起使用。
  • 由于AJAX过滤器仅在具有产品表的普通页面上工作,因此不能将过滤器用作页面上的独立元素。 例如,不可能使用WOOF过滤器创建页面,然后在客户选择过滤器之后加载产品表。 相反,客户必须首先加载已经包含产品表的页面。 表格加载后,他们可以使用AJAX过滤器来细化产品列表。 ( 提示:您可以创建链接,将客户直接带到预过滤的产品表。 要获取链接,请过滤表格并复制URL。 例如, producttable.barn2.co.uk/woof-ajax-filter-widgets/?swoof=1&product_cat=clothing 将对服装类别的表进行预过滤。)
  • 正如你可以看到的 知识库 ,WooCommerce产品表附带了数十种配置产品表的选项。 当您自行使用WooCommerce产品表时,您可以直接在短代码中配置每个表。 这意味着您可以向您的网站添加多个表,每个表都不同。 相比之下,当您使用WOOF连接器插件创建产品表时,必须在设置页面上集中配置表选项。 这意味着所有的表必须是相同的,所以没有一个有多个。

那么值得使用吗?

总的来说,我会说WOOF的WooCommerce AJAX过滤器插件是扩展WooCommerce产品表中可用的过滤器的极好方法。

如果使用它 您要将产品表添加到您网站的单个页面,侧边栏中的WooCommerce AJAX过滤器小部件。

不要使用它 您要创建多个不同选项的产品表; 让客户在表首先加载之前执行过滤器; 或将产品表添加到WooCommerce商店页面或类别归档模板。

接下来,我将向您展示如何将两个插件一起使用。 首先,您需要单独设置两个插件。 然后,您可以按照说明安装连接器插件,并使用AJAX过滤器小部件创建一个WooCommerce产品表。

在你开始之前,你应该已经有了 WordPress的 网站免费 WooCommerce 插件安装。 运行安装向导并开始添加产品。

设置WooCommerce产品表

WooCommerce表视图 接下来,您需要安装WooCommerce产品表和WooCommerce产品过滤器。 安装这些插件的顺序并不重要,但我们假设您先安装产品表:

  1. 获取WooCommerce产品表 并使用确认电子邮件中的说明安装并激活该插件。 这包括激活您的许可证密钥,这是插件工作所需的。

就这样,当您在一分钟内设置WOOF连接器插件时创建产品表。

获取产品表

设置WOOF WooCommerce产品过滤器

Woof WooCommerce产品过滤器插件

  1. 得到 WooCommerce产品过滤器 并使用其中的说明进行安装 文件 。 还有 视频 关于如何设置过滤器。 WooCommerce WOOF产品过滤插件设置
  2. 使用文档根据需要配置插件设置。
  3.  外观>小部件 并将“WOOF – WooCommerce Products Filter”宽度添加到主侧面区域的顶部。 默认情况下,当您使用连接器插件以及主WooCommerce商店页面和类别页面(将使用默认布局而不是产品表)时,这将显示在产品表页面上。

获取过滤器

设置连接器插件

现在是时候设置将WooCommerce产品表与WooCommerce产品过滤器集成的桥接插件。 WOOF已经以非标准的方式实现了这一点,所以您必须完全遵循这些说明。 (另见下面的分步截图)

  1. 首先,去 woocommerce-filter.com/extensions ,点击WooCommerce产品表扩展,然后点击橙色的下载按钮。
  2. WooCommerce>设置>产品过滤器 并转到高级选项卡。 点击此处的“选项”标签,然后滚动到底部,直到找到“自定义扩展程序文件夹”选项。 添加一个称为类似的文件夹名称 woof_extensions 和保存。 这将为WOOF插件创建一个文件夹来存储连接器插件。
  3. 还在 WooCommerce>设置>产品过滤器 ,现在转到扩展选项卡。 点击“EXT-APPLICATIONS OPTIONS”选项卡,点击“选择一个扩展名”,然后选择您在步骤1中下载的扩展名。这将将连接器插件上传到您在步骤2中指定的文件夹。您应该看到一个“成功 ‘消息,但在我的一个测试中,它显示一个加载屏幕永远,我不得不刷新 – 所以如果需要这样做。
  4. 返回到扩展选项卡,现在您将在“自定义扩展安装”部分中看到“WooCommerce产品表连接器”。 勾选框以激活此插件,向下滚动并保存。
  5. 返回扩展选项卡,然后点击“EXT-APPLICATIONS OPTIONS”。 现在,您将看到一个“短码数据”框。 您需要使用该选项来配置产品表 WooCommerce产品表知识库 。 您需要添加短代码选项,而不需要其余的产品表短代码。

如何添加产品表的短码选项

假设您要创建一个产品表,其中列有名称,简短描述,价格和添加到购物车按钮。 你想按名称对表进行排序。 按照知识库中的说明,您将创建此短代码:

[product_table columns ='name,short-description,price,add-to-cart'sort_by ='name']

WOOF连接器插件将添加短代码的第一部分和最后一部分,因此您只需将其输入到“短代码数据”框中即可:

columns ='name,short-description,price,add-to-cart'sort_by ='name'

  1. 现在保存您的更改。 (警告:WooCommerce产品表知识库中的短代码示例使用双引号(例如, 列=“名” )。 由于WOOF连接器插件的限制,您需要在“短码数据”框中输入单引号。 列=“名” ),否则设置将无法正确保存。 我们已经要求WOOF解决这个问题,但现在请使用单引号。)
  2. 现在转到WordPress的正常页面 (页面>添加 新增)并添加以下短代码 – [woof_products per_page = 8 is_ajax = 0 tpl_index = tpl_woo_table] – 然后保存并查看页面。

现在查看您的产品表与WooCommerce AJAX过滤器小部件!

WooCommerce AJAX过滤器小部件产品表插件

最后,查看页面。 您将看到一个产品表,其中包含您在步骤6中输入的选项以及侧边栏中的WOOF过滤器小部件。

测试AJAX过滤器小部件,您将看到产品表在您的眼前立即更新!

随时对您的产品表选项,WOOF过滤器插件设置以及直接在过滤器窗口小部件中进行任何改进。 继续调整和测试,直到你满意的一切。

疑难解答技巧 如果AJAX筛选器小部件中没有显示任何内容,请确保已将“WOOF – WooCommerce Products Filter”小部件添加到侧边栏,并正确设置WOOF插件。 在您添加一些过滤器之前,过滤器小部件将显示为空白 WooCommerce>设置>产品过滤器>结构 (看到 文件 )。

在哪里可以获得支持的插件?

使用连接器插件,了解谁联系支持总是棘手的:

支持WooCommerce产品过滤器和WooCommerce产品表连接器插件

阅读 过滤插件文档 第一,和 联系WOOF 如果需要支持

支持WooCommerce产品表插件

搜索知识库 首先,并联系Barn2 Media,以便在需要时创建产品表。

疑难解答技巧 如果您发现产品表的任何问题或错误,请添加产品表的短码(见 知识库 )直接到正常页面,看看问题是否也出现在那里。 这将有助于您决定是否是Product Table插件的问题(在这种情况下,您应该联系Barn2 Media以获得支持),或WOOF插件和连接器(WOOF可以帮助您)。

结论

感谢WOOF的团队创建连接器插件。 我们的几位客户之前曾经告诉过我们他们希望将两个插件一起使用,我们很高兴地发现这个扩展。

您是否使用WooCommerce产品表与AJAX过滤器小部件? 你觉得很容易设置,怎么可以改进? 我们很乐意听到你的声音!

获取产品表 获取过滤器

,

关注微信公众号

上一篇文章
8必看SEO和在线营销监控工具–麦客网络外贸建站
下一篇文章
您可以从Google的新型蜂鸟算法更改中学到最好的教训–麦客网络外贸建站
菜单