28 个 WooCommerce 结帐钩子：不仅仅是视觉指南

已发表: 2022-09-15

目录隐藏

1.什么是钩子？

1.1。两种主要类型的钩子

1.1.1。动作挂钩

1.1.2。过滤钩

1.2. 为什么在 WooCommerce 中使用钩子？

2.所有 WooCommerce 结帐挂钩

3.移除结账页面的默认动作

4. WooCommerce 中的自定义结帐字段编辑器

5.总结

WooCommerce 的最佳功能之一是定制。借助钩子，您可以在产品页面、购物车页面和结帐页面上添加内容。

本指南列出了所有 WooCommerce 结帐挂钩，以及您可以将它们放置在结帐页面的什么位置以及用途。

让我们快速了解一下什么是钩子，它们的类型，然后跳转到结帐页面钩子。

什么是钩子？

WordPress 中的 Hooks 允许您在不修改核心文件的情况下更改或添加代码。

它们被称为钩子，因为它的功能类似于用于保存对象的真实钩子。在电子商务世界中，钩子一直在持有额外的程序。

为了改善客户体验，店主和开发商使用这些钩子。他们将在这里添加段落、产品描述、图标、图像、徽标和文本。

两种主要类型的钩子

虽然有很多 WordPress 钩子，但您可以将它们分为两种类型：

动作挂钩
过滤钩

动作挂钩

动作挂钩允许您在网站的任何位置添加额外的功能。这个钩子可以用来添加额外的小部件、菜单，甚至是一条消息。

这是一个动作钩子的例子：

add_action（'woocommerce_before_checkout_billing_form'，'storeapps_before_checkout_billing_form'）；
功能 storeapps_before_checkout_billing_form() {
   // 在此处添加您的代码
}

其中 woocommerce_before_checkout_billing_form 是钩子，而 storeapps_callback_function 是我们为添加自定义脚本而创建的函数。

过滤钩

过滤器挂钩允许您修改现有功能。在这些钩子中，您不会添加任何新内容，而只是更改或过滤数据。

例如：

add_filter('woocommerce_breadcrumb_defaults', 'storeapps_change_breadcrumb');
函数 storeapps_change_breadcrumb( $content ) {
   $content .= "StoreApps";
   返回$内容；
}

另一个示例可能是您的整个商店的“添加到购物车”按钮随着过滤器的变化而变化。

为什么在 WooCommerce 中使用钩子？

一旦你看到它们可以做什么，你几乎没有办法忽略和不使用这些钩子。您商店中的所有内容都是可定制的，因此您可以使用这些钩子创建您想要的 WooCommerce 商店。

如果您使用钩子，您将不必担心这些后果。更改主题不会影响更改。所以最好坚持使用钩子以避免所有的头痛和风险。

由于结帐是任何商店最重要的页面，让我们看看 WooCommerce 结帐页面挂钩。

所有 WooCommerce 结帐挂钩

来源——TycheSoftwares

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
woocommerce_before_checkout_registration_form
woocommerce_after_checkout_registration_form
woocommerce_checkout_shipping
woocommerce_before_checkout_shipping_form
woocommerce_after_checkout_shipping_form
woocommerce_before_order_notes
woocommerce_after_order_notes
woocommerce_checkout_after_customer_details
woocommerce_checkout_before_order_review_heading
woocommerce_checkout_order_review
woocommerce_checkout_before_order_review
woocommerce_review_order_before_cart_contents
woocommerce_review_order_after_cart_contents
woocommerce_review_order_before_shipping
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
woocommerce_review_order_after_order_total
woocommerce_review_order_before_payment
woocommerce_review_order_before_submit
woocommerce_review_order_after_submit
woocommerce_review_order_after_payment
woocommerce_checkout_after_order_review
woocommerce_after_checkout_for

让我们详细看看每个钩子，它的放置位置以及如何添加它。

1. woocommerce_before_checkout_form
挂钩是在结帐表单之前定义的。它位于结帐页面上的优惠券字段上方。

add_action（'woocommerce_before_checkout_form'，'storeapps_before_checkout_form'，10）；
功能 storeapps_before_checkout_form() {
	回声'<h2>woocommerce_before_checkout_form</h2>';
}

2. woocommerce_checkout_before_customer_details
挂钩在结帐表单中定义，就在客户详细信息之前。

add_action（'woocommerce_checkout_before_customer_details'，'storeapps_checkout_before_customer_details'，10）；
功能 storeapps_checkout_before_customer_details() {
	回声'<h2>woocommerce_checkout_before_customer_details</h2>';
}

3. woocommerce_checkout_billing
这是结帐页面中添加的新挂钩。结帐页面上的计费表单模板包含使用此挂钩。

add_action('woocommerce_checkout_billing', 'storeapps_checkout_billing');
功能 storeapps_checkout_billing() {
    回声'<h2>woocommerce_checkout_billing</h2>';
}

