如何使用 Elementor WooCommerce 购物车小部件

您是否曾经希望可以使用 Elementor 的可视化界面创建和自定义 WooCommerce 购物车页面？ 我们有好消息！在2021 年 11 月发布的 Elementor Pro 3.5中，我们扩展了Elementor WooCommerce Builder 的新功能，包括用于商店购物车、结帐和我的帐户页面的专用小部件。 之前您需要依靠WooCommerce 主题来控制这些关键页面，而现在您可以直接从 Elementor 控制这些元素的设计、布局和内容。 在本教程中，我们将重点介绍如何使用一个特定元素 - 新的购物车小部件。更具体地说，您将学习如何使用 Elementor Pro 的新购物车小部件来控制和优化商店的购物车页面，而无需离开 Elementor。 如果您想观看视频格式的教程，可以观看上面的视频。否则，请继续阅读视频后面的完整文本教程。 Elementor 购物车小部件如何工作？ 您商店的购物车是电子商务网站用户体验的重要组成部分。购物车简化了客户的付款流程，并使购物者可以轻松保存他们感兴趣的产品。


借助 Elementor 的新购物车小部件，您可以使用 Elementor 的视觉设 澳大利亚 WhatsApp 号码数据 计界面完全自定义您的购物车页面，以确保其与商店品牌的其他部分相匹配，并进行设置以优化销售。 以下是您可以使用购物车小部件进行的自定义类型的一些示例： 选择不同的购物车布局，例如一列或两列布局。 为购物车中的每个元素自定义所有颜色和版式。 精细配置每个元素的布局和间距，例如调整某些购物车信息之间的行间距。 编辑购物车页面关键区域的标签以及各种按钮的文本。 自定义购物车的表单，例如优惠券表单和运费计算器。 与所有 Elementor 设计一样，您还可以获得特殊选项来自定义购物车在不同设备上的外观，这可以让您确保每个购物者都拥有良好的体验，无论他们是在台式机、平板电脑还是移动设备上浏览设备。 如何在 Elementor 中使用购物车小部件 现在，让我们进入分步指南，了解如何开始在 WooCommerce 商店中使用 Elementor Cart 小部件。 1. 在 Elementor 中编辑商店的默认购物车页面 当您创建 WooCommerce 商店时，WooCommerce 将自动为您的商店创建一个使用WooCommerce 购物车短代码的购物车页面。 在本教程中，您将使用此现有页面进行设计。



但您不只是坚持使用主题的默认样式，您还可以使用 Elementor 编辑此页面以访问 Elementor 的所有设计选项。 首先，转到仪表板中的页面列表并找到购物车页面。它应该被标记为“购物车页面”。 找到它后，单击“编辑”按钮打开 WordPress 编辑器。然后，在编辑器内，单击“使用 Elementor 编辑”选项以启动 Elementor 的界面。 2. 将 WooCommerce 购物车短代码替换为 Elementor 购物车小部件 当您首次在 Elementor 中打开商店的现有购物车页面时，您将在 Elementor 文本编辑器小组件中看到 [woocommerce_cart] 短代码。 要开始设计，您需要删除此现有小部件/短代码并将其替换为 Elementor 新的专用购物车小部件： 现在，您已准备好开始自定义购物车页面的设计。 注意– 我们建议向您的购物车添加一些商品，以便您在设计时可以看到“完整”购物车的样子。否则，当您在 Elementor 中工作时，您会看到购物车处于空状态。 您可以通过转到商店的前端，将一些商品添加到购物车，然后重新加载 Elementor 界面来完成此操作。