自定义结帐 "Place Order" 按钮输出 html

Question

我需要添加 Facebook 像素代码来跟踪事件，每次客户单击 WooCommerce 结帐页面上的 "Place Order"。

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

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

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

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

谢谢

Answer 1

If you want to make some changes on the checkout submit button, you will have 2 ways:

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 ) . '" />' ); ?>

自定义结帐 "Place Order" 按钮输出 html

Customizing checkout "Place Order" button output html

javascript

php

wordpress

woocommerce

checkout