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

时间:2023-01-17
本文介绍了自定义结帐“下订单"按钮输出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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一篇:将生日字段添加到 WooCommerce 我的帐户和管理员用户页面 下一篇:在 WooCommerce 3 中将自定义列添加到管理产品列表

相关文章

最新文章