如何在 Elementor 中设计 WooCommerce 购物车 [无需编码]

您的客户是否在购买过程中放弃了他们的WooCommerce 购物车？ 您是否知道这背后的一个极其常见的原因可能是购物车页面杂乱无章，用户觉得购物时会感到困惑？ 但是再也不用担心了； 随着Elementor 基本插件的最新更新，我们为您提供了降低购物车放弃率和促进销售的最简单的解决方案。

在此博客中，我们将向您介绍为什么在您的商店网站上定制设计WooCommerce 购物车页面是最佳方法的原因。 但不仅如此，我们还将向您介绍我们最新的 Essential Addons 元素，这些元素旨在帮助您创建专业设计的购物车，一定会带来销售。 因此，事不宜迟，让我们直接潜入并了解更多信息。

为什么要设计自定义 WooCommerce 购物车页面？

研究表明，每10 位顾客中就有近 7 位会放弃您的购物车并且再也不会回来，即使他们对您销售的产品感到满意。 正如我们在一开始提到的那样，其主要原因是客户无法浏览的混乱或杂乱的购物车页面。

有时，您的潜在客户可能无法返回购物页面并添加他们需要的其他产品。 而在其他时候，附加他们希望使用的销售优惠券代码可能会出现问题。 当他们已经在WooCommerce 购物车页面上无法添加更多数量的相同产品时，买家甚至可能会感到沮丧。

可以理解的是，提供出色的产品和服务可能会令人非常失望，并且仍然会观察到很高的购物车放弃率——尤其是由于简单的页面设计问题。 但是，随着我们Elementor 基本插件团队的最新版本，您的担忧现在即将结束。 阅读更多内容，了解如何通过 Elementor 中设计精美、外观专业的电子商务购物车页面轻松提升销售额。

使用 Essential Addons 5.0 设计专业的 WooCommerce 购物车

2021 年对于我们 Elementor 的 Essential Addons 团队来说是令人惊叹的一年。 我们已经达到了最大的里程碑，并且发展得比我们想象的要快。 这一切都归功于你。 因此，为了以同样的高调结束这一年并为您提供最佳的 Web 构建体验，我们为您带来了我们最新的更新Essential Addons 5.0。

最新版本包含许多改进、新元素和扩展，可帮助您在 Element 中轻松发挥网页设计技能。 我们很高兴地通知您，此更新还附带了一个独家小部件 - EA Woo Cart 。

这个令人难以置信的新元素可让您使用 Elementor 在您的商店中轻松创建设计师 WooCommerce 购物车页面，只需点击几下，无需编码。 因此，无论您是电子商务行业的新手，还是经验丰富的店主，您都可以轻松使用此 Essential Addons 小部件将潜在的橱窗购物者转变为付费客户。

它最大的亮点是它在 Elementor 中完全可定制，并带有许多不同的设计布局供您选择，并且与您的 WooCommerce 商店的美学完全匹配。 继续阅读以了解更多信息。

在 Elementor 中设置平滑的 EA Woo 购物车，无需编码

不用说，您必须确保您已经安装并配置了WooCommerce 插件，以完美地构建您的商店。 但在这种情况下很重要，因为要让这个高级小部件在 Elementor Editor 中工作，您需要从 WooCommerce 商店将一些产品添加到购物车中。 一旦完成，我们就可以毫不费力地在您的商店中使用 EA Woo Cart 小部件。 请按照以下步骤了解如何操作：

第 1 步：设置您想要的 WooCommerce 购物车页面

首先，直接从您的 WordPress 仪表板导航到WooCommerce → 设置页面，然后转到“高级”选项卡。 从这里，您可以将任何所需的页面分配为新的购物车页面。

只需单击“购物车页面”选项，然后从下拉菜单中选择任何页面作为您的 WooCommerce 购物车页面，如下图所示。 您将一切就绪。

第 2 步：在 Elementor 中编辑 WooCommerce 购物车

下一步是使用 Elementor Editor 只需单击几下即可编辑您的WooCommerce 购物车页面。 但在您这样做之前，您必须使用 Elementor 的基本插件启用 EA Woo Cart 元素。

确保您已安装最新版本的Essential Addons 5.0 PRO ，然后从 Essential Addons for Elementor 用户界面转到“元素”选项卡。 您将在这里找到 80 多个可用元素，但您只需切换“ EA Woo Cart ”选项并点击“ Save Settings ”即可开始使用。

第 3 步：在 Elementor 中编辑 WooCommerce 购物车

现在，您已准备好在 Elementor 中设计一个令人惊叹的购物车页面。 因此，只需转到您的 WooCommerce 购物车页面，然后点击“使用 Elementor 编辑”。