4. woocommerce_before_checkout_billing_form
挂钩是在计费表单开始之前定义的。

add_action（'woocommerce_before_checkout_billing_form'，'storeapps_before_checkout_billing_form'，10）；
功能 storeapps_before_checkout_billing_form() {
	回声'<h2>woocommerce_before_checkout_billing_form</h2>';
}

5. woocommerce_after_checkout_billing_form
在完成计费表单后定义挂钩。

add_action（'woocommerce_after_checkout_billing_form'，'storeapps_after_checkout_billing_form'，10）；
功能 storeapps_after_checkout_billing_form() {
	回声'<h2>woocommerce_after_checkout_billing_form</h2>';
}

6. woocommerce_before_checkout_registration_form
挂钩是在帐户创建表单之后的计费表单模板中定义的。这将为来宾用户执行。

add_action('woocommerce_before_checkout_registration_form', 'storeapps_before_checkout_registration');
功能 storeapps_before_checkout_registration_form() {
    回声'<h2>woocommerce_before_checkout_registration_form</h2>';
}

7. woocommerce_after_checkout_registration_form
此挂钩在计费表单模板中定义。这将为来宾用户执行。

add_action('woocommerce_after_checkout_registration_form', 'storeapps_after_checkout_registration_form');
功能 storeapps_after_checkout_registration_form() {
    回声'<h2>woocommerce_after_checkout_registration_form</h2>';
}

8. woocommerce_checkout_shipping
此挂钩是在发货表单之前的发货表单模板中定义的。

add_action('woocommerce_checkout_shipping', 'storeapps_checkout_shipping');
功能 storeapps_checkout_shipping() {
    回声'<h2>woocommerce_checkout_shipping</h2>';
}

9. woocommerce_before_checkout_shipping_form
这个钩子是在运输表格开始之前定义的。

add_action（'woocommerce_before_checkout_shipping_form'，'storeapps_before_checkout_shipping_form'，10）；
功能 storeapps_before_checkout_shipping_form() {
	回声'<h2>woocommerce_before_checkout_shipping_form</h2>';
}

10. woocommerce_after_checkout_shipping_form
此挂钩是在完成运输表格后定义的。

add_action（'woocommerce_after_checkout_shipping_form'，'storeapps_after_checkout_shipping_form'，10）；
功能 storeapps_after_checkout_shipping_form() {
	回声'<h2>woocommerce_after_checkout_shipping_form</h2>';
}

11. woocommerce_before_order_notes
这个钩子是在结帐页面上的订单备注字段之前定义的。

add_action（'woocommerce_before_order_notes'，'storeapps_before_order_notes'，10）；
功能 storeapps_before_order_notes() {
	回声'<h2>woocommerce_before_order_notes</h2>';
}

12. woocommerce_after_order_notes
这个钩子是在结帐页面上的订单备注字段之后定义的。

add_action('woocommerce_after_order_notes', 'storeapps_after_order_notes', 10);
功能 storeapps_after_order_notes() {
	回声'<h2>woocommerce_after_order_notes</h2>';
}

13. woocommerce_checkout_after_customer_details
在完成客户详细信息后，即在计费和运输字段之后放置挂钩。

add_action（'woocommerce_checkout_after_customer_details'，'storeapps_checkout_after_customer_details'，10）；
功能 storeapps_checkout_after_customer_details() {
	回声'<h2>woocommerce_checkout_after_customer_details</h2>';
}

14. woocommerce_checkout_before_order_review_heading
这个钩子在结帐模板中定义在订单审查标题之前，即“您的订单”。这个钩子是在 WooCommerce v3.6.0 中添加的。

add_action('woocommerce_checkout_before_order_review_heading', 'storeapps_checkout_before_order_review_heading');
功能 storeapps_checkout_before_order_review_heading() {
    回声'<h2>woocommerce_checkout_before_order_review_heading</h2>';
}

15. woocommerce_checkout_order_review
挂钩在主结帐模板中定义。使用此挂钩包含订单审查表模板。

add_action('woocommerce_checkout_order_review', 'storeapps_checkout_order_review');
功能 storeapps_checkout_order_review() {
    回声'<h2>woocommerce_checkout_order_review</h2>';
}

16. woocommerce_checkout_before_order_review
这个钩子是在结帐页面上的订单详细信息之前定义的。

add_action（'woocommerce_checkout_before_order_review'，'storeapps_checkout_before_order_review'，10）；
功能 storeapps_checkout_before_order_review() {
	回声'<h2>woocommerce_checkout_before_order_review</h2>';
}

17. woocommerce_review_order_before_cart_contents
这个钩子在内容之前的订单表主体内定义。

