如何创建 Elementor 驱动的 WooCommerce 网站

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

如果我们将其分解,WordPress 非常适合组织您的帖子、页面和产品.WooCommerce 由于其开发人员(Automattic)而提供与平台的紧密集成.更重要的是,Elementor 带来了强大而直观的拖放页面构建.这是用于构建商店的完整无代码解决方案.

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

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

值得仔细研究 WordPress、Elementor 和 WooCommerce 可以结合起来帮助您创建顶级在线商店.

对于初学者来说,WordPress 是 市场上最常用的 CMS.当然,这还不足以保证在用户中占据如此主导地位.事实上,我们已经在在上一篇博文 中查看了此内容,因此我们鼓励您阅读该内容进一步发布.简而言之,它是一个安全、稳定且可扩展的平台,您可以在其上构建.

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

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

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

要将这些组合在一起,您需要使用 Elementor.它还有一个大市场在其领域内分享,以及庞大的用户群.

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

简而言之,Elementor 是 WPKube 博客上有很多列英寸的插件,您应该浏览我们的归档,看看它能做什么.

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

最后一部分的隐含结论是 Elementor 可以提供 WooCommerce 所需的特性和功能的正确组合,使您的网站更上一层楼.不过,重要的是要深入了解为什么会这样以及它提供了什么.

一般来说,WooCommerce 网站需要来自页面构建器的以下内容:

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

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

例如,它有一个很棒的Popup Builder 可用于销售、限时优惠、优惠券等:

您可以像创建其他页面模板一样创建它们,并且可以快速应用它们.更重要的是,您几乎可以选择任何方式自定义它们.如果您有特定的广告系列要在您的网站上进行宣传,那就再好不过了.

如何选择合适的 WooCommerce 主题

我们不会在这里详细介绍,因为我们在教程中介绍了这一点,并且还在 专用文章.

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

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

  • 店面它可能与 Elementor 未来的兼容性最低,因为块编辑器是本机技术.尽管如此,
  • 您好 这是 Elementor 空白入门主题,非常适合从头开始开发 WooCommerce 网站.当然,如果您的可用时间较少,最好选择另一个功能更全面的主题.
  • GeneratePress. 这是一个具有灵活基础架构的顶级主题.这意味着无论您使用 Block Editor、Elementor 还是其他工具,您的商店都会看起来很棒.

我们鼓励您在开始创建网站之前先找到正确的主题.请记住,最好的结果是与 Elementor WooCommerce 兼容.

如何通过 3 个步骤创建由 Elementor 驱动的 WooCommerce 网站

在本文的其余部分,我们将向您展示如何结合使用 Elementor 和 WooCommerce 来创建电子商务网站.需要注意三个步骤:

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

1.安装 WooCommerce 并进行设置

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

至于设置 WooCommerce 本身,虽然您可以在几分钟内准备好,但花更多时间浏览 设置向导.

说到设置的这一点,我们已经为您解决了.事实上,我们有一个完整的 WooCommerce 教程 帖子,其中详细介绍了如何开始使用 WooCommerce 并创建您的第一个产品.当你浏览这个时,在备用标签中打开是一个很好的帖子.其中的信息对接下来的步骤很有价值.

2.创建您的 WooCommerce 产品

一旦您安装并启动了 WooCommerce,您就应该考虑在后端创建产品.同样,我们的 WooCommerce 教程详细介绍了如何执行此操作,但这里是 Cliff 的注释:

  • 前往产品>在 WordPress 中添加新的标签.
  • 填写您的产品名称和简短描述.
  • 使用 WooCommerce 元框填充您的产品数据,例如价格.
  • 添加图片.
  • 发布您的产品.

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

要开始,请单击模板>在 WordPress 中添加新:

从这里,从模板类型下拉菜单中选择单一产品,然后输入一个可选名称:

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

看到喜欢​​的设计后,单击插入按钮,Elementor 将导入块:

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

获得喜欢的页面布局后,点击屏幕底部的绿色发布按钮:

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

准备好后,点击保存&关闭.从这里,您可以向您的商店添加更多产品、处理更多模板或开始处理专门的商店页面.

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

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

如果您将 WordPress 和 WooCommerce 与 WooCommerce 特定主题(例如店面)一起使用,则您自定义商店页面的主要端口是通过定制器.不过,我们的重点是 Elementor.使用页面构建器完成此操作的方法是使用 Products Archive 页面.

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

与单个产品一样,您需要前往模板 >在 WordPress 中添加新,然后从下拉列表中选择 Products Archive:

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

一旦您再次单击发布按钮并进入"发布设置"对话框,您就可以调用魔法了.在其基本形式中,您可以在商店页面中包含新模板:

不过,这还不是全部.您可以添加更多包含条件,以便在您网站的多个位置使用该模板.这非常有利于连续性,并让访客有理由光顾您的商店.

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

在结束之前,我们想提一下其他生成的 WooCommerce 页面.坏消息是他们不会被 Elementor 盯上.换句话说,如果没有附加的 WooCommerce 扩展程序,您将无法编辑诸如结帐或感谢页面之类的页面.

这令人失望,但可以理解.即便如此,您仍然可以使用 Elementor 开发周围的元素,然后使用短代码删除特定的页面功能.不过,这并不理想.

如果完整编辑这些页面对您很重要,您需要查看 结帐字段编辑器(每年 49 美元)和 自定义感谢页面扩展(每年 49 美元).

总结

使用三种最流行的工具发布电子商务商店时会出现什么问题?在这种情况下,没有多少.WordPress、Elementor 和 WooCommerce 都提供一流的体验.将它们结合起来可以让您在创建和运营在线商店方面发挥极致.

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

您想为您的下一家商店创建一个 Elementor 和 WooCommerce 组合吗?如果是,这篇文章对您有帮助吗?在下面的评论部分告诉我们!

3

发表回复