进入 Elementor 编辑器后，从“元素”选项卡下的“搜索”选项中找到“ EA Woo Cart ”元素。 然后，只需将“EA Woo Cart”元素拖放到 Elementor Editor 中所需的任何部分，如下所示。 这真的很容易。

轻松配置 EA Woo 购物车的各个方面

您的 WooCommerce 购物车现已设置好，但需要对其进行样式设置和定制，以使其看起来专业且易于客户理解。 本节将重点介绍如何轻松做到这一点。

第 1 步：配置 EA Woo 购物车常规设置

在 Elementor 编辑器侧面板上，您会在“内容设置”选项卡下找到多个选项，例如“常规设置” 、 “表格生成器”或“购物车组件” 。

在“常规设置”中，您会发现 2 种不同风格的布局供您的 EA Woo 购物车选择并根据自己的喜好进行自定义，如下所示。

第 2 步：从表生成器更改标签

接下来，从“表格生成器”中，您可以更改表格标签并拖动部分以重新排列您的 EA Woo Cart 价格表。 这使您可以完全灵活地更改已添加到购物车页面的所有列中的每个标签——“产品”、“价格”、“数量”等。

第 3 步：自定义购物车组件功能

然后，我们转到“购物车组件”部分，您可以在其中简单地切换“购物车更新按钮”，让您的客户能够将更多产品添加到他们的购物车中。

但不仅如此，您还可以切换“优惠券表格”，让客户在结账时轻松添加他们想要的任何优惠券在 WooCommerce 购物车页面上。 除此之外，您还可以启用“继续购物”选项，以帮助客户再次返回商店页面进行更多购物。 此外，您甚至可以从此部分更改“结帐按钮”文本，使您的号召性用语更具交互性。

所有这些按钮和选项将帮助您的客户彻底了解 WooCommerce 购物车页面，并轻松浏览此页面。 因此，使用 EA Woo 购物车小部件，您可以立即降低购物车放弃率和跳出率。

只需点击几下即可完全自定义 EA Woo 购物车的样式

最后，一旦您为您的EA Woo 购物车页面配置了内容，就可以对其进行样式设置以匹配您的 WooCommerce 网站或品牌美学。 为此，您只需单击 Elementor 编辑器的“样式”选项卡即可自定义页面的不同区域。

第 1 步：风格化常规设置

在“常规”部分，您可以更改整个 EA Woo 购物车部分的背景颜色。 您将能够手动调整 EA Woo 购物车背景的颜色或选择全局颜色。

第 2 步：通过表格部分了解详细信息

从“表格”部分，您可以更改整个购物车部分的填充、边距、排版、边框类型等。 它最终将使您的 EA Woo 购物车页面从其他 WooCommerce 商店中脱颖而出，并且看起来完全定制。

第 3 步：改变其他设计方面

但这还不是全部。 同样，您可以更改“购物车总计”、“优惠券表格” 、“继续购物”、 “按钮”和“通知”的外观。 您甚至可以更改里面的文本。

要添加更多功能并使您的 EA Woo 购物车页面看起来更具交互性和吸引力，您还可以探索“高级”设置选项。

外观专业的设计师 WooCommerce 购物车页面

就是这样。 通过这些小步骤和简单的自定义，您可以根据自己的喜好轻松为您的网站创建令人惊叹的WooCommerce 购物车页面。 这也是，无需使用任何一行代码。

查看下面的最终结果，并在高级 Essential Addons EA Woo Cart 小部件的帮助下，了解您在 WooCommerce 中具有专业外观的设计师购物车页面。

WooCommerce 商店的其他独家小部件

有了这个，我们想结束我们关于如何在 Elementor 中设计 WooCommerce 购物车的终极指南，无需编码且完全轻松。 但在我们离开之前，我们想让您了解您可以从 Elementor 的 Essential Addons 访问的所有其他 WooCommerce 小部件。

这个出色的插件为您带来了一个小部件，只需单击几下即可改善 WooCommerce 商店的各个方面。 您可以查看另外7 个元素：

Woo 产品库

Woo 产品滑块

Woo 产品旋转木马

Woo 产品网格

Woo 产品比较

Woo 产品系列

哇结帐

从 Essential Addons 网站查看它们，并立即轻松提升您的 WooCommerce 商店的销售额。

更新 Essential Addons 5.0 并促进 WooCommerce 销售

那你还在等什么？ 别等了！ 立即更新到 Essential Addons 5.0 ，加入我们创建一个独特且转化率高的 WooCommerce 商店。 或者，查看我们的任何 PRO 套餐，以仅 39.97 美元的独家价格开始，并使用我们所有的高级功能使流量、销售额和转化率飙升！

如果您有任何建议，请在下面的评论中告诉我们或联系我们的支持团队； 我们很高兴知道您的反馈。 如需更多更新、教程以及提示和技巧，请订阅我们的博客或加入我们友好的Facebook 社区。