跳过到主内容
< 返回
当前位置:
打印

结账页面构建器

目录

结账布局用自定义结构替换标准的 WooCommerce 结账页面。所需的布局类型取决于网站使用的是 Gutenberg、Elementor 还是 WPBakery。

选择正确的结账结构

Gutenberg

创建一个结账布局。Gutenberg 将登录表单、优惠券表单、客户详细信息、订单审核和支付区域保留在同一个布局中。

Elementor 和 WPBakery

结账分为两种布局类型:

  • 结账表单 — 包含账单和配送详细信息、订单审核、支付方式以及“提交订单”按钮。
  • 结账顶部内容 — 包含在表单之前显示的内容,例如登录和优惠券表单。如果不存在自定义的顶部内容布局,则使用默认的 WooCommerce 内容。

创建结账布局

1. 导航至 仪表盘 → 布局 → 结账,然后点击添加按钮。

2. 使用 Gutenberg 时选择结账,使用 Elementor 或 WPBakery 时选择结账表单。

3. 输入布局名称,选择预定义设计或从空白布局开始,然后点击创建布局。

4. 添加所需的结账元素并发布布局。

WPB上的结账布局元素
WPBakery Page Builder 中的结账布局元素
WPB上的结账布局站点元素
WPBakery Page Builder 中的结账布局站点元素
Elementor上的结账布局顶部内容元素
WPBakery Page Builder 中的结账布局顶部内容元素
Elementor结账布局元素
Elementor 中的结账布局元素
Gutenberg结账布局元素
Gutenberg 中的结账布局区块
Gutenberg结账布局站点元素
Gutenberg 中的结账布局站点区块

结账元素

  • 账单详细信息 — 显示客户的账单字段。
  • 配送详细信息 — 当需要单独的配送地址时,显示配送地址字段。
  • 订单审核 — 显示产品、数量、小计、配送和订单总额。
  • 支付方式 — 显示可用的支付网关和订单提交控件。
  • 登录表单 和 优惠券表单 — 允许老客户登录或应用优惠券。
  • 结账步骤 — 显示购物车、结账和完成订单的进度指示器。
  • WooCommerce 通知和钩子 — 在需要时保留消息和第三方内容。

使用 Elementor 或 WPBakery 时,仅在您想要替换结账表单上方显示的默认内容时,才创建单独的结账顶部内容布局。

布局可用性

结账和结账顶部内容是全局布局类型,没有可配置的包含或排除条件。结账后显示的订单确认由单独的感谢页布局控制。

插件兼容性

支付、配送和结账扩展通常使用 WooCommerce 钩子。如果扩展的内容缺失,请参阅WooCommerce 钩子和插件兼容性。