自定义结帐“下订单”按钮输出 html

Question

我需要添加 Facebook 像素代码来跟踪事件，每次客户点击 WooCommerce 结账页面上的“下订单”时。

我试图在 Checkout 模板中找到按钮行，并以这种方式进行编辑：

<button onClick="fbq('track', 'AddPaymentInfo');">Place Order</button>

但是我找不到按钮的代码。

我怎么能添加代码？
或者我在哪里可以找到编辑它的行？是哪个模板？

谢谢

Answer 1

如果您想对结帐提交按钮进行一些更改，您将有两种方法：

1）使用挂接在woocommerce_order_button_html过滤器钩子中的自定义函数，这样：

add_filter( 'woocommerce_order_button_html', 'custom_order_button_html');
function custom_order_button_html( $button ) {

    // The text of the button
    $order_button_text = __('Place order', 'woocommerce');

    // HERE your Javascript Event
    $js_event = "fbq('track', 'AddPaymentInfo');";

    // HERE you make changes (Replacing the code of the button):
    $button = '<input type="submit" onClick="'.$js_event.'" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />';

    return $button;
}

代码位于活动子主题（或主题）的 function.php 文件或任何插件文件中。

2) 覆盖模板 checkout/payment.php，您将定位此代码（第 50 行）：

<?php echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' ); ?>

改成这样：

<?php 
    // Set HERE your javascript event
    $js_event = $js_event = "fbq('track', 'AddPaymentInfo');";

    echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" onClick="'.$js_event.'" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' ); ?>

相关文档：

• 模板结构 + 通过主题覆盖模板
• Woocommerce 模板文件 checkout/payment.php

所有代码都经过测试和工作。这是两种解决方案的输出：