如何使用 WooCommerce 和 Elementor 构建电子商务网站

如果您想创建一个专业的电子商务网站，Elementor 和 WooCommerce 是您可以使用的两个很棒的工具。 在本文中，我们将向您展示如何将两者结合起来创建一个强大的在线商店。 我们将引导您完成设置 WooCommerce 的步骤，然后我们将向您展示如何使用 Elementor 创建漂亮的页面。

在本文结束时，您将了解如何使用 WooCommerce、Elementor 和 WooLentor 构建电子商务网站。

另请阅读： WooCommerce 与 Magento：哪个是最好的电子商务平台

什么是 WooCommerce 以及它是如何工作的

WooCommerce 是一个基于 WordPress 的开源电子商务平台，可让您将 WordPress 网站转换为电子商务业务。 对于希望在没有太多麻烦或费用的情况下建立在线商店的小型企业和企业家来说，这是一个受欢迎的选择。 WooCommerce 可免费使用并提供广泛的功能，使其成为创建在线商店的多功能平台。

设置 WooCommerce 只需几分钟，一旦安装，您就可以立即开始销售产品。 WooCommerce 配备了您入门所需的一切，包括购物车、支付网关和库存管理。

您还可以添加其他功能和插件来扩展 WooCommerce 的功能。 总体而言，WooCommerce 是一个用户友好的平台，在设计和功能方面提供了很大的灵活性，使其成为建立在线商店的理想解决方案。

使用 WooCommerce 和 Elementor 建立您的在线商店的好处

如果您有兴趣建立在线商店，WooCommerce 和 Elementor 是两个值得考虑的绝佳平台。 WooCommerce 是一个流行的电子商务平台，为超过 30% 的在线商店提供支持。

Elementor 是一个强大的页面构建器，可以轻松创建自定义页面和设计。 超过 500 万人在他们的 WordPress 网站上积极使用 Elementor 是有充分理由的——它是一个拖放式页面构建器，无需专业帮助即可创建一个漂亮的网站。 只需点击几下，您的网站就可以上线了！

以下是使用 WooCommerce 和 Elementor 构建您的在线商店的一些好处：

• WooCommerce 是一个功能强大的电子商务平台，易于使用和扩展。
• Elementor 提供了用于创建自定义页面和设计的拖放界面。
• WooCommerce 和 Elementor 都对 SEO 友好，因此搜索引擎很容易找到您的商店。
• WooCommerce 和 Elementor 都具有响应性，因此您的商店在所有设备上都会看起来很棒。
• WooCommerce 提供了广泛的功能和插件来扩展您商店的功能。
• Elementor 提供了广泛的小部件和附加组件来扩展您的商店设计。

如果您想建立一个强大而灵活的在线商店，WooCommerce 和 Elementor 是两个值得考虑的绝佳平台。

使用 WooCommerce 和 Elementor 建立专业在线商店所需的东西

以下是我们将使用的东西来建立一个一流且专业的在线商店：

• 一个WordPress网站
• WooCommerce 插件
• Elementor 页面构建器
• WooLentor（免费增值 WooCommerce Elementor Page Builder 附加组件插件）

使用 WooCommerce 和 Elementor 建立在线商店：分步指南

WooCommerce 是最受欢迎的 WordPress 插件之一，难怪为什么。 WooCommerce 允许您将您的 WordPress 网站变成一个功能齐全的在线商店，具备销售产品和收款所需的所有功能。 最重要的是，WooCommerce 是免费使用的。

在本文中，我们将向您展示如何使用 WooCommerce 和 Elementor 建立在线商店，这两个强大的工具可以很好地协同工作。 我们将引导您完成该过程的每个步骤，从安装 WooCommerce 到设置您的付款方式和运输选项。

在本文结束时，您将拥有开始在线销售产品所需的一切。 让我们开始吧！

第 1 步：设置域和主机

在开始使用在线商店之前，您需要购买域名和托管计划。 您的域名是潜在客户用来查找您的网站的名称，因此选择易于记忆且准确代表您提供的产品或服务的域名至关重要。

选择域名后，请向托管服务提供商注册。 您通常可以通过同一个提供商进行此操作，如果您同时购买这两种服务，许多房东会提供折扣。

在所有步骤中，选择托管计划然后购买它是最重要的。 与 WooCommerce 合作的主机数不胜数，每个主机都有不同的优点和缺点。

