如何使用拖放插件自定义WooCommerce购物车页面设计

您是否希望最大限度地降低网站上的购物车放弃率？那么，定制WooCommerce购物车页面设计至关重要。功能固然是电子商务商店的基石，但精美的界面同样不可或缺。一个专业且优化的网站，在恰当位置布局关键元素，能更有效地吸引顾客注意力，从而提升销售额。购物车页面是顾客最终决定是否完成购买的关键环节，因此打造一个既专业又吸引人的购物车页面，对于减少购物车放弃率至关重要。本文将为您提供无需编码的WooCommerce购物车页面定制分步指南。

### 默认WooCommerce购物车页面的外观如何？

WooCommerce提供的购物车页面布局非常基础。尽管不同主题会赋予页面不同的样式，但整体布局雷同。让我们看看默认WooCommerce购物车页面在不同主题下的表现：

– **WordPress官方2020主题**：购物车页面呈现基础布局，缺乏特色设计。
– **WordPress官方2021主题**：同样采用单调的默认布局，未添加任何创新元素。
– **Hello Elementor主题**：即便在流行的Elementor主题中，购物车页面依然保持旧式布局。

显而易见，所有购物车页面都采用相同布局，缺乏亮点和个性化设计。

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

截至2021年，全球已有4,414,537个网站使用WooCommerce。这一数据足以说明，众多商家仍在使用相同乏味的购物车页面。当然，我完全支持WooCommerce——作为WordPress最受欢迎的电子商务插件，它提供了功能完备的电子商务网站，包括购物车页面。然而，在竞争激烈的电商领域，与千篇一律的页面无异，意味着您的店铺可能淹没在众多相似页面中。据统计，约70%的购物车最终被放弃，而个性化设计能有效提升转化率。人们总被与众不同的事物吸引，脱颖而出才能脱颖而出。因此，定制购物车页面，使其独具特色，才能帮助您赢得更多订单。

### 为什么编辑代码以获取自定义WooCommerce购物车页面不是一个好主意？

虽然通过代码编辑实现定制是选择之一，但非技术人员应避免此方法。使用WordPress和WooCommerce等即用型软件构建网站，本意就是避免手动编码。以下是新手或非技术人员应避免编辑WooCommerce代码的原因：

1. **技术门槛高**：需要精通HTML、CSS、JavaScript和PHP。
2. **网站性能风险**：代码若未优化，可能降低网站速度。
3. **维护困难**：每次主题更新都需要重新调整代码。
4. **兼容性问题**：WooCommerce更新时，需手动适配代码。
5. **数据丢失风险**：若未使用子主题，更新可能导致代码丢失。

因此，如果您选择使用WordPress和WooCommerce等平台避免初始编码，那么为何要为编辑购物车页面而学习编码呢？别担心，有更便捷的解决方案——无需一行代码，即可轻松定制购物车页面。

### 如何使用拖放插件自定义WooCommerce购物车页面？

现在，您可以通过简单的拖放技术设计购物车页面。感谢WooCommerce PageBuilder插件ShopEngine，它让定制变得轻而易举。ShopEngine是终极的WooCommerce构建器，提供预制模板、自定义小工具和丰富电子商务功能，让您完全掌控WooCommerce页面的设计。

虽然ShopEngine提供了预制购物车模板，但您也可以从零开始创建。下面将引导您完成从头定制购物车页面的过程。

#### 第1步：安装Elementor和ShopEngine

首先，您需要安装两个插件：

1. **Elementor**：ShopEngine作为Elementor的WooCommerce页面构建器，因此必须先安装Elementor。
2. **ShopEngine**：安装完成后，按照后续步骤操作。

#### 第2步：创建购物车页面模板

安装插件后，创建购物车模板：

