如何使用 WooCommerce 结帐挂钩

已发表: 2020-06-23

在本指南中，您将学习如何在 WooCommerce 中使用结帐挂钩。 我们将看看一些主要的钩子，并给你一些例子来说明你可以用它们做什么。 因此，准备好自定义结帐页面并提高转化率。

什么是 WooCommerce 钩子？

Hooks 是强大的功能，允许您更改或添加代码，而无需修改核心文件。 Hooks 提供了很大的灵活性，开发人员使用它们来更改 WooCommerce 默认功能。

有两种不同类型的钩子：

  • 操作挂钩允许您添加自定义代码以在事件发生时执行某些操作。
  • 过滤器钩子改变现有变量或函数的行为。

由于 WooCommerce 钩子，开发人员可以以非常实用和灵活的方式创建高度定制的解决方案。 WooCommerce 中一些最重要的钩子是结帐钩子。 如果您有在线商店，则需要使用它们来自定义结帐并提高转化率。

WooCommerce 结帐挂钩

结帐挂钩只是 WooCommerce 支持的多种挂钩中的一种，它们在结帐页面上运行。 您可以使用这些结帐挂钩来编辑注释、在帐单字段之前、订单审核之前或结帐表单之后添加一些内容，应用一些逻辑来提高价格或按角色限制用户等等。

WooCommerce 钩子的工作方式与 WordPress 原生钩子完全一样。 因此，如果您熟悉 WordPress 钩子，掌握 WooCommerce 钩子将很容易。

在我们开始之前

在开始之前，我们建议您创建一个子主题。 您可以使用许多工具。 您可以查看我们的 WordPress 最佳子主题插件列表或我们关于如何使用插件或手动创建子主题的详细指南。

如果这是您第一次使用钩子，您可以简单地复制这些脚本并将它们直接粘贴到您的子主题的functions.php文件中。 在文章的最后，您将找到一些可以使用结帐钩子执行的操作示例，从而为您提供一些想法。

如何使用 WooCommerce 结帐挂钩？

正如我们之前看到的，有 WooCommerce 动作钩子和过滤器钩子，它们都有相似的语法。

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

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
函数 QuadLayers_callback_function(){
    # 在此处添加您的代码
}

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

另一方面，过滤器挂钩以相同的方式工作，但它们需要在函数中接收和返回参数。 例如：

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

WooCommerce 的结帐挂钩列表

您可以在结帐页面上使用许多 WooCommerce 挂钩。 一些主要的有：

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form

它们都有不言自明的名称。 如果您想查看 WooCoommerce 钩子的完整列表，请查看此文档。 要了解每个钩子是如何工作的，请查看这篇文章。

例如，假设您想在帐单表格之后和运输部分标题之前添加一些内容。 你会使用这样的东西：

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
函数 QuadLayers_callback_function(){
echo '这里是内容文本或 html';
}

在这种情况下，我们只是添加一些文本，但您可以添加复杂的 HTML 结构并使用 PHP 函数创建您的自定义逻辑。 让我们看一些示例，为您提供有关如何充分利用 WooCommerce 结帐挂钩的一些想法。

如何使用 WooCommerce 挂钩自定义结帐页面

在这里，我们将向您展示一些示例，说明您可以在您的网站上使用 WooCommerce 挂钩自定义结帐页面。

将图像添加到订单评论

您可以将图像添加到订单查看页面。 在这种情况下，我们添加了二维码，但您可以添加其他图像、动画 GIF 或背景图像。

 add_action('woocommerce_review_order_before_payment','example_callback');
函数示例回调（）{
    回声'<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
}
添加二维码进行订单审核。
在订单评论中添加二维码。

在结帐页面中更改面包屑

您可以通过编辑面包屑来阻止用户导航回主页。 在此示例中，我们将向您展示如何更改Store面包屑中的Home文本。

 add_filter('woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb');