根据您的预算，有很多选择供您选择。 这些服务的费用通常取决于您需要多少空间以及您希望信息传输的速度（带宽）以及您正在制作的网站类型。

在购买之前仔细考虑您的要求至关重要。 例如，如果您想运行一个受欢迎的网站，您将需要一项提供无限带宽和存储的服务。 然后，您需要在选择提供商后获得托管计划。

托管计划的价格可能会有所不同。 通过一些努力，您绝对可以为您的网站找到理想的托管计划。

第 2 步：安装 WordPress

现在是时候设置 WordPress 了，您已经拥有了您的网络托管帐户和域名。 该过程通常很简单，只需几分钟。 许多网络主机为 WordPress 提供一键式安装选项，使安装过程更加方便。 如果您的主机不提供此功能，请不要担心； 手动安装 WordPress 还是很简单的。

您通常可以按照 WordPress.org 的说明进行操作。 从网站获取他们的软件，在您的网络服务器上为其设置数据库，然后上传所有内容以运行安装脚本。 如果你做对了，你将拥有一个完整的 WordPress 网站！

第 3 步：选择一个 WordPress WooCommerce 主题

下一步是选择一个主题，然后转到 WordPress 中的外观 > 主题页面。 在这里，您会看到各种免费和购买的主题。 如果您选择免费选项，只需单击“激活”。 但是，如果您选择高级主题，请先购买，然后再将其上传到您的网站。 激活主题后，即可开始 WooCommerce 安装。

要使您的网站在所有设备上都具有吸引力，请选择一个既适合移动设备又优化搜索引擎的主题。 响应式主题将自动更改其布局以适应他们正在查看的屏幕大小——无论是手机还是电脑！

Flone – Minimal WooCommerce WordPress 主题是一个响应迅速且富有创意的网站设计。 Flone 考虑市场并预测未来趋势，以提供高质量的演示网站。 Flone WordPress 主题成功整合了质量和易用性的所有关键要素。

对于想要让自己的网站脱颖而出的企业家来说，Flone 是一个很好的主题。 它带有 7 种不同的页眉样式、25 个以上的部分和 4 个页脚选项，可让您随时了解最新趋势。

多币种允许来自世界各地的客户通过 PayPal 或信用卡轻松付款，而无需先转换货币，从而为他们节省佣金费用；

第 4 步：设置 WooCommerce 插件

安装并激活 WooCommerce 插件

转到 WordPress 管理仪表板并选择插件。

然后，在“添加新”部分中搜索“WooCommerce”。 之后，通过单击“立即安装”并选择“激活”来安装插件。

现在您将获得一个设置向导。 最好仔细检查所有内容并根据需要进行所有必要的修改。

我们将选择“继续”以开始设置向导。

把你的店铺的基本信息

首先，它需要有关您商店的基本信息，例如它的位置和您将提供的商品种类，以及您使用的货币。 它还询问您销售的商品类型：实物商品、数字产品、两者的组合、面对面交易或其他完全不同的商品。

您还可以确定是否希望 WooCommerce 跟踪您的使用情况以改进商店。 填写表格后，单击页面底部的“继续”按钮并继续进行下一个设置。

配置支付选项、网关和额外选项

完成此操作后，下一步是为您的商店选择支付网关。 WooCommerce 支持的一些选择是 PayPal、信用卡和 Stripe。 您的在线商店的付款方式取决于您所在的位置以及您要销售的产品类型。

如果您没有选择“亲自销售产品”选项，那么您将只有 Stripe 和 Paypal 作为选项。 如果您勾选了该复选框并且居住在加拿大、澳大利亚、美国、日本或英国，那么您将可以使用 Square、Paypal 和 Stripe，因为这些是这些支付网关运营的国家。

在支付页面上，从下拉菜单中选择“离线支付”。 然后，您可以选择通过支票、银行转帐或现金付款。 完成所有设置后，单击“继续”并继续下一步。

接下来，您将专注于运送您的产品详细信息。 WooCommerce 支持两 (2) 个运输区：1 区是美国和加拿大，2 区是世界其他地区。

如果您的商店位于 1 区（美国和加拿大），那么您可以选择获得实时运费。 但是，如果愿意，您也可以设置固定运费或免费送货。 您只需要确保重量和尺寸对于您决定的任何运费都是准确的。

一切就绪后，单击“继续”并通过选择“在家打印运输标签”打印出您的凭据。