1. 转到：**仪表盘 => ShopEngine => Builders Template**。
2. 点击**Add new**，打开模板设置窗口。
3. 输入**Template name**。
4. 从下拉列表中选择**Type as Cart**。
5. 勾选**设置默认值**，覆盖现有购物车页面。
6. 在**Sample Design**下选择**空白选项**（或选择预制模板）。
7. 点击**保存更改**。

#### 第3步：选择布局/结构

选择购物车页面的布局：

1. 转到：**ShopEngine => Builders Module**。
2. 将鼠标悬停在购物车模板上，点击**使用Elementor编辑**。
3. 点击**添加新部分(+)**图标。
4. 选择您喜欢的**structure/layout**。

#### 第4步：使用ShopEngine小工具设计购物车页面

ShopEngine提供五个专门用于购物车的小工具，以及优惠券表单和通用小工具。以下是本文使用的小工具：

1. **购物车表**：以表格形式展示购物车产品，包括价格、数量和小计，支持更新数量和清空购物车。
2. **购物车总计**：显示运输方式和订单总额。
3. **返回商店**：提供按钮链接回商店页面。
4. **结账优惠券表格**：允许客户使用折扣券。
5. **交易产品**：展示销售产品，并带倒计时功能。
6. **交叉销售**：以吸引方式展示交叉销售产品。

**启用小工具**：

1. 转到：**管理仪表盘 => ShopEngine => Widgets**。
2. 搜索并启用所需小工具。
3. 点击页面顶部的**保存更改**。

**拖放小工具**：

1. 返回购物车页面编辑器。
2. 搜索并逐个拖放小工具到布局中。

**示例布局**：

– 添加一个新部分，选择不同结构。
– 拖放**交叉销售**和**交易产品**小工具。
– 注意：需在管理仪表盘中设置交叉销售产品和销售产品，以便前端显示。

**小工具设置**：

– **交叉销售**：提供启用/关闭滑块、显示/隐藏闪购、销售价格、购物车按钮等选项。
– **交易产品**：提供订单、排序依据、日期、显示产品、列间距等设置。

#### 第5步：自定义Woocommerce购物车页面的样式设置

ShopEngine不仅控制结构，还允许完全自定义样式：

1. 将鼠标悬停在要编辑的小工具上，点击**Edit**。
2. 在左侧Elementor面板中调整内容和样式设置。

**样式设置示例**：

– **购物车表格**：自定义表头、表体、产品图片、数量样式等。
– **返回商店**：调整按钮对齐、版式、边框等。
– **优惠券表单**：自定义信息、描述、表单样式等。
– **购物车总计**：更改表格、输入框、按钮样式等。
– **交叉销售**：调整项目样式、图像、标题、价格等。
– **交易产品**：自定义产品包装、徽章、倒计时等。

#### 第6步：更新和预览自定义WooCommerce购物车页面

更改样式后，点击**Update**保存，然后点击**Preview**查看效果。

### 使用ShopEngine模块促进电子商务商店销售的技巧

ShopEngine提供多个模块，提升在线购物体验：

– **快速浏览**：让顾客轻松查看产品详情。
– **变化样本**：展示产品不同颜色或款式。
– **愿望清单**：允许顾客添加产品到愿望清单。
– **产品对比**：方便顾客对比不同产品。

这些功能不仅提升购物体验，还能增加销售机会。例如，在交叉销售中添加快速浏览和愿望清单按钮，能显著提高转化率。

### 为什么要升级到ShopEngine Pro？

ShopEngine已提供强大功能，但Pro版本更进一步，带来更多高级模块和预制模板：

– **高级模块**：Flash sale倒计时、徽章、销售通知、快速结账等。
– **管理功能**：Preorder、Backorder、Additional Checkout Field等，简化运营。
– **预制模板**：15+模板，完全自定义，或从零创建。
– **高级小工具**：60+小工具，满足多样化需求。

### 小结

ShopEngine让构建WooCommerce页面变得前所未有的简单。别让默认样式限制您的在线商店，通过定制和模块化功能，让您的电子商务业务更上一层楼。