問題描述

我需要添加 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的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

  【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！