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

Customizing checkout quot;Place Orderquot; button output html(自定义结帐“下订单按钮输出html)
本文介绍了自定义结帐“下订单"按钮输出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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

    本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

DeepL的翻译效果还是很强大的,如果我们要用php实现DeepL翻译调用,该怎么办呢?以下是代码示例,希望能够帮到需要的朋友。 在这里需要注意,这个DeepL的账户和api申请比较难,不支持中国大陆申请,需要拥有香港或者海外信用卡才行,没账号的话,目前某宝可以
PHP通过phpspreadsheet导入Excel日期,导入系统后,全部变为了4开头的几位数字,这是为什么呢?原因很简单,将Excel的时间设置问文本,我们就能看到该日期本来的数值,上图对应的数值为: 要怎么解决呢?进行数据转换就行,这里可以封装方法,或者用第三方的
mediatemple - can#39;t send email using codeigniter(mediatemple - 无法使用 codeigniter 发送电子邮件)
Laravel Gmail Configuration Error(Laravel Gmail 配置错误)
Problem with using PHPMailer for SMTP(将 PHPMailer 用于 SMTP 的问题)
Issue on how to setup SMTP using PHPMailer in GoDaddy server(关于如何在 GoDaddy 服务器中使用 PHPMailer 设置 SMTP 的问题)