【问题标题】:Customizing checkout "Place Order" button output html自定义结帐“下订单”按钮输出 html
【发布时间】:2017-06-30 11:29:38
【问题描述】:

每次客户在 WooCommerce 结帐页面上单击“下订单”时,我都需要添加 Facebook Pixel 代码来跟踪事件。

我尝试在 Checkout 模板中找到按钮行,并以这种方式进行编辑:

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

但我找不到按钮的代码。

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

谢谢

【问题讨论】:

  • 谢谢@LoicTheAztec,我用插件试过了,但是在结帐页面我只能为整个页面设置一个事件,在这种情况下是“InitiateCheckout”事件,我想添加当用户填写支付数据时,特定于按钮的第二个事件。以这种方式制作,我可以检测到用户何时尝试付款但无法付款。如果我使用插件并且每页只能调整一个事件,系统会以相同的方式注册离开页面的客户和尝试付款但遇到麻烦的客户。不过还是谢谢你!!

标签: javascript php wordpress woocommerce checkout


【解决方案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 ) . '" />' ); ?>

相关文档:


所有代码都经过测试并且可以正常工作。这是两种解决方案的输出:

【讨论】:

  • 非常感谢@LoicTheAztec 的帮助,它运行良好,现在我正在注册活动并在 FB 报告中看到它们。太感谢了!!祝你有美好的一天:)
  • @Melania 很高兴它成功了……这是我从你的问题中发现的一个好技巧……也祝你有美好的一天:)
猜你喜欢
  • 1970-01-01
  • 2020-01-11
  • 2016-09-24
  • 2020-03-13
  • 2014-11-28
  • 1970-01-01
  • 2021-06-08
  • 2010-12-15
  • 1970-01-01
相关资源
最近更新 更多