功能'quadlayers_change_breadcrumb'（$默认）{
    $default['home'] = '商店';
    返回$默认值；
}
WooCommerce 结帐挂钩 - 面包屑结帐
编辑结帐页面面包屑。

在“下订单”按钮旁边显示信任徽章

WooCommerce 结帐挂钩提供了一些很好的选择来建立信任并让客户在即将购买时高枕无忧。 通过在“下订单”按钮旁边显示信任徽章，您可以提高转化率，并为您的品牌建立信心。

 add_action（'woocommerce_review_order_after_submit'，'quadlayers_trust_badges'）；
函数 quadlayers_trust_badges() {
    echo '<div class="trust-badges">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>我用 WooCommerce 钩子添加了上面的信任徽章</i></div>';
}
WooCommerce 结帐挂钩 - 信任徽章结帐
在 WooCommerce 结帐页面上显示信任徽章。

编辑现有结帐字段

完全自定义结帐页面的最佳方法是编辑标签和字段占位符。 在此示例中，我们将使用woocommerce_checkout_fields挂钩编辑订单备注的名字和占位符的标签。

 add_filter（'woocommerce_checkout_fields'，'quadlayers_labels_placeholders'，9999）； 
函数 quadlayers_labels_placeholders( $f ) { 	
	$f['billing']['billing_first_name']['label'] = '你叫什么名字？';
	$f['order']['order_comments']['placeholder'] = '你在想什么？'; 
	返回 $f; 
}
WooCommerce 结帐挂钩 - 占位符结帐
替换 WooCommerce 结帐表单的占位符和标签。

添加自定义结帐字段

最后，这是一个更复杂的例子。 我们将向您展示如何创建一个新的自定义字段，允许客户在结帐时订阅您的时事通讯。 为此，我们将使用两个钩子：一个显示要订阅的字段，另一个将按钮的状态保存在数据库中（无论是否选中）。

 add_action('woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');
add_action('woocommerce_checkout_update_order_meta', 'quadlayers_save_function');

// 在 woocommerce 结帐时插入复选框 
函数 quadlayers_subscribe_checkout( $checkout ) { 
	woocommerce_form_field（'订阅'，数组（
		'类型' => '复选框',
		'class' => array('misha-field form-row-wide'),
		'label' => '订阅我们的时事通讯。',
		), $checkout->get_value('订阅')); 
}
// 保存字段值
函数 quadlayers_save_function( $order_id ){ 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['subscribed'] ) && $_POST['subscribed'] == 1 )
		update_post_meta( $order_id, '订阅', 1 ); 
}
WooCommerce 结帐挂钩 - 订阅结帐
在 WooCommerce 结帐页面上添加一个复选框。

使用插件自定义结帐页面

如果您不习惯使用挂钩，您还可以使用插件自定义结帐页面。 有很多工具，但我们推荐这两个：

  • WooCommerce 结帐管理器：拥有 70,000 多个活动安装，这是 WooCommerce 最受欢迎的结帐插件之一。 结帐管理器允许您自定义、添加、编辑和删除结帐页面上的字段。 它有一个免费版本和 3 个高级计划，起价为 20 美元。
  • WooCommerce 的直接结帐：使用此免费增值工具，您可以简化结帐流程并提高转化率。 您可以缩短购买过程，将客户从产品页面直接重定向到结帐。 Direct Checkout 有免费版本和高级计划，起价为 20 美元（一次性付款）。

有关如何使用这些插件和改进结帐页面的更多信息，请查看我们的详细指南。

结论

总而言之，使用 WooCommerce 挂钩，您可以自定义结帐页面并提高转化率。 在这里，我们向您展示了一些示例，说明如何使用这些挂钩来个性化结帐的不同部分。 但是，您可以做的还有很多！ 因此，我们鼓励您与他们一起玩耍并释放您的创造力。

有关如何自定义 WooCommerce 结帐页面的更多示例和信息，请查看此分步指南。

如果您有任何问题，请在下面的评论部分告诉我们。 如果您喜欢阅读，请在社交媒体上分享这篇文章！