WooCommerce Hook: Content get's displayed twice and not AFTER the order total

Question

I've overwritten WooCommerce's review-order.php to change the checkout a little bit. Now everytime I add something to the hook woocommerce_review_order_after_order_total the contents get displayed twice and before the whole block and NOT AFTER the order total:

function output_payment_button() {
    $order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );
echo '<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 ) . '" />';
}
add_action( 'woocommerce_review_order_after_order_total', 'output_payment_button' );

Also adding a simple <?php echo("Hello World"); ?> to the end of review-order.php makes it appear twice. Can someone explain to me what I am doing wrong?

Answer 1

In case it helps anyone, the do_action('woocommerce_review_order_after_order_total') is called in the middle of a table in the template and expects a table row to be echoed by the add_action hook. If you just echo text or, as in the question, an input, it falls outside the table, appears before not after the table and presumably gets left behind on ajax updates so appears more than once. So, something like the following will work in the add_action hook (the table has 2 columns):

echo '<tr><td colspan="2">My after totals text</td></tr>';

Answer 2

Probably if you check again the file review-order.php you will see that you replace the hook woocommerce_review_order_before_order_total with woocommerce_review_order_after_order_total, which probably now is present two times.

If you see twice what you attached to the hook, is just because the hook is used twice.

Answer 3

I've had this exact issue, and after following the action hooks back I've found the cause. On lines 223 and 224 (at the time of writing) of the file wc-template-hooks.php you can see this:

add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

This is why things are duplicating. The woocommerce_checkout_order_review action is hooking into two separate functions consecutively, and I assume those functions have some code to compensate for table tags being used to prevent duplication, anything else is getting duplicated when woocommerce_checkout_order_review is used.

So all I have done to work around this is to create my own action hooks for the two functions Woocommerce have rolled into woocommerce_checkout_order_review and added them as a code snippet or in the functions file like so:

/*** Create hook for the Woocommerce order summary table ***/
add_action( 'woocommerce_checkout_order_summary', 'woocommerce_order_review', 10 );

/*** Create hook for the Woocommerce order payment form ***/
add_action( 'woocommerce_checkout_order_payment', 'woocommerce_checkout_payment', 20 );

Using these I've been able to call the individual parts flawlessly and wrap them in my own HTML to give whatever layout I want.

I know it's too late for the original question, but I hope this helps someone.