此时，WooCommerce 安装向导会询问您是否要安装某些必要的插件，例如 Jetpack 的自动税收和用于电子邮件营销的 MailChimp。 可以选择您的电子商务网站所需的任何内容。 为此，只需选中每个旁边的框以将它们自动安装到您的站点上，或者稍后手动安装。

将 WooCommerce 与 Jetpack 链接并完成设置

如前所述，设置向导现在要求您将站点与 Jetpack 链接。 这个插件在确保最大的安全性方面非常出色，同时允许自动税收的所有功能。

单击“继续使用 Jetpack”，您将到达向导的最后一页。 您可以从此页面中获得多种选择。 只需检查并继续，无需多言。

第 5 步：将产品添加到您的 WooCommerce 商店

您现在可以开始将产品添加到您的在线商店。 您可能知道，有很多方法可以将新项目插入网站，我们将在下面的示例中展示其工作原理：

转到 WordPress 仪表板并添加新产品

要将产品添加到您的 WordPress 网站，请执行以下步骤：

1. 从您的仪表板转到产品，然后添加新的。

2. 您可以在此处插入有关您的产品的信息，包括其名称、类别、图像、标签库描述等。

3. 当您将每件产品一一添加到您的在线商店时，请务必包含所有相关信息

设置产品数据

位于主编辑器下方的面板是您设置产品数据的地方。 在自定义此信息时要密切注意，以确保在您的商店中获得完美的体验。

首先，从下拉菜单中选择产品的数据类型，例如简单产品、分组产品、外部/附属产品和可变产品。

根据您的业务利基、行业类型、产品类别和其他因素，将出现不同的配置选项。 相应地设置所有数据，并在完成保存后从“所有产品”中检查产品。

检查您的产品外观

您已完成所有必要的任务。 现在是时候看看您的在线商店和产品对客户的看法了。 这在很大程度上取决于您选择的主题。 这也取决于你选择了哪一个。

第 6 步：安装并激活 Elementor 以设计您的 WooCommerce 商店

对于那些希望在没有任何编码知识的情况下创建具有专业外观的网站的人来说，Elementor 是完美的解决方案。 使用这个简单但功能强大的工具，您可以添加文本和图像，同时还可以在页面上添加视频或按钮 - 只需单击一下即可！

借助 Elementor 的广泛功能、选项和小部件，它可以通过多种方式进行自定义！ 您可以轻松拖放元素来创建自定义页面和模板。 您还可以使用 Elementor 来自定义您的 WooCommerce 产品。

如何安装 Elementor

要安装 Elementor，请登录您的 WordPress 仪表板并转到插件部分。 然后，单击添加新按钮并搜索 Elementor。

找到插件后，单击立即安装按钮并激活插件。 之后，您就可以开始使用 Elementor 设计您的 WooCommerce 商店了！

或者，如果您更喜欢手动过程，请下载 Elementor 并使用“上传插件”选项上传文件。 完成后，请按照以下步骤开始设计您的商店页面：

在开始销售产品之前，您需要创建一个产品页面。 使用 Elementor，您可以完全自定义您的在线商店，以更好地匹配您的品牌并满足客户的需求。

使用 Elementor 构建产品页面

要开发产品页面以显示特定项目的功能，请按照下列步骤操作：

要使用 Elementor，首先转到 WordPress 仪表板上的页面。 然后，单击“添加新的”。 从右侧模板下拉列表中，选择 Elementor Canvas。 最后，单击“使用 Elementor 编辑”开始。

您有很多选择来构建页面，包括使用预先设计的模板或块或单独开发每个组件。 此外，您可以使用第三方插件来扩展模板库的功能。 要构建一个独特的组件，您可以使用多种有用的小部件。

我们使用 WooLentor Elementor Add-ons Plugin 来充分利用 Elementor 的强大功能。

完成您的设计

您现在已成功完成所有设置。 下一步是发布页面，但首先，您需要设置条件以在特定类别下显示页面。 这将有助于潜在客户更轻松地找到您的商店，也有助于提高您商店的搜索引擎排名。

您也可以用这种方式设计所有其他页面——没有任何限制。 您所要做的就是想出一个设计，然后使用不同的小部件创建它。

第 7 步：使用 WooLentor Elementor 附加组件插件实现广泛的 Elementor 功能

WooLentor 插件概述

WooLentor 插件提供了创建自己成功的在线商店所需的一切。 它有 19 个模块和 91 多个小部件可供选择，因此非常简单！ 此外，还有强大的页面构建器，让用户可以立即快速制作自定义页面或模板。

