javascript - 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

Answer 1

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: