在这篇文章中，我们将向您展示如何结合 Elementor 和 WC Product Table 来创建一个更加定制化的 WordPress 网站，同时增加您的 WooCommerce 商店的销售额。
WordPress 简化了创建网站并使其快速启动和运行的过程。 WooCommerce 是一个 WordPress plugin ，可让您将任何 WordPress 网站变成一个功能齐全的在线商店。 您冒着创建模仿站点的风险，但是，如果您继续使用它们的默认选项和功能，这可能不适合您的业务需求。 找到用于设计和定制网站的最佳工具，直到它成为您想要的东西，这一点至关重要。
许多WordPress和WooCommerce plugin的上网连接，以提升店面的功能- Elementor，为前amp文件，是用于自定义WooCommerce产品页面的最直接的工具。 尽管这是其最重要的优点之一，但它也有一些明显的缺点。 对于前amp文件，当你把WordPress的plugin期从不同的作者，你遇到运行兼容性错误等并发症的机会; 为 WordPress 网站使用WooCommerce 产品表和 Elementor plugin时，情况并非如此。 使用这些plugin的任何一个时，您都可以更好地控制站点的外观和功能，并且可以将它们结合使用以获得更出色的结果。
- WooCommerce 产品表和 Elementor 框架的快速概览
- 要将 WooCommerce 产品表合并到文本编辑器或短代码小部件中，请按照下列步骤操作：
- 手风琴、选项卡和切换按钮可用于组织多个产品表。
WooCommerce 产品表和 Elementor 框架的快速概览
如前所述，有大量 WordPress plugin可供选择，以帮助您创建更好的 WordPress 网站，该网站根据您的特定要求进行个性化。 一些plugin旨在大规模使用，而其他插件旨在添加特定方面或功能。
Elementor是一个前amp的第一种类型的应用程序的文件：
我们的页面构建器plugin为您提供了一个全新的界面，用于构建网页和创建 WordPress 网站。 通过选择和自定义大量的小部件、块和布局库，您可以获得对网站组合方式的大量控制。
虽然 WooCommerce 产品表是一个更通用的解决方案，但它也更有针对性：
该plugin允许您创建动态的、完全可定制的表格，列出您的 WooCommerce 产品和服务。 然而，由于它们与 WooCommerce 的交互，这些表格特别适合以用户友好和视觉吸引力的方式为在线购物者展示商品和服务。 可以使用 Posts Table Pro plugin与 Elementor 同等交互，并在表格中列出任何 WordPress 内容类型，而不仅仅是 WooCommerce 产品（如果您希望显示产品以外的内容，例如帖子、页面或文档），则可以使用。
当相互结合使用时，Elementor 和WooCommerce 产品表提供了非常多样化的功能。 您可以利用它们产生一些非常重要的影响，这将有助于提高您的 WooCommerce 商店的销售额。
现在是开始做正事的时候了。 在下面的章节中，我们将看看一些真实世界前amp的，你可以如何利用WooCommerce产品表和Elementor创建一个类似于上面显示的效果LES。
当谈到结合这两个plugin ，天空是极限——而这些只是其中的一些可能性。 通过反复试验，您可以使用我们将演示的相同基本方法将各种页面组合在一起。
首先，您需要确保两个plugin都正确安装在您的站点上。 安装 Elementor 和配置 WooCommerce 产品表既轻松又简单，这是一件好事。 在继续执行此步骤之前，还必须安装并启用 WooCommerce 本身。 然后您就可以开始处理您的项目了。
要将 WooCommerce 产品表合并到文本编辑器或短代码小部件中，请按照下列步骤操作：
让我们从最基本和最有益的应用开始。 或者，如果您只是想在您的 Elementor 网站上使用动态产品表，您可以将其添加到一个小部件并让它出现在网站的前端。
当您打开任何页面或帖子以完成此操作时，请确保您正在使用 Elementor 编辑器。 如果您看到熟悉的 WordPress 界面，请单击“使用 Elementor 编辑”按钮切换到 Elementor 界面：
如果这是您第一次使用 Elementor，让我们在平台周围进行一些游览。 右侧将出现一个大区域，您的内容将在其中显示，并且会在您添加和更改内容时实时更新。 在屏幕左侧，有一个“小部件”列表，您可以将其拖入指定区域，然后根据需要重新组织和配置：
产品表可以与各种不同的 Elementor 小部件一起使用。 但是，如果您只想在页面上显示单个产品表，您可以通过在页面的 HTML 代码中包含一个介绍性文本部分来实现。 拿起文本编辑器小部件并将其移动到一个空的地方，如下所示：
之后，您可以在小部件内部单击以删除默认文本并将其替换为您想要的任何内容。 当涉及到产品表本身时，您可以通过粘贴以下简单的短代码来包含它：
【产品表】
当您将短代码插入页面时，表格将出现在您指定的位置，您可以通过在前端查看来验证：
如果您只想为代码本身使用一个元素，您可以使用 Shortcode 小部件。
无论您决定将它放在哪里，都不要忘记在完成桌子的定位后保存页面。 之后，您可能希望对表格的显示方式和功能进行一些更改。
返回您的 WordPress 仪表板并导航到 WooCommerce > 设置选项卡以完成此任务。 通过选择屏幕顶部的产品，然后选择产品表，可以找到产品表：
可以在此处找到用于配置 WooCommerce 产品表的完整选项列表。 您可以完全控制表中显示的信息，并且可以通过添加过滤器和变量等来自定义它。 查看plugin的文档以获取有关不同选择的更多信息。
您将能够使用 Elementor 修改刚刚创建的产品表，而无需执行任何其他操作。 根据您的规格自定义表格后，只需保存您的更改，就可以开始使用了！
手风琴、选项卡和切换按钮可用于组织多个产品表。
如果您想展示一个包含 WooCommerce 产品的表格，上述解决方案效果很好。 如果您要构建许多表，每个表都有不同类别的对象，这不是最佳选择。
在 Elementor 中有几种不同的方法可以实现这一点。 折叠菜单，为前amp文件，可用于生成，我们在过去的案例看到了同样的效果。 从右侧编辑区域开始，将手风琴小部件移至左侧编辑区域。
您可以通过单击加号创建任意数量的单独选项卡，并且您可以自定义每个选项卡中的标题和文本。 此外，您可以使用与前面提到的相同的短代码将产品表添加到一个或多个选项卡。
当然，简单地添加基本的简码会导致一系列类似的产品表，这很可能不是您最初想要的。 相反，你需要自定义每个简码，只显示指定产品-为前amp文件，从特定类别的项目-而不是所有产品。
您使用的方法将由您希望在每个相关表中包含和省略的产品决定。 有关其他信息，请参阅自定义 WooCommerce 产品表短代码的完整指南。
值得注意的是，您可以借助其他一些有用的 Elementor 小部件来实现类似的效果； 这包括 Toggle 小部件和 Tabs 小部件以及其他组件。 在以吸引人且组织良好的方式呈现多个WooCommerce 产品表方面，Elementor 是您的首选工具。
借助免费的在线 HTML、CSS 和 JavaScript 组织者，清理您草率的标记！
如果您希望您的企业在竞争中脱颖而出，请在电子商务网站的设计中进行一些认真的思考。 对于前amp嘞，你要确定展示您的产品的最有效的方式，理想的风格，是既方便用户和视觉上吸引人的眼球。
幸运的是，将 WooCommerce 产品表plugin与 Elementor 一起使用使这成为一项简单的任务。 您的产品表短代码可用于以真正动态的方式显示您的网站必须提供的所有内容（或只是选择）。