WooLentor 包含许多旨在帮助您提高销售额和转化率的功能。 一些关键功能包括：

• 许多预先构建的页面模板可用于 WooCommerce 商店
• 一个可视化的拖放页面构建器，可以轻松创建自定义 WooCommerce 页面
• 一组强大的 WooCommerce 模块，可用于为您的商店添加额外功能
• 广泛的 WooCommerce 小部件，可用于为您的商店添加额外功能
• 适合所有设备的出色响应式设计。
• 专门的客户支持团队。

WooLentor 提供了令人难以置信的可定制小部件选择，能够以多种不同方式定制您的网站。 您可以使用产品网格和客户评论系统以及 Ajax 搜索表单来增加您网站上的功能！

WooLentor 还提供了一系列模板来帮助您以简单有效的方式设计您的网站。 商店模板、我的帐户模板、结帐模板等 – WooLentor 为您提供了高级模板选项。

此外，这款多功能且功能强大的基于 Elementor 的 WooCommerce 页面构建器插件使您可以通过各种模块轻松个性化您的 WooCommerce 商店的外观，例如销售通知、限时抢购倒计时、产品比较、电子邮件定制器和 Shopify 样式结帐。

总之，WooLentor 是满足您所有 WooCommerce 需求的一站式商店。

现在下载

使用 WooLentor 自定义 WooCommerce 商店

在 WooLentor 的帮助下，您可以通过自定义使您的网站更加有趣和有吸引力。 它具有广泛的功能，例如在几秒钟内添加块或页面，具有简单的界面，即使是初学者也能轻松理解！

安装和激活 WooLentor

要开始使用 WooLentor，只需从您的 WordPress 存储库安装并激活插件。

如果您想要更多高级功能，请选择 WooLentor Pro 版本，该版本根据预算提供不同的软件包。 您可以从他们的网站获取专业版。

转到 WooLentor 菜单

现在前往 WooLentor 的菜单。 此时，您将被带到一个页面，其中列出了 WooLentor 的所有不同功能。

导航到模板生成器并转到添加新

从 WordPress 仪表板中的 WooLentor 菜单导航到模板构建器

并立即添加一个新的！

配置页面模板设置以构建您想要的页面

下一步是配置您想要的页面模板，以便它可以构建优化版本。

单击“添加新”以创建所需的页面模板。 执行此操作后，将出现一个页面模板设置的弹出窗口，您可以在其中选择给它任何名称并选择模板类型。

如果要将模板用作默认页面，请选中“设置默认值”框，然后保存更改。

使用 Elementor 自定义页面模板

保存参数后，您可以使用 Elementor 小部件根据您的喜好更改和自定义模板。 有几个可用的各种页面的预制模板。

如果您想使用它们，请在弹出窗口中转到“示例设计”，然后会出现该页面的预制模板。 您可以立即选择其中任何一个，甚至可以自定义它们以满足您的需求。

测试页面

最后，您应该测试页面以确保它正常工作并且一切看起来都很好。

WooCommerce 商店的其他重要插件

WooCommerce 商店的一些最重要的插件在这里。 这些添加了产品评论、批发定价等功能，让您更好地控制您的在线业务！

联系表格 7：

如果您希望在您的网站上拥有一种客户可以用来轻松与您联系的方法，那么您的 WooCommerce 商店需要使用 Contact Form 7 插件。 使用此插件，您可以创建适合您需求的表单，以收集客户反馈或任何其他所需信息。 其简单易用的界面让任何人都可以轻松创建自定义表单。

CF7 的扩展：

如果您的 WordPress 站点使用 Contact Form 7 插件，那么 Contact Form 7 Extensions 插件是必不可少的。 这个功能强大的插件向 Contact Form 7 添加了自定义字段、文件上传等。它还包括使管理联系人表单变得更容易的功能，例如导出/导入表单和创建自定义模板。

整体

Whols 是一个优秀的 WooCommerce 插件，用于设置批发价格。 如果您想建立具有批发功能的在线商店，这将非常有用。 您可以为各种项目和产品类别设置不同的费率，以及最低订购数量。 Wholes 是一种通过为批发客户提供折扣来增加销售额的绝妙方法。

WP插件管理器

