如何在WooCommerce结账页面的产品表格下方添加自定义短代码

霞舞

发布时间：2025-09-01 23:01:01

|

620人浏览过

|

来源于php中文网

原创

本教程将指导您如何在WooCommerce结账页面上精确地将自定义短代码放置在产品表格下方、支付区域上方。通过利用WooCommerce提供的不同动作钩子，我们将解决短代码位置不准确的问题，确保内容在指定位置展示，从而优化用户体验和页面布局。

引言

在woocommerce中，自定义结账页面布局是一个常见的需求，例如在特定位置插入促销信息、优惠券列表或其他自定义内容。通常，我们会使用短代码（shortcode）来封装这些自定义功能。然而，将短代码准确地放置在结账页面的特定位置，尤其是“产品表格下方且支付区域上方”，可能比想象中更具挑战性。本文将深入探讨如何利用woocommerce的动作钩子（action hooks）来实现这一精确的短代码插入。

理解WooCommerce结账页面的钩子

WooCommerce提供了大量的动作钩子，允许开发者在特定事件发生时或页面特定位置插入自定义代码。这些钩子是实现功能扩展和页面定制的关键。了解不同钩子的触发时机和位置对于精确控制页面元素至关重要。

最初尝试使用 woocommerce_after_checkout_form 钩子来插入短代码，但发现它会将内容放置在整个结账表单的最底部，这与“产品表格下方、支付区域上方”的目标位置不符。这是因为 woocommerce_after_checkout_form 钩子在整个结账表单渲染完毕后才触发。要实现更精确的控制，我们需要选择更细粒度的钩子。

核心问题与解决方案

我们的目标是将短代码 [wc_sc_available_coupons] 放置在结账页面的“产品订单详情表格下方”且“支付方式选择区域上方”。根据WooCommerce结账页面的结构，以下几个钩子是值得考虑的候选：

• woocommerce_checkout_after_customer_details: 在客户账单和配送详情之后触发。
• woocommerce_checkout_before_order_review: 在订单回顾（包含产品表格）部分开始之前触发。
• woocommerce_before_order_notes: 在订单备注区域之前触发。
• woocommerce_review_order_before_payment: 在订单回顾部分之后、支付方式选择区域之前触发。

经过分析，woocommerce_review_order_before_payment 钩子最符合“产品表格下方且支付区域上方”的需求。它精确地定位在订单详情（即产品表格）的末尾，紧邻支付方式选择区域的上方。

示例代码：将短代码放置在支付前

以下是使用 woocommerce_review_order_before_payment 钩子将自定义短代码插入到目标位置的代码示例：

Figma

Figma 是一款基于云端的 UI 设计工具，可以在线进行产品原型、设计、评审、交付等工作。

下载

';
        echo do_shortcode('[wc_sc_available_coupons]');
        echo '

代码说明：

1. add_action(): 这是WordPress/WooCommerce中用于注册钩子函数的标准方法。
   • 第一个参数 'woocommerce_review_order_before_payment' 指定了我们要使用的动作钩子。
   • 第二个参数 'wnd_checkout_add_custom_shortcode_before_payment' 是我们自定义的函数名称，该函数将在钩子触发时执行。
   • 第三个参数 10 是优先级（priority）。数字越小，函数执行得越早。默认值为10。在大多数情况下，使用默认优先级即可。
2. wnd_checkout_add_custom_shortcode_before_payment(): 这是实际执行任务的函数。
   • shortcode_exists( 'wc_sc_available_coupons' ): 这是一个良好的实践，用于检查要调用的短代码是否已被注册。这可以防止在短代码未定义时出现潜在的错误。
   • do_shortcode('[wc_sc_available_coupons]'): 这是WordPress中用于执行短代码的函数。它会解析短代码并返回其生成的内容。
   • echo: 将短代码生成的内容输出到页面上。
   • div 标签包裹：为了更好的样式控制和页面结构，建议将短代码输出的内容包裹在一个带有特定CSS类的HTML元素中。

实现步骤与注意事项

1. 代码添加位置：

   • 推荐：子主题的 functions.php 文件。 这是最安全和推荐的方法，因为它可以确保在更新父主题时您的自定义代码不会丢失。
   • 自定义插件。 如果您有多个自定义功能，或者希望将此功能作为可移植组件，可以创建一个简单的自定义插件。
   • 避免直接修改父主题的 functions.php。 这样做会导致在主题更新时丢失所有自定义更改。

2. 钩子优先级（Priority）：add_action() 函数的第三个参数是优先级。虽然在上述代码中我们使用了默认值 10，但如果您发现短代码的显示顺序与其他元素有冲突，可以尝试调整这个值。例如，将优先级设置为 5 会让您的代码更早执行，设置为 20 则会更晚执行。但请记住，优先级只影响在同一钩子下注册的多个函数之间的执行顺序，不会改变钩子本身的整体位置。

3. 测试与调试： 添加代码后，务必清除网站缓存（如果使用了缓存插件），然后在结账页面上进行测试，以确保短代码出现在预期的位置。如果位置不准确，可以尝试以下其他钩子：

   • woocommerce_checkout_after_customer_details: 如果您希望它出现在客户详情之后，但可能在订单回顾之前。
   • woocommerce_checkout_before_order_review: 如果您希望它出现在整个订单回顾（包括产品表格）之前。
   • woocommerce_before_order_notes: 如果您希望它出现在订单备注区域之前。

4. 样式调整： 短代码生成的内容可能需要一些CSS样式来更好地融入您的网站设计。您可以使用代码中添加的 .custom-checkout-shortcode-wrapper 类来编写自定义CSS。

总结

通过精确选择WooCommerce的动作钩子，我们可以有效地控制自定义内容在结账页面上的位置。对于将短代码放置在“产品表格下方且支付区域上方”的需求，woocommerce_review_order_before_payment 钩子是最佳选择。遵循本教程的指导，您将能够成功地在WooCommerce结账页面上实现精确的自定义内容插入，从而提升用户体验和网站的专业性。