如何创建由 Elementor 提供支持的 WooCommerce 网站

已发表: 2021-10-28

WordPress 平台本身是世界上最流行的内容管理系统 (CMS) 是不够的。 我们还拥有 Elementor 和 WooCommerce 中最受欢迎的页面构建器和电子商务平台。 因此，使用这三者来创建一个外观漂亮且性能卓越的在线商店是有意义的。

如果我们将其分解，WordPress 是组织您的帖子、页面和产品的理想选择。 由于其开发人员（Automattic），WooCommerce 提供与平台的紧密集成。 更重要的是，Elementor 带来了强大而直观的拖放式页面构建。 这是用于构建商店的完整无代码解决方案。

在这篇文章中，我们将了解如何使用 Elementor 和 WooCommerce 建立商店。 在整个过程中，我们将研究两者如何相互配合，为您的网站提供最大的灵活性。

为什么 WordPress、Elementor 和 WooCommerce 可以很好地协同工作

值得仔细研究一下 WordPress、Elementor 和 WooCommerce 如何结合起来帮助您创建顶级在线商店。

WordPress.org 主页。

首先，WordPress 是市场上最常用的 CMS。 当然，这还不足以保证在用户中占据如此主导地位。 事实上，我们已经在之前的帖子中对此进行了研究，因此我们鼓励您进一步阅读该帖子。 简而言之，它是一个安全、稳定且可扩展的平台，您可以在其上构建。

说到这一点，您还有 WooCommerce。 因为 Automattic 开发了插件，所以它与核心 WordPress 有很好的集成，但这还不是全部。

WooCommerce 店面。

它也是最受欢迎的电子商务平台。 在 WordPress 生态系统中，它拥有大约 20% 的份额，相当于所有网站的 8% 左右。 相比之下，Shopify 的市场份额约为 5% 或 6%。 同样，使用数据并不是一切。

WooCommerce 采用创建在线商店的流程并简化流程。 您可以在几分钟内启动并运行，并拥有一个强大、强大且可扩展的电子商务平台。

要将这些编织在一起，您有 Elementor。 它在其领域内也有很大的市场份额，以及庞大的用户群。

Elementor 主页。

它是一个拖放式页面构建器，采用独特的方法帮助您从头开始构建整个网站。 这是一个诱人的解决方案，因为有许多其他工具没有的强大特性和功能。 这里最相关的是专用的 WooCommerce Builder。

简而言之，Elementor 是一个在 WPKube 博客上有很多列英寸的插件，你应该浏览我们的档案，看看它到底能做什么。

WooCommerce 网站需要页面构建器提供什么

上一节的隐含结论是，Elementor 可以提供 WooCommerce 所需的特性和功能的正确组合，使您的网站更上一层楼。 不过，重要的是要弄清楚为什么会这样以及它提供了什么。

一般来说，WooCommerce 网站需要页面构建器提供以下内容：

  • 紧密集成，因此页面构建器和 WooCommerce 之间没有冲突。
  • 大量自定义选项可帮助您的产品和商店页面脱颖而出。
  • 一种编辑构成典型产品页面的各个元素的方法。
  • 帮助“升级”您的商店的额外功能。

您（当然）也应该注意您的个人需求。 例如，您可能会发现表单和弹出窗口对您的商店和销售策略很重要。 好消息是 Elementor 能够满足您的需求。

例如，它有一个很棒的弹出窗口生成器，可以用于销售、限时优惠、优惠券等等：

Elementor 弹出窗口生成器。

您可以像创建其他页面模板一样创建它们，并且可以快速应用它们。 更重要的是，您几乎可以以任何您选择的方式自定义它们。 如果您有要在您的网站上推广的特定广告系列，那就太完美了。

如何选择合适的 WooCommerce 主题

我们不会在这里详细介绍，因为我们会在教程中介绍这一点，并且还会在专门的文章中总结一些主题。

在这种情况下，您需要的主要考虑因素是与 Elementor 和 WooCommerce 兼容的主题。 即使快速浏览一下高级市场网站，您也会发现很多主题都在宣传这一点，因此您的选择范围很广。

即便如此，我们还是可以提及一些突出的主题：

  • 店面。 由于块编辑器是本机技术，因此它与 Elementor 的兼容性可能会最低。 仍然，
  • 你好。 这是 Elementor 空白启动主题，非常适合从头开始开发 WooCommerce 网站。 当然，如果您的可用时间较少，选择另一个功能更全的主题可能是明智之举。
  • 生成新闻。 这是具有灵活基础架构的顶级主题。 这意味着无论您使用块编辑器、Elementor 还是其他工具，您的商店都会看起来很棒。

我们鼓励您在开始创建网站之前找到正确的主题。 请记住，最好的结果将是与 Elementor和WooCommerce 兼容的东西。

如何通过 3 个步骤创建由 Elementor 提供支持的 WooCommerce 网站

在本文的其余部分，我们将向您展示如何一起使用 Elementor 和 WooCommerce 来创建电子商务网站。 需要注意三个步骤：

  • 安装并设置 WooCommerce。
  • 创建您的 WooCommerce 产品线，并使用 Elementor 构建产品页面。
  • 再次使用 Elementor 设计一个专门的商店页面。

不过，对于本教程，我们将假设您已经安装并激活了 Elementor Pro。 这是我们在创建 WordPress 漏斗的文章中向您介绍的内容。 当您遇到麻烦时，该帖子将帮助您。

