WooCommerce调整结账模块顺序后订单摘要不显示求助

Hey there, let's figure out why your order summary went missing after adjusting the checkout section order. The issue boils down to a couple of key problems in your code, plus a simpler way to achieve your goal without reinventing the wheel.

What's Wrong with Your Current Code? #

1. Broken HTML from Escaped Characters
   Looking at your code, you’ve got escaped characters like < (should be <) and ?> (should be ?>). These don’t parse correctly in PHP or browsers, which messes up the page structure and can hide the order summary entirely.

2. Missing Order Summary Hook
   By default, the woocommerce_checkout_order_review hook runs two critical actions:

   • woocommerce_order_review (priority 10): Renders the order summary table (subtotal, shipping, total)
   • woocommerce_checkout_payment (priority 20): Renders payment methods and the place order button

   Your code replaces the payment section but doesn’t explicitly ensure the order summary hook is still executed. Even though you didn’t remove it, the broken HTML from the first issue might be preventing it from displaying properly.

3. Unnecessary Rewriting of Core Functions
   You’re rewriting the entire payment and place-order logic, which means you might be missing default WooCommerce hooks (like woocommerce_review_order_before_payment) or dynamic functionality (like AJAX cart updates). This can lead to unexpected bugs beyond just the missing order summary.

The Simplest Fix: Adjust Default Hook Priorities #

Instead of rewriting core components, just reorder the default hooks. This keeps all WooCommerce’s built-in functionality intact while moving payment methods before the order summary. Here’s the cleaned-up code:

// Reorder checkout sections: Payment methods before order summary
add_action( 'woocommerce_checkout_order_review', 'reorder_checkout_sections', 1 );
function reorder_checkout_sections() {
    // Remove default actions to reorder them
    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
    
    // Add payment methods first (priority 8)
    add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 8 );
    
    // Add your custom "Your Order" header/text (priority 9)
    add_action( 'woocommerce_checkout_order_review', 'add_custom_order_title', 9 );
    
    // Add the order summary table (priority 10)
    add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
}

// Custom header/text before the order summary
function add_custom_order_title() {
    ?>
    <div id="before-order-table" class="woocommerce-checkout-custom-text">
        <h3><?php _e("Your order", "woocommerce"); ?></h3>
        <p><?php // _e("I have accepted the terms and bla bla bla", "woocommerce"); ?></p>
    </div>
    <?php
}

If You Want to Keep Your Original Approach (Fixed Version) #

If you prefer to stick with your custom payment functions, fix the escaped characters and explicitly add the order summary hook. Here’s the corrected version of your 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', 'after_custom_checkout_payment', 9 );
    // Explicitly add the order summary hook to ensure it renders
    add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
    add_action( 'woocommerce_checkout_order_review', 'custom_checkout_place_order', 20 );
}
function after_custom_checkout_payment() {
?>
<div id="before-order-table" class="woocommerce-checkout-custom-text">
<h3><?php _e("Your order", "woocommerce"); ?></h3>
<p><?php /* _e("I have accepted the terms and bla bla bla", "woocommerce"); */?></p>
</div>
<?php
}
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() ) {
        // Re-enabled this important hook for gateway compatibility
        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>';
    }
?>
</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>' ); ?>
<?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' );
    }
}

Key fixes here:

• Removed broken escaped HTML characters
• Re-enabled the woocommerce_review_order_before_payment hook (critical for payment gateway compatibility)
• Explicitly added woocommerce_order_review to guarantee the order summary renders

Final Steps #

1. Replace your existing code in functions.php with either of the above fixes
2. Clear your browser cache and any WooCommerce/caching plugin cache
3. Test the checkout page to confirm the order summary (subtotal, shipping, total) is visible, with payment methods positioned above it

内容的提问来源于stack exchange，提问作者Fazil Mahesania