如何使用适用于 Elementor 的 WooCommerce Builder 构建商店
已发表: 2022-09-27您正在搜索适用于 Elementor 的 WooCommerce 构建器，以便您可以使用 Elementor 强大的可视化构建器创建和自定义您的商店。
借助 ShopReady，您可以使用 Elementor 创建和自定义整个 WooCommerce 商店——即使您只是使用 Elementor 的免费版本！
如果您想了解有关 ShopReady 的更多信息，可以查看我们完整的 ShopReady 评论。
不过，在本文中，我们更关注如何将 ShopReady 用作 Elementor 的 WooCommerce 构建器。
下面，我们将逐步向您展示如何使用 ShopReady 来构建和自定义您的商店，包括添加高级功能，例如愿望清单、产品快速查看、优化的结账等等。
您将能够创建一个如下所示的商店：
您将能够使用 Elementor 自定义所有内容，包括您的产品、购物车和结帐页面（以及更多）：
如何将 ShopReady 用作 Elementor 的 WooCommerce 生成器
事不宜迟，让我们直接进入我们的分步教程。
同样，如果您想在进入本教程之前详细了解 ShopReady 中的许多功能，您可以阅读我们完整的 ShopReady 评论。
无论何时选择试用，结账时使用独家优惠券代码WPMayor30即可享受 30% 的折扣。
1. 创建您的基本 WooCommerce 商店并安装 Elementor
如果您还没有这样做，您的第一步是设置您的基本 WooCommerce 商店。
您需要选择优质的 WooCommerce 托管、安装 WooCommerce、完成设置向导、添加一些产品等。
如果您在这里需要帮助，可以查看我们的 WooCommerce 商店设置指南。
不要担心选择 WooCommerce 主题或自定义设计，因为这就是 Elementor 和 ShopReady 的用途。 只需专注于在后端设置东西，这样您就可以拥有一个正常运行的商店，尽管它是基本的。
完成后，您还需要安装 Elementor 插件。
借助 ShopReady，您可以免费使用 Elementor 的免费版本。
或者，如果您已经拥有 Elementor Pro，您也可以安装它 – ShopReady 适用于这两个版本。
2. 安装 ShopReady 并启用一切
设置基本 WooCommerce 商店并安装 Elementor 后，您就可以为 Elementor 安装 ShopReady WooCommerce 构建器。
WordPress.org 提供了 ShopReady 的免费版本，以及添加了更多功能的高级版本，起价为 75 美元。
对于本教程，我们安装了专业版。 但是，相同的基本步骤也适用于免费版本，因此即使您使用免费版本也应该能够按照以下步骤进行操作（您可能无法访问某些更高级的功能，而且您也不会能够自定义尽可能多的模板）。
激活插件后，您将在 WordPress 仪表板中获得一个新的ShopReady菜单。
如果您转到主ShopReady菜单，您将获得一个包含不同区域的界面，您可以在其中启用各种小部件、模块和模板。
现在，我建议启用所有小部件和模块，以便您在创建商店时可以访问所有功能。
一旦您建立了您的商店，您可以随时返回并禁用您不使用的任何元素，以保持轻量级并加快您的商店。
启用Demo Importer模块尤为重要，因为这将使您可以访问 ShopReady 的预制商店模板（尽管您始终可以从头开始自定义所有内容）。
启用Demo Importer模块后，它会提示您安装配套的 Demo Importer 插件，您应该这样做。
执行此操作后，转到 WordPress 仪表板中的新Unyson区域并启用备份和演示内容扩展，以便您可以导入 ShopReady 的模板。
注意 – 如果您想使用 Elementor 从头开始设计模板，则可以跳过此过程。
3.导入模板作为您商店的基础
现在，您可以前往工具 → 演示内容安装来安装预制 ShopReady 演示站点之一。
同样，您也可以跳过此步骤，直接从头开始设计您商店的模板，我们将在下一节中介绍。
导入演示后，您将能够使用 Elementor 完全自定义所有内容。
查看不同的演示选项，然后单击要用作商店基础的演示的安装按钮。
对于本教程，我们将使用Demo V1 ：
就像那样，您的商店应该看起来与演示完全一样：
4. 使用 Elementor 自定义商店的模板
现在，您已准备好开始使用 Elementor 的 WooCommerce 构建器来自定义商店的内容。
要访问您商店的所有不同模板，请转到 WordPress 仪表板中的ShopReady区域，然后选择模板选项卡。
在这里，您会看到与您的商店关联的所有不同模板的列表。 以下是一些需要考虑的最重要的模板：
- 产品——单个产品页面的模板。
- 商店– 商店主页面的模板。
- Shop Archive – 列出所有产品的页面模板。
- 购物车/空购物车——购物车各个阶段的模板。
- 结账——结账页面的模板。
- 我的账户——购物者前端账户页面的模板。
然而，ShopReady 的好处在于它还可以让您控制许多其他模板，例如产品快速查看、愿望清单等。
要编辑任何模板并启动 Elementor，您只需选择相关模板，然后单击铅笔图标。
您还可以创建新模板并在商店的不同部分使用多个模板：
ShopReady 现在将启动 Elementor 界面。
要控制设计，您可以使用普通的 Elementor 界面及其所有设计选项。
关键区别在于 ShopReady 还将为您提供大量可在设计中使用的通用小部件和专用 WooCommerce 小部件。 您可以在 Elementor 界面的各个Shop Ready区域中找到这些：
每个小部件也将有自己独特的设置。
例如，带缩放的缩略图小部件可让您显示具有不同布局和设置的产品图像：
完成后，请确保保存更改。
然后，您可以重复相同的过程来编辑商店的所有模板。 页面右侧的蓝色仪表板链接可让您轻松返回 ShopReady 模板界面。
不同的模板可能包含它们自己的特殊小部件。 例如，当您创建结帐页面模板时，您将获得特殊的小部件来帮助您做到这一点：
5.自定义站点设置
除了让您使用 Elementor 自定义单个模板外，ShopReady 还向 Elementor 站点设置菜单添加了一些选项。 您可以通过单击 Elementor 界面左上角的汉堡包图标并选择站点设置来访问 Elementor 站点设置。
您可以在此处访问商店行为的许多重要设置。
首先，设置分为两个区域——ShopReady和ShopReady General & PopUp。
如果单击这些区域，您将获得许多其他选项。 例如，您可以控制可以使用 ShopReady 添加的站点范围内的迷你购物车的行为：
我们建议探索所有这些选项，因为在这里您可以为您的商店找到大量很酷的功能。
您还可以通过 WordPress 仪表板中的ShopReady → 页眉页脚来控制页眉和页脚。
立即开始为 Elementor 使用 WooCommerce Builder
用户喜欢 Elementor，因为它具有强大的可视化拖放式构建器界面。
借助 ShopReady，您可以利用该构建器的强大功能来全面设计和自定义您的 WooCommerce 商店，即使您只使用免费版的 Elementor 也是如此。
如果您已准备好开始，请使用下面的按钮下载 ShopReady，然后按照本教程创建您的 WooCommerce 商店。
奖励：结账时使用独家优惠券代码WPMayor30可享受 ShopReady 30% 的折扣！