1. 安装 WooCommerce 并进行设置

设置 WooCommerce 安装时需要考虑两个方面：插件本身和商店的设置。 事实上，安装插件的过程与任何其他 WordPress 插件相同。

至于设置 WooCommerce 本身，虽然您可以在几分钟内准备好，但花更多时间通过设置向导是值得的。

WooCommerce 设置向导。

当谈到设置的这一点时，我们已经为您服务了。 事实上，我们有一个完整的 WooCommerce 教程帖子，其中详细介绍了如何开始使用 WooCommerce 并创建您的第一个产品。 当你浏览这个时，在备用标签中打开它是一个很好的帖子。 那里的信息对于下一组步骤很有价值。

2. 创建您的 WooCommerce 产品

一旦你安装了 WooCommerce 并摇摆不定，你应该考虑在后端创建产品。 同样，我们的 WooCommerce 教程详细介绍了如何执行此操作，但这里是 Cliff 的注释：

  • 前往 WordPress 中的产品 > 添加新选项卡。
  • 填写您的产品名称和简短描述。
  • 使用 WooCommerce 元框来填充您的产品数据，例如价格。
  • 添加图像。
  • 发布您的产品。

不过，这里是 Elementor 展示其第一个强大举措的地方——WooCommerce Builder。 这是一种使用页面构建器来创建产品页面设计的方法。

首先，在 WordPress 中单击模板 > 添加新的：

WordPress 中的添加新链接。

在此处，从Template Type下拉列表中选择Single Product ，然后输入可选名称：

在 Elementor 中创建新模板。

这将打开模板库以显示其中的每个预构建块：

Elementor 模板库。

看到喜欢的设计后，单击“插入”按钮，Elementor 将导入块：

将块导入页面。

这是启动专用产品页面的快速方法。 您可以利用这个良好的开端并添加更多内容。 Elementor 包含许多专用小部件，可帮助您构建 WooCommerce 特定页面：

Elementor WooCommerce 小部件。

一旦你有了你喜欢的页面布局，点击屏幕底部的绿色发布按钮：

发布按钮。

这将弹出一个弹出窗口，帮助您设置显示模板的特定条件：

在 Elementor 中设置包含条件。

准备就绪后，单击保存并关闭。 从这里，您可以将更多产品添加到您的商店、使用更多模板或开始使用专门的商店页面。

3. 使用 Elementor 和 WooCommerce 设计您的专用商店页面

WooCommerce 的一个方便的用户体验 (UX) 是它如何生成您商店所需的大部分必要页面。 顶级商店页面是最重要的，因为这是装饰门的前遮阳篷。

如果您将 WordPress 和 WooCommerce 与特定于 WooCommerce 的主题（例如 Storefront）一起使用，则自定义商店页面的主要停靠点是通过定制器。 不过，我们的重点是 Elementor。 使用页面构建器的方法是使用产品存档页面。

这使您可以自定义产品在您网站上的显示方式，但不处理页面的其余部分。 在某些情况下，管理两组自定义和设置可能很困难，但根据我们的经验，到目前为止这还不是问题。

与单个产品一样，您需要前往 WordPress 中的模板 > 添加新产品，然后从下拉列表中选择产品存档：

选择产品存档模板。

同样，您可以选择一个块，从头开始编辑页面，或将两者结合起来创建独特的东西。 同样和以前一样，您可以使用任何特定于 WooCommerce 的小部件来帮助您根据自己的喜好设计页面。

再次单击“发布”按钮并进入“发布设置”对话框后，您就可以调用魔法了。 在其基本形式中，您可以在Shop Page中包含新模板：

设置包括商店页面的条件。

不过，这还不是全部。 您可以添加更多包含条件，以便在您网站的许多地方使用该模板。 这对于连续性非常有用，并让访客有理由访问您的商店。

关于 WooCommerce 其他生成页面的快速说明

在结束之前，我们想提一下其他生成的 WooCommerce 页面。 坏消息是他们不在Elementor的视线范围内。 换句话说，如果没有额外的 WooCommerce 扩展，您将无法编辑结帐或感谢页面等页面。

这令人失望，但可以理解。 即便如此，您仍然可以使用 Elementor 来开发周围的元素，然后使用简码将特定的页面功能放入其中。 虽然，这并不理想。

如果完整编辑这些页面对您很重要，您需要查看结帐字段编辑器（每年 49 美元）和自定义感谢页面扩展（也是每年 49 美元）。

综上所述

使用三种最流行的工具发布电子商务商店时会出现什么问题？ 在这种情况下，没有太多。 WordPress、Elementor 和 WooCommerce 都提供一流的体验。 将它们结合起来可以让您最终创建和运行在线商店。

在这篇文章中，我们研究了如何一起使用 Elementor 和 WooCommerce 来建立商店。 安装并激活这两个插件后，您的首要任务是创建产品及其相关页面。 从那里，您需要一个专门的商店页面——这是 Elementor 能够处理的。 更重要的是，页面构建器插件的额外功能（例如弹出构建器等）可以帮助您的商店进入平流层。

你想为你的下一家商店创建一个 Elementor 和 WooCommerce 组合吗？如果是这样，这篇文章会对你有帮助吗？ 在下面的评论部分让我们知道！