首页 » elementor » academy » Building an online store with WooCommerce » 用Woocommerce建立一个网上商店 [06] WooCommerce页面解释

用Woocommerce建立一个网上商店 [06] WooCommerce页面解释

当我们第一次安装 WooCommerce 时,它​​会自动为我们创建几个重要的页面。这些页面对于为您的客户提供成功的购物体验至关重要。

如果我们导航到我们的网站页面,您会看到 WooCommerce 创建了四个页面,分别称为“购物车、结帐、我的帐户和商店”。

在 Elementor,我们一直在努力开发三个新的小部件,这些小部件将允许完全自定义购物车、结帐和我的帐户页面。发布后,我们将更新此视频,提供有关如何在您的商店中实施它们的完整说明。

我们已经在上一课中探索了商店部分,所以让我们关注购物车、结帐和我的帐户页面。

我们要调查的第一个页面是购物车页面。

这是客户将商品添加到购物车后可以查看的页面。该页面将允许他们查看他们的订单并进行任何必要的修改,例如更改数量或删除项目。

如果您选择页面标题,我们将被带到默认的 WordPress 编辑屏幕。

在这里您可以看到 WooCommerce 已经自动在页面中插入了一个简码。此短代码将在实时网站上动态显示购物车。

现在让我们选择“使用 Elementor 编辑”并向页面添加一些其他元素。

简码被带到 Elementor 编辑器中,您现在应该会在编辑器中看到购物车。

还有一个可以放入编辑器中的 WooCommerce 小部件。通过使用它,您可以选择要显示的 WooCommerce 部分。这与已经嵌入的短代码的工作方式完全相同,因此请随意使用您喜欢的方法。

如您所见,默认的 Elementor 布局显示页面名称。让我们通过选择左下角的齿轮图标并切换隐藏标题选项来删除它。

接下来,我们将修改购物车区域周围的填充,以便间距与我们网站的其余部分对齐。

最后一步是添加包含页面标题的英雄部分。我们已将我们的英雄部分保存为模板,因此我们只需将其放到适当的位置,然后修改标题。

现在让我们预览我们的购物车页面,看看它是什么样子的。

好的,不错。让我们保存此页面并移至“结帐”页面。

结帐页面是客户向您购买产品的过程中的最后一步。

他们首先会看到需要填写的字段,例如他们的姓名、联系信息和账单地址。

如果需要,客户还可以在此处修改运输选项并选择他们选择的付款方式。

交易成功完成后,同一页面还将显示订单确认信息。

就像之前我们可以看到 WooCommerce 短代码已自动添加一样,如果我们在 Elementor 编辑器中应用与之前相同的步骤,我们的页面将被转换以匹配我们的网站。

我们将首先删除页面标题……

修改短代码周围的填充…

然后加入……

并修改标题部分的文本……

现在让我们在我们网站的前端检查一下。

我们要查看的最后一个 WooCommerce 页面是我的帐户页面。

让我们前往所有页面,然后选择“我的帐户”。

就像之前我们可以看到 WooCommerce 已经自动添加了一个短代码一样。此短代码将显示我的帐户区域。

帐户区域是您的客户可以查看他们下的任何订单的详细信息,以及修改任何帐户设置(如他们的地址和密码)的地方。

让我们再次选择“使用 Elementor 编辑”来自定义我们的帐户页面以适应我们网站的风格。

按照我们在调整购物车和结帐页面时遵循的相同步骤进行操作……

然后检查您网站前端的所有内容。

好的,看起来不错!

WooCommerce 在自动为您的商店创建这些基本页面方面做得很好。

结合在 Elementor 编辑器中轻松编辑这些页面,您拥有一个可靠的工具包来创建一个令人惊叹的商店,您的客户会希望一次又一次地回来。

在下一课中,我们将学习如何为您的商店配置送货选项。显示较少

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top