Elementor 和 woocommerce 使创建在线商店变得容易。在本教程中，我将向您展示如何使用 WooComerce、wordpress 和 Elementor 构建一个包含产品、类别和亚马逊风格下拉菜单的在线商店。
为什么选择 WooCommerce？
WordPress 是世界上最受欢迎的博客平台之一，但无数企业也使用 WordPress 来销售他们的产品和服务。
在WooCommerce电子商务插件的帮助下，您可以使用 WordPress 销售数字和实物商品，并通过流行的支付网关（包括 PayPal 和 Stripe）收款。
今天，前 100 万个网站中有 29%使用 WooCommerce，All Blacks、LA Weekly 和 AeroPress 等知名网站都依赖于这个流行的 WordPress 电子商务插件。
虽然 WordPress 和 WooCommerce 提供了启动成功电子商务商店所需的一切，但您可能希望更好地控制商店的外观。
在这个由两部分组成的系列中，我将向您展示如何使用 WordPress、WooCommerce 和 Elementor 构建一个专业设计的在线商店。
在这篇文章中，我们将设置 Elementor 和 WooCommerce，并创建一个包含产品、类别和亚马逊风格下拉菜单的在线商店。然后，在下一篇文章中，我们将使用您从 Envato Elements选择的 Elementor 模板套件重新设计 WooCommerce 的产品档案和产品页面。
在本教程结束时，您将准备好使用专业设计的电子商务商店。
我们将建造什么
Elementor 是一种灵活的工具，可为您提供多种设计电子商务商店的方法。您可以使用 Elementor Pro 的内置模板之一，上传其他第三方模板，甚至从头开始构建您自己的电子商务模板。在本系列中，我们将介绍所有三个选项！
在本教程结束时，您将 使用 Elementor Pro 的内置模板创建自定义产品页面和产品存档。
产品页面和产品档案是 WooCommerce 自动生成的两个页面，但库存设计应适应您商店的品牌和功能。我将向您展示如何使用 Elementor Pro 的内置模板快速轻松地自定义这些默认页面。
在后续文章中，我们将使用主题模板集合来创建独特的产品页面、产品档案和主题标题，这些标题会出现在您的整个电子商务商店中。
如果您有特定的愿景，那么我还将向您展示如何通过创建自己的 Elementor 模板来实现该愿景。
Elementor：用零代码建立电子商务商店
第一步是将 Elementor 添加到您的 WordPress 网站。
核心 Elementor 插件可免费下载，并提供对 40 多个小部件和 30 多个模板的访问。但是，由于我们正在与 WooCommerce 合作，您需要投资购买 Elementor Pro 订阅。
与 Elementor 的免费版本不同，Elementor Pro 提供了专用的 WooCommerce Builder，以及一些重要的电子商务主题小部件，例如Add to Cart、Product Rating和Related Products。
如果您想坚持使用免费的 Elementor 插件，那么本教程将帮助您掌握 Elementor 用户界面和构建设计精美的页面、网站、博客和在线商店所需的核心工作流程。但是，您需要订阅 Elementor Pro才能完成本教程的所有部分 。
如何将 Elementor 添加到您的 WordPress 网站
Elementor Pro需要Elementor的免费版本。如果您尚未安装此免费插件，则需要将其添加到您的网站：
如果您尚未登录，请登录您的 WordPress 帐户。
在 WordPress 的左侧菜单中，选择Plugins > Add New。
搜索Elementor 插件。
当插件出现时，选择立即安装 > 激活。
我们现在可以升级到 Elementor Pro：
前往 Elementor 网站并购买 Elementor Pro（如果您尚未购买）。您应该会收到购买确认电子邮件。
在Elementor 网站上，使用确认电子邮件中包含的详细信息登录您的帐户。
选择Download plugin，Elementor Pro 将被下载为 ZIP 文件。
登录到您的 WordPress 网站。
在左侧菜单中，选择Plugins > Upload Plugin。
单击选择文件 ，然后选择刚刚下载的 ZIP 文件。
选择立即安装 > 活动。
出现提示时，单击连接并激活 并按照屏幕上的说明激活您的 Elementor Pro 许可证。
Elementor Pro 现在可供您使用！
WooCommerce：如何安装 WordPress 的免费电子商务插件
接下来，我将向您展示如何使用 Elementor 和 WooCommerce 设计、构建和启动在线电子商务商店。
如果您尚未将免费的 WooCommerce 插件添加到您的网站，那么现在是您的机会：
登录到您的 WordPress 网站。
导航到插件 > 添加新的。
搜索WooCommerce。当此插件出现时，选择立即安装 > 激活。
您现在应该看到Welcome to WooCommerce 屏幕；单击是请 开始设置过程。
在随后的屏幕上，输入您的邮寄地址，然后单击继续。
WooCommerce 现在将询问有关您的行业和产品的一些问题，以及您是否已经拥有在线商店或实体商店。
回答完 WooCommerce 的所有问题后，您可以为您的在线商店选择一个主题。我们将使用 Elementor 自定义我们的商店，因此只需选择任何免费主题并单击Continue。
现在将提示您激活 Jetpack 和 WooCommerce 服务插件。该插件将帮助保护您的网站免受暴力攻击，还可以提高性能，因此建议您激活 Jetpack，除非您有特定的理由不这样做。
恭喜，您刚刚成功安装了 WooCommerce！
WooCommerce 有很多设置，包括一些对于运行成功的在线商店至关重要的设置，例如指定您是否接受 PayPal、Stripe 或 Direct *** Transfer。
配置您的 WooCommerce 商店超出了本教程的范围，但您可以通过从 WordPress 的左侧菜单中选择WooCommerce > 设置来探索 WooCommerce 的所有设置。
库存这些货架：创建您的第一个 WooCommerce 产品
在本教程中，我们将创建各种布局，因此在构建它们时测试这些布局非常重要。
如果您已经拥有 WooCommerce 产品目录，那么您可以使用这些产品来准确查看商店在库存充足后的外观。但是，如果您正在建立您的第一家商店，那么我建议您花几分钟时间来创建一些您可以在布局中使用的产品。
要创建产品， 请从 WordPress 的左侧菜单 中选择Products > Add New 。
您现在可以打开产品数据 下拉列表并指定要创建的产品类型：
简单的产品。这是任何已发货且没有选项的产品。
分组产品。这是所有属于简单产品类别的相关产品的集合。
外部/附属产品。这是一种在其他地方销售的产品，但在您的网站上有特色。
可变产品。这是一种具有变化的产品，例如有不同尺寸和颜色的夹克。
出于本教程的目的，我将创建一个简单的产品：
给你的产品起一个名字并写一个简短的描述。
您现在可以将此产品分配给产品类别。例如，如果您正在创建一家服装店，那么您的类别可能包括Hoodies & Sweatshirts、 Occasionwear 和Shoes & Boots。假设您要创建一个新类别，请滚动到Product categories 部分并选择Add new category。
为您的类别命名，然后单击添加新类别。
在产品类别 部分中，选择您刚刚创建的类别。
已经知道您想在您的网站上展示的所有类别？您可以通过重复上述步骤提前实现所有这些类别。您可能还希望将您的类别分为父类别和子类别。例如，我正在创建一个Kitchen 父类别并将其分配给以下子类别：Bar凳、Dining chairs和Kitchen 凳子。
在Product tags中，输入您要使用的所有标签，然后单击Add。
接下来，通过滚动到Product Image 然后选择Set product image添加特色图片。
选择最能代表您的产品的图像。
您是否有多个图像要用于此特定产品？您可以通过滚动到产品库 部分、选择添加产品库图像并选择要使用的图像来创建产品库。
在“产品数据 ”部分中，确保选中“常规” 。
在常规价格中，输入该产品的价格。
接下来，选择库存 选项卡。
在SKU中，输入该产品的库存单位，这是您将用于在库存中跟踪该产品的编号。
选中在产品级别启用库存管理 复选框。
在库存数量中，输入您当前的库存数量。
当您的库存不足时，WooCommerce 可以向您发送电子邮件。如果您想接收这些低库存通知，请在Low stock threshold中输入所需的值。现在，只要您的库存达到此阈值，您就会收到一封电子邮件。
在左侧菜单中，选择Shipping。
在重量中，输入该产品的重量。
在尺寸中，输入产品的长度、宽度和高度。
如果您对输入的信息感到满意，请点击Publish。
要查看您刚刚创建的产品，请选择查看产品。
冲洗并重复以创建多个产品。要真正测试您的布局，您应该尝试创建跨越多个类别的各种产品。
使用产品类别组织您的商店
创建所有产品后，值得花几分钟时间查看您的产品类别。
通过盘点您创建的所有类别，您可以确定需要分组到父类别中的任何类别，或者您可能会意识到您忘记创建一些重要类别。
要查看您的类别，请 从 WordPress 的左侧菜单中选择产品 > 类别。
我已经创建了一个厨房 父类别，其中包含我的酒吧凳子、餐椅 和厨房凳子 子类别，但现在我将创建一些额外的父类别：办公室、卧室、客厅和花园。
要创建父类别：
在Add New Category中，输入您要创建的父类别的名称。
确保父类别 设置为None。
单击添加新类别。
找到要分配给此父类别的第一个子类别，然后选择子类别随附的“编辑 ”链接。
打开父类别 下拉菜单并选择您刚刚创建的父类别。
单击更新日期。
冲洗并重复您要分配的每个子类别和要创建的每个父类别。
创建亚马逊风格的产品菜单
接下来，我将让客户能够根据产品类别过滤产品。在本节中，我们将构建一个下拉菜单，在其中选择父类别会显示与该父类别关联的所有子类别。
这种父/子产品菜单是许多电子商务网站的主要内容，包括亚马逊和 eBay 等重量级网站。通过将此类产品菜单添加到您的电子商务网站，您可以为访问者提供一种熟悉的方式来探索您的商店所提供的一切。
默认情况下，无法将产品类别添加到 WordPress 菜单。在构建我们的菜单之前，我们需要编辑这些默认设置：
在 WordPress 的左侧菜单中，选择外观 > 菜单。
在屏幕顶部，找到“屏幕选项 ”部分，然后单击以展开。
找到产品类别，然后选择它。
您现在可以将产品类别添加到您的菜单中，让我们创建我们的菜单：
为您的菜单命名，然后单击创建新菜单。
单击以展开产品类别 部分。
选择您要添加到菜单中的所有产品类别。
单击添加到菜单。所有选定的父类和子类现在都将添加到菜单结构 部分。
由于我们正在创建一个下拉菜单，因此您需要抓取每个子类别并将其放在其关联的父类别下方。
接下来，抓住每个子类别并将其稍微向右拖动，使其缩进显示在其父类别之下。释放子类别，它现在应该是永久缩进的。
对每个子类别重复此缩进过程。
如果您想更改某个项目在菜单中的显示位置，请在菜单结构 中抓取它并将其拖放到新位置。
如果您对菜单的设置方式感到满意，请点击保存菜单。
要将此菜单放在您的网站上，请单击“管理位置” 选项卡。
假设您希望此菜单出现在您的整个网站上，请打开顶部菜单 下拉菜单并选择您刚刚创建的菜单。
单击保存更改。
此父/子菜单现在将出现在您的电子商务商店中，使客户可以轻松探索您的产品类别。
使用 Elementor Pro 设计 WooCommerce 商店
此时，您拥有成功的电子商务商店所需的所有元素：WooCommerce 安装、一些产品以及访问者可以用来探索您的商店的菜单。
但是，我们需要执行最后一项设置。默认情况下，您只能使用 Elementor 来设计帖子和页面，而不是产品。
在继续下一部分之前，我们需要扩展 Elementor 的功能以包括 WooCommerce 产品：
在 WordPress 的左侧菜单中，选择Elementor > Settings。
在帖子类型中，选择产品。
选择保存更改。
您现在可以使用 Elementor 设计定制的产品页面——让我们开始吧！
使用 Elementor Pro 的现成模板
Elementor 提供了一系列模板，可以为您的网站提供全新的外观和感觉，有时甚至可以添加额外的功能。这些专业设计的模板可以减轻建立电子商务商店的大部分工作，因此让我们从探索这些预建模板开始。
在本节中，我将向您展示如何自定义 WooCommerce 自动创建的两个页面：您的产品档案和产品页面。
重新设计 WooCommerce 的单一产品页面
产品页面是访问者查看并最终购买您的产品的方式，因此它们看起来不错并提供客户所需的所有功能至关重要。
Elementor Pro 有一系列产品页面模板，所以让我们好好利用这些模板：
在 WordPress 的左侧菜单中，选择Templates > Theme Builder。
选择添加新 按钮。
打开Template type 下拉菜单并选择Single Product。
为您的模板命名，然后单击Create Template。
Elementor Pro 现在将显示所有可用的单一产品 模板；选择要使用的模板。
此模板现在将在 Elementor 编辑器中打开。此时，您可以对您选择的模板进行更改，但现在我们将继续发布我们选择的模板：
在 Elementor 面板中，选择Publish。
在随后的弹出窗口中，打开Include 下拉菜单并确保选择Products 。
单击保存并关闭。
此模板现在将在您的所有产品页面中推出。
建立自定义 WooCommerce 产品档案
产品档案是一个列表，在一个位置包含您的所有产品。当您设置 WooCommerce 时，此插件会自动将产品存档添加到您的网站，尽管存档的外观会因您的 WordPress 主题而异。
不喜欢这个自动生成的产品档案？您可以使用 Elementor 的任何产品存档模板快速轻松地对其进行改造：
在 WordPress 的左侧菜单中，选择Templates > Theme Builder。
选择添加新 按钮。
打开Template type 下拉菜单并选择Product Archive。
为您的模板命名，然后单击Create Template。
Elementor Pro 现在将显示所有可用的产品存档模板；选择要使用的模板。
您选择的模板现在将在 Elementor 编辑器中打开。
如果您对所选模板感到满意，则可以通过单击绿色发布 按钮来发布它。
在随后的弹出窗口中，打开Include 下拉菜单并选择All Product Archives。
单击保存并关闭。
这个更新的产品档案现在将出现在您的网站上。
结论
在这篇文章中，我们创建了一个完整的在线商店。这个 WooCommerce 网站拥有您开始销售产品所需的一切，所有这些都包含在您选择的 Elementor Pro 专业设计的模板中。
- 为什么选择 WooCommerce？
- 创建亚马逊风格的产品菜单
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