add_action（'woocommerce_review_order_before_cart_contents'，'storeapps_review_order_before_cart_contents'，10）；
功能 storeapps_review_order_before_cart_contents() {
	回声'<h2>woocommerce_review_order_before_cart_contents</h2>';
}

18. woocommerce_review_order_after_cart_contents
这个钩子是在所有内容之后的订单表主体内定义的。

add_action（'woocommerce_review_order_after_cart_contents'，'storeapps_review_order_after_cart_contents'，10）；
功能 storeapps_review_order_after_cart_contents() {
	回声'<h2>woocommerce_review_order_after_cart_contents</h2>';
}

19. woocommerce_review_order_before_shipping
此挂钩在订单表中的运输部分之前定义。

add_action（'woocommerce_review_order_before_shipping'，'storeapps_review_order_before_shipping'，10）；
功能 storeapps_review_order_before_shipping() {
	回声'<h2>woocommerce_review_order_before_shipping</h2>';
}

20. woocommerce_review_order_after_shipping
此挂钩在订单详细信息表中的运输部分之后定义。

add_action（'woocommerce_review_order_after_shipping'，'storeapps_review_order_after_shipping'，10）；
功能 storeapps_review_order_after_shipping() {
	回声'<h2>woocommerce_review_order_after_shipping</h2>';
}

21. woocommerce_review_order_before_order_total
此挂钩在订单详细信息表中的总部分之前和运输部分之后定义。

add_action（'woocommerce_review_order_before_order_total'，'storeapps_review_order_before_order_total'，10）；
功能 storeapps_review_order_before_order_total() {
	回声'<h2>woocommerce_review_order_before_order_total</h2>';
}

22. woocommerce_review_order_after_order_total
此挂钩在订单详细信息表中的总部分 & 之后定义。

add_action（'woocommerce_review_order_after_order_total'，'storeapps_review_order_after_order_total'，10）；
功能 storeapps_review_order_after_order_total() {
	回声'<h2>woocommerce_review_order_after_order_total</h2>';
}

23. woocommerce_review_order_before_payment
这个钩子是在结帐页面上的付款方式部分之前定义的。

add_action（'woocommerce_review_order_before_payment'，'storeapps_review_order_before_payment'，10）；
功能 storeapps_review_order_before_payment() {
	回声'<h2>woocommerce_review_order_before_payment</h2>';
}

24. woocommerce_review_order_before_submit
此挂钩在结帐页面上的“下订单”按钮之前定义。

add_action（'woocommerce_review_order_before_submit'，'storeapps_review_order_before_submit'，10）；
功能 storeapps_review_order_before_submit() {
	回声'<h2>woocommerce_review_order_before_submit</h2>';
}

25. woocommerce_review_order_after_submit
这个钩子是在结帐页面上的“下订单”按钮之后定义的。

add_action（'woocommerce_review_order_after_submit'，'storeapps_review_order_after_submit'，10）；
功能 storeapps_review_order_after_submit() {
	回声'<h2>woocommerce_review_order_after_submit</h2>';
}

26. woocommerce_review_order_after_payment
这个钩子是在包括“下订单”按钮在内的整个支付部分之后定义的。

add_action（'woocommerce_review_order_after_payment'，'storeapps_review_order_after_payment'，10）；
功能 storeapps_review_order_after_payment() {
	回声'<h2>woocommerce_review_order_after_payment</h2>';
}

27. woocommerce_checkout_after_order_review
这个钩子是在结帐页面上的订单审查部分之后定义的，其中包括订单详细信息表和付款部分。

add_action（'woocommerce_checkout_after_order_review'，'storeapps_checkout_after_order_review'，10）；
功能 storeapps_checkout_after_order_review() {
	回声'<h2>woocommerce_checkout_after_order_review</h2>';
}

28. woocommerce_after_checkout_form
此挂钩在结帐表单的末尾定义。

add_action('woocommerce_after_checkout_form', 'storeapps_after_checkout_form', 10);
功能 storeapps_after_checkout_form() {
	回声'<h2>woocommerce_after_checkout_form</h2>';
}

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

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

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

如下所示，可以轻松删除此代码。您还可以参考此文档以安全地添加 WordPress 代码片段。

/**
 * 删除默认的 WooCommerce 结帐挂钩
 */
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 结帐页面。

但是自定义结帐字段呢？自定义编码需要更多的工作。

但是在 Cashier 的帮助下，您可以编辑/添加/删除核心 WooCommerce 字段，还可以为运输、账单和其他字段部分添加自定义字段。

包起来

希望本指南帮助您涵盖所有关键的 WooCommerce 结帐挂钩。

使用它们使您的在线商店的结帐页面更好。最重要的是，结帐页面就像通往客户的门户，如果使用得当，这些挂钩可以增强商店的整体用户体验。

对于更多结帐优化，WooCommerce 结帐插件随时为您提供帮助。