Change payment methods location before order details table in Woocommerce

Question

I need to alter the default Woocommerce checkout a little bit. I need to move the payment options ABOVE the order review table, while keeping the "Place Order" button at the bottom below the order review table. I currently have

    remove_action('woocommerce_checkout_order_review','woocommerce_checkout_payment', 20 );
    add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 5 );

This moves the payment box above the table, but it also moves the button. How can I keep the button at the bottom?

Answer 1

Here below, you will find the necessary code to reorder checkout order review section. This code will put the payment methods and gateways before the checkout review order table and will keep the "Place Order" button at the end.

The code:

add_action( 'woocommerce_checkout_order_review', 'reordering_checkout_order_review', 1 );
function reordering_checkout_order_review(){
    remove_action('woocommerce_checkout_order_review','woocommerce_checkout_payment', 20 );
    add_action( 'woocommerce_checkout_order_review', 'custom_checkout_payment', 8 );
    add_action( 'woocommerce_checkout_order_review', 'custom_checkout_place_order', 20 );
}

function custom_checkout_payment() {
    $checkout = WC()->checkout();
    if ( WC()->cart->needs_payment() ) {
        $available_gateways = WC()->payment_gateways()->get_available_payment_gateways();
        WC()->payment_gateways()->set_current_gateway( $available_gateways );
    } else {
        $available_gateways = array();
    }

    if ( ! is_ajax() ) {
        // do_action( 'woocommerce_review_order_before_payment' );
    }
    ?>
    <div id="payment" class="woocommerce-checkout-payment-gateways">
        <?php if ( WC()->cart->needs_payment() ) : ?>
            <ul class="wc_payment_methods payment_methods methods">
                <?php
                if ( ! empty( $available_gateways ) ) {
                    foreach ( $available_gateways as $gateway ) {
                        wc_get_template( 'checkout/payment-method.php', array( 'gateway' => $gateway ) );
                    }
                } else {
                    echo '<li class="woocommerce-notice woocommerce-notice--info woocommerce-info">';
                    echo apply_filters( 'woocommerce_no_available_payment_methods_message', WC()->customer->get_billing_country() ? esc_html__( 'Sorry, it seems that there are no available payment methods for your state. Please contact us if you require assistance or wish to make alternate arrangements.', 'woocommerce' ) : esc_html__( 'Please fill in your details above to see available payment methods.', 'woocommerce' ) ) . '</li>'; // @codingStandardsIgnoreLine
                }
                ?>
            </ul>
        <?php endif; ?>
    </div>
    <?php
}

function custom_checkout_place_order() {
    $checkout          = WC()->checkout();
    $order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );
    ?>
    <div id="payment-place-order" class="woocommerce-checkout-place-order">
        <div class="form-row place-order">
            <noscript>
                <?php esc_html_e( 'Since your browser does not support JavaScript, or it is disabled, please ensure you click the <em>Update Totals</em> button before placing your order. You may be charged more than the amount stated above if you fail to do so.', 'woocommerce' ); ?>
                <br/><button type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="<?php esc_attr_e( 'Update totals', 'woocommerce' ); ?>"><?php esc_html_e( 'Update totals', 'woocommerce' ); ?></button>
            </noscript>

            <?php wc_get_template( 'checkout/terms.php' ); ?>

            <?php do_action( 'woocommerce_review_order_before_submit' ); ?>

            <?php echo apply_filters( 'woocommerce_order_button_html', '<button 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 ) . '">' . esc_html( $order_button_text ) . '</button>' ); // @codingStandardsIgnoreLine ?>

            <?php do_action( 'woocommerce_review_order_after_submit' ); ?>

            <?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
        </div>
    </div>
    <?php
    if ( ! is_ajax() ) {
        do_action( 'woocommerce_review_order_after_payment' );
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and work.