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

问题描述

我需要添加 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 ) . '" />' ); ?>
  

  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屋！