Customizing checkout “Place Order” button output html

Question

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

Thanks @LoicTheAztec, I've tried it with plugins, but in the Checkout page I only can set one event for the whole page, in this case the "InitiateCheckout" event, and I want to add a second event specific for the button when the user fill the payment data. Making it in this way I can detect when a user has tried to pay but couldn't do it. If I use the plugin and can adjust only one event per page, the system register in the same way the client who simply left the page and the one who have tried to pay and encountered some trouble. But thank you anyway!! — Melania

LoicTheAztec LoicTheAztec · Accepted Answer · 2017-02-12T17:36:55

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

Customizing checkout “Place Order” button output html

1 Answers