“WP 插件管理器”是一个 WordPress 插件，可让您禁用特定页面或帖子的插件。 您可能不需要加载网站上的所有插件。 WP Plugin Manager 插件允许您逐页停用单个 WordPress 插件，以提高站点性能并减少加载时间。

文字围栏

Wordfence 使用从头开始创建的端点防火墙和恶意软件扫描程序来保护 WordPress。 Wordfence 的威胁防御源提供了确保您的网站安全所必需的最新防火墙规则、恶意软件签名和有害 IP 地址。 Wordfence 包含 2FA 和一系列附加功能。

排名数学

借助 Rank Math，您可以使用基于广泛接受的最佳实践的内置建议轻松优化搜索引擎的内容。 您可以轻松自定义重要的 SEO 设置，控制哪些页面可索引，并使用此插件确定您希望您的网站如何出现在搜索结果中。

W3 总缓存

W3 Total Cache 通过使您的网站更快并减少加载时间来增强您网站的 SEO、Core Web Vitals 和整体用户体验。 这是通过使用内容交付网络 (CDN) 集成等功能并遵循最新的最佳实践来完成的。

经常问的问题

Q1。 什么是 WooCommerce？

WooCommerce 是一个插件，可将您的 WordPress 网站变成在线商店。 它允许您在线销售产品和服务，并包括库存管理、订单处理和支付等功能。

Q2。 什么是元素？

Elementor 是一个拖放式页面构建器插件，可以轻松为您的 WooCommerce 商店创建自定义页面和帖子。 使用 Elementor，您可以在页面上添加、删除和重新排列元素，而无需编写任何代码。

Q3。 如何设置 WooCommerce？

要设置 WooCommerce，您首先需要在您的 WordPress 网站上安装 WooCommerce 插件。 安装插件后，您可以激活它并开始设置您的商店。

Q4。 使用 Elementor 创建网站的流程是什么？

开始使用 Elementor 很简单。 它可以以与任何其他 WordPress 插件相同的方式安装。 安装后，您可以激活它并开始为您的 WooCommerce 商店创建自定义页面和帖子。

Q5。 如何将 WooCommerce 与 Elementor 集成？

要将 WooCommerce 与 Elementor 集成，您需要安装并激活 WooCommerce Elementor 插件。 激活后，您可以开始使用 Elementor 创建自定义 WooCommerce 页面和帖子。

Q6。 使用 WooCommerce 是否需要付费？

不，WooCommerce 是一个免费插件。 但是，您需要支付托管、域名以及与设置在线商店相关的其他必要费用。

问题 7。 Elementor 的价格是多少？

不，Elementor 是一个免费插件。 但是，您可以选择从他们的网站购买高级模板或附加组件。

Q8。 哪个更好：WooCommerce 或 Elementor？

WooCommerce 和 Elementor 都是很棒的插件，具有自己独特的功能和优势。 这一切都取决于您的要求。

Q9.WooLentor 是什么？

Woolentor 是一个 WordPress 插件，可让您使用 Elementor 的拖放构建器创建自定义 WooCommerce 产品。

Q10.WooLentor 是如何工作的？

安装并激活后，您就可以将新的“WooCommerce 产品”模板添加到您的 Elementor 库中。 这将使您能够访问所有 WooCommerce 产品字段，以及 Woolentor 独有的一些自定义字段。

Q11.我需要知道如何编码才能使用 WooLentor 吗？

不！ Woolentor 是一个拖放式构建器，因此您不需要任何编码知识即可使用它。

Q12.WooLentor 是免费的吗？

是的，Woolentor 是一个免费的 WordPress 插件。 但是，如果您想要额外的高级和高级功能，您可以购买不同定价包的 Pro 版本。

最后的想法

WooCommerce 是一个流行的可定制的开源电子商务平台，基于 WordPress，可让您将 WordPress 网站变成电子商务商店。 WooCommerce 为您提供运行在线商店所需的所有功能，例如产品管理、订单跟踪、付款处理、运输和税收计算。

Elementor 是一个可视化页面构建器，无需任何编码知识即可轻松创建漂亮的页面和帖子。 Elementor 可让您使用拖放界面创建令人惊叹的页面和帖子。

WooCommerce 和 Elementor 一起使无需任何技术专长即可轻松构建具有专业外观的在线商店。 使用 WooCommerce 和 Elementor，您可以建立一个看起来很棒且易于使用的在线商店。 WooCommerce 和 Elementor 都是免费的，因此您无需花钱就可以开始使用！