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