自定义结帐“下订单”按钮输出html [英] Customizing checkout "Place Order" button output html

问题描述

每当客户单击WooCommerce结帐页面上的下订单时，我需要添加Facebook Pixel代码来跟踪事件。

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

 < button onClick = fbq（'track'，'AddPaymentInfo'）;>下订单< / button> 
  

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

如何添加代码？

还是在哪里可以找到要编辑的行？

谢谢

解决方案

如果要在结帐提交按钮上进行一些更改，您将有两种方式：

1）使用连接到 woocommerce_order_button_html 过滤器挂钩的自定义函数，方法是：

  add_filter（'woocommerce_order_button_html'，'custom_order_button_html'）; 
 function custom_order_button_html（$ button）{
 
 //按钮的文本
 $ order_button_text = __（'下订单'，'woocommerce'）; 
 
 //这里是您的Javascript事件
 $ js_event = fbq（’track’，‘AddPaymentInfo’）;; 
 
 // //在此处进行更改（替换按钮的代码）：
 $ button ='< input type = submit onClick ='。$ js_event。'类= 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'，'<输入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 
 // //在此处设置您的JavaScript事件
 $ 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）。' />'）; ？> 
  

相关文档：

• 
  

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

  Related documentation:

  • Template Structure + Overriding Templates via a Theme
  • Woocommerce templates file checkout/payment.php

  ---

  All code is tested and works. here is the output for both solutions:

  这篇关于自定义结帐“下订单”按钮输出html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！