WooCommerce结账钩子 – 可视化指南

WooCommerce对开发人员非常友好，因为它有大量的操作和过滤器——或者只是钩子。当我们在使用WooCommerce插件或调整结账流程时，我们经常使用或者调整它们。这就是我们创建此WooCommerce结帐钩子指南的原因，以帮助每位开发人员的初学者或高级开发人员找到他正在寻找的钩子。

这是WooCommerce钩子可视化指南系列的第一篇文章。请务必阅读其中的每个细节，以了解有关WooCommerce钩子的所有信息以及在哪里可以找到它们。

WooCommerce结帐钩子 – 可视化指南

你将在下方找到WooCommerce结帐页面中可用的所有钩子。本指南基于官方WooCommerce主题店面。为了使屏幕截图更具可读性，我调整了结帐页面以显示在一列中。

查看WooCommerce结帐中的所有钩子行为

要在实时页面上查看它的实际效果，请滑动到实时指南 ↓

WooCommerce结账钩子可视化指南

WooCommerce结账钩子 – 可视化指南

除了上面的静态可视化指南，我们在实时页面上创建了整个WooCommerce结帐体验，因此你可以查看所有的钩子，点击查看整个结帐过程，甚至可以使用浏览器中的开发人员工具对其进行操作。

单击下面的链接访问实时WooCommerce结帐钩子指南：

查看购物车钩子行为 →

删除结帐页面上的默认操作

默认情况下，WooCommerce仅使用一些钩子来添加：

• 结帐前的登录表单（woocommerce_checkout_login_form）
• 结帐表格前的优惠券表格（woocommerce_checkout_coupon_form）
• 订单审查表到订单审查部分 (woocommerce_order_review)
• 付款表也到订单审查部分（woocommerce_checkout_payment）

你可以通过将以下代码粘贴到主题或最好是子主题中的functions.php文件来轻松删除这些部分。

<?php
/**
 * 默认的WooCommerce结账钩子（只是举例说明，不要复制）
 *
 */
add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

/**
 * 如何删除默认的WooCommerce结账钩子（粘贴到主题的functions.php文件中）
 *
 */
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

将你自己的部分添加到结帐页面

你还可以轻松地向结帐页面添加一些文本或部分，而无需编辑WooCommerce模板！以下简单示例显示了如何在结帐表单上方添加“亲，购物愉快！”文本，如下所示：

在WooCommerce结帐表单前添加“亲，购物愉快！”文本

<?php
// 不要包含开始的php标签

add_action( 'woocommerce_before_checkout_form', 'wpdesk_checkout_hello', 5 );
/**
 * Add "hello" text before WooCommerce checkout form
 *
 */
function wpdesk_checkout_hello() {
  echo '<h2>亲，购物愉快！</h2>';
}

WooCommerce结帐页面中的自定义字段
上面的示例展示了如何将一些带有简单代码片段的文本添加到WooCommerce结帐页面。但是自定义结帐字段呢？使用自定义编码执行此操作需要做更多的工作，但幸运的是有一个插件可以帮助你将自定义字段添加到WooCommerce结帐中的任何可用自定义部分。

查看WooCommerce结帐自定义字段插件功能

你可以将字段添加到默认的帐单或运输部分，也可以添加到WooCommerce结帐钩子的所有其他可用部分。完美！尝试一下！

WooCommerce对开发人员非常友好，因为它有大量的操作和过滤器——或者只是钩子。当我们在使用WooCommerce插件或调整结账流程时，我们经常使用或者调整它们。这就是我们创建此WooCommerce结帐钩子指南的原因，以帮助每位开发人员的初学者或高级开发人员找到他正在寻找的钩子。

这是WooCommerce钩子可视化指南系列中的一篇文章。请务必阅读其中的每个细节，以了解有关WooCommerce钩子的所有信息以及在哪里可以找到它们。

WooCommerce购物车钩子 – 可视化指南

你将在下方找到WooCommerce购物车页面中可用的所有钩子。本指南基于官方WooCommerce主题商店。

要在实时页面上查看它的实际效果，请滑动到实时指南 ↓

WooCommerce购物车钩子可视化指南

WooCommerce空购物车钩子 – 可视化指南

空购物车页面中也有1个钩子：

WooCommerce空购物车钩子可视化指南

WooCommerce购物车钩子 – 可视化指南

除了上面的静态可视化指南，我们在实时页面上创建了整个WooCommerce购物车体验。你可以实时查看所有钩子，在购物车中添加或删除产品，单击整个商店，甚至可以在浏览器中使用开发人员工具对其进行操作。

单击下面的按钮访问实时WooCommerce购物车钩子可视化指南：

查看正在使用的结账钩子 →

WooCommerce购物车钩子 – 完整列表

• woocommerce_before_cart
• woocommerce_before_cart_table
• woocommerce_before_cart_contents
• woocommerce_cart_contents
• woocommerce_cart_coupon
• woocommerce_cart_actions
• woocommerce_after_cart_contents
• woocommerce_after_cart_table
• woocommerce_cart_collaterals
• woocommerce_before_cart_totals
• woocommerce_cart_totals_before_shipping
• woocommerce_after_shipping_rate
• woocommerce_before_shipping_calculator
• woocommerce_after_shipping_calculator
• woocommerce_cart_totals_after_shipping
• woocommerce_cart_totals_before_order_total
• woocommerce_cart_totals_after_order_total
• woocommerce_proceed_to_checkout
• woocommerce_after_cart_totals
• woocommerce_after_cart
• woocommerce_cart_is_empty

删除购物车页面上的默认操作

默认情况下，WooCommerce仅使用一些钩子来添加：

• 在购物车总数旁边交叉销售 (woocommerce_cross_sell_display)
• 交叉销售旁边的购物车总数（woocommerce_cart_totals）
• 继续购物车总数下的结帐按钮（woocommerce_button_proceed_to_checkout）

你可以通过将以下代码粘贴到你的主题或最好是子主题中的functions.php文件来轻松删除这些功能。

<?php

/**
 * 默认WooCommerce购物车钩子（仅举例说明，请勿复制）
 *
 */
add_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
add_action( 'woocommerce_cart_collaterals', 'woocommerce_cart_totals', 10 );
add_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

/**
 * 如何删除默认的WooCommerce购物车钩子（粘贴到主题的functions.php文件中）
 *
 */
remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cart_totals', 10 );
remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

将你自己的部分添加到购物车页面

你还可以轻松地向购物车页面添加一些文本或部分，而无需编辑WooCommerce模板！以下简单示例显示了如何在购物车表格上方添加“免费配送”文本，如下所示：

在WooCommerce购物车表格前添加“购物满$299免运费！”文本

<?php
// 不要包含开始的php标签

add_action( 'woocommerce_before_cart_table', 'wpdesk_cart_free_shipping_text' );
/**
 * 向WooCommerce购物车页面添加“购物满$299免运费！”文本
 *
 */
function wpdesk_cart_free_shipping_text() {
	echo '<div class="woocommerce-info">购物满$299免运费！</div>';
}