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

2021-12-22 00:00:00 php javascript wordpress woocommerce checkout

我需要添加 Facebook Pixel 代码来跟踪事件，每次客户点击 WooCommerce 结账页面上的下订单"时.

我已尝试在 Checkout 模板中找到按钮行，并以这种方式对其进行

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

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

谢谢

解决方案

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

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

add_filter('woocommerce_order_button_html', 'custom_order_button_html');函数 custom_order_button_html( $button ) {//按钮的文本$order_button_text = __('下订单', 'woocommerce');//这里是你的 Javascript 事件$js_event = "fbq('track', 'AddPaymentInfo');";//在这里进行更改(替换按钮的代码):$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 ) . '"/>';返回 $ 按钮；}

代码位于活动子主题(或主题)的 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 ) . '"/>' );?>

改为:

' );?>

相关文档:

I need to add the Facebook Pixel code to track an event, every time a client clicks the "Place Order" on the WooCommerce checkout page.

I've tried to find the button line at the Checkout template, and edit it this way:

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

But I can't locate the code for the button.

How could I add the code?
Or where can I find the line to edit it? Which template is it?

Thanks

解决方案

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

1) Using a custom function hooked in woocommerce_order_button_html filter hook, this way:

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;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

2) Overriding the template checkout/payment.php and you will target this code (on line 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 ) . '" />' ); ?>

Changed to this:

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