如何将 WooCommerce 产品表与 Elementor 结合使用

WordPress 让建立网站变得简单，而 WooCommerce 则能将任何 WordPress 网站快速变成一个功能齐全的在线商店。但是，如果只简单地使用它们的默认设置，网站可能会显得普通，无法突出业务特色。

WordPress 和 WooCommerce 有着海量的插件，可以为商店增加各种强大的功能。其中，Elementor 是一个非常实用的工具，它能轻松地定制 WooCommerce 的产品页面。

Woocommerce 产品表和 Elementor 简介

如上所述，有大量 WordPress 插件可供选择，它们可以帮助设计出更好的 WordPress 网站，满足需求。有些插件是大型插件，有些则专注于添加特定元素或功能。

Elementor 就是前者的一个例子：

Elementor 提供了设计网页和创建内容的全新界面。通过从庞大的部件、区块和布局库中进行选择和自定义，可以对网站的组合方式进行更多控制。

另一方面，WooCommerce 产品表是一个更有针对性的解决方案：

该插件可帮助添加列出 WooCommerce 产品的动态可定制表格。这些表格可用于多种应用，但与 WooCommerce 的整合使其成为以用户友好和有吸引力的方式展示产品和服务，是一个比较完美的工具。(如果想展示产品以外的内容，如帖子、页面或文档，那么你可以使用它的其它插件 Posts Table Pro。Posts Table Pro 与 Elementor 集成得同样好，它可以在表格中列出任何 WordPress 内容类型，而不仅仅只是 WooCommerce 产品）。

如何将 Woocommerce 产品表与 Elementor 页面生成器一起使用

首先，确保网站已经安装了 Elementor 和 WooCommerce Product Table 这两个插件，并且 WooCommerce 也已经安装并激活。这些步骤通常都很简单快捷，完成之后，就可以开始打造独特的网站了。现在，让我们开始吧！

1. 将 Woocommerce 产品表添加到文本编辑器或简码小部件

从最基本、最有用的应用程序开始。如果只想在 Elementor 网站上使用动态产品表，则可以将其添加到小部件中，以便它将显示在前端。 打开任何页面或帖子，并确保使用的是 Elementor 编辑器。如果看到传统的 WordPress 界面，点击“使用 Elementor 编辑”按钮进行切换：

如果这是第一次使用 Elementor，快速浏览一下。在右侧，会看到一个大空间，其中显示内容，并在添加和编辑内容时实时更新。左侧有一个“小部件”列表，可以将其拖动到该区域，然后根据需要重新排列和自定义：

可以将产品表添加到许多不同的 Elementor 小部件。但是，如果只想在页面上显示单个产品表，则可以使用基本文本部分来实现。因此，抓取文本编辑器小部件并将其拖动到空白区域：

然后，可以点击小工具内部删除默认文本，并输入喜欢的任何内容。至于产品表格本身，只需粘贴这个简单的简码即可添加：

[product_table]

不管在页面的哪个位置放置了相关代码，产品表都会相应地显示出来。可以通过在网站前端查看页面来验证。

如果只是想将元素用于代码本身，还可以使用Shortcode 小部件：

不论决定将产品表放在哪个位置，一定要记得在放置好之后保存页面。如果希望产品表看起来符合的要求，可以进一步自定义它的外观和功能。

操作也简单，回到WordPress的仪表盘，然后找到并点击“WooCommerce”菜单，选择“设置”选项卡。在屏幕顶部，点击“产品”选项，接着找到并点击“产品表”来进行相关设置。

在这里，找到 WooCommerce 产品表的全面设置列表。选择表格中将显示哪些信息，为表格添加过滤器和变量，等等。在这里所做的任何更改都将自动应用到刚刚使用 Elementor 放置的产品表格中。完成对表格的调整后，保存设置就可以了！

2.使用折叠式、选项卡或切换按钮组织多个产品表

如果想在一个表格中显示所有 WooCommerce 产品，上述方法比较好用。但是，如果想创建多个表格，每个表格包含一个单独的商品类别，该怎么实现呢？

在 Elementor 中，有多种方法可以做到。例如，使用 Accordion 部件来创建与前面案例中相同的效果。

首先，将 Accordion 部件拖到右侧编辑区：

可以使用“+”随意添加不同的标签页，并编辑每个标签页的标题和文本。还可以使用与之前相同的简码，在一个或多个标签页中添加产品表。

当然，只添加基本快捷代码会创建一系列相同的产品表。相反，需要修改每个简码，以便只显示某些产品，例如，特定类别中的项目。具体方法取决于想在每个表格中包含和/或排除哪些产品。

还可以使用其他一些方便的 Elementor 部件来实现类似的效果。其中包括切换部件（Toggle widget）和标签部件（Tabs widget）。有吸引力、有条理的方式显示多个 WooCommerce 产品表格，Elementor 可以达到这个效果。

总结

使用 WooCommerce 产品表插件与 Elementor 结合，可以让展示产品的方式对用户友好又美观。只需将产品表短代码添加到 Elementor 的小部件中，就可以动态展示想要的内容。