javascript - Customizing checkout "Place Order" button output html - Stack Overflow

admin管理员组

文章数量:1291041

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

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

• javascript
• php
• wordpress
• woomerce
• checkout

Share Improve this question Follow edited Feb 13, 2017 at 5:56 LoicTheAztec 254k2424 gold badges396396 silver badges443443 bronze badges asked Feb 12, 2017 at 12:54 MelaniaMelania 7311 silver badge66 bronze badges 1

• 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 Commented Feb 12, 2017 at 15:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

If you want to make some changes on the checkout submit button, you will have 2 ways:

1) Using a custom function hooked in woomerce_order_button_html filter hook, this way:

add_filter( 'woomerce_order_button_html', 'custom_order_button_html');
function custom_order_button_html( $button ) {

    // The text of the button
    $order_button_text = __('Place order', 'woomerce');

    // 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="woomerce_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( 'woomerce_order_button_html', '<input type="submit" class="button alt" name="woomerce_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( 'woomerce_order_button_html', '<input type="submit" onClick="'.$js_event.'" class="button alt" name="woomerce_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
• Woomerce templates file checkout/payment.php

---

All code is tested and works. here is the output for both solutions:

本文标签： javascriptCustomizing checkout quotPlace Orderquot button output htmlStack Overflow