将WooCommerce结账页面订单审核区移至顶部后页面滚动异常问题

Got it, let's tackle that annoying auto-scroll issue you're facing. When you moved the order review section to the top using those remove_action/add_action hooks, WooCommerce's default JavaScript is still trying to scroll to the #order_review anchor element on page load. That's why your page jumps straight to the order review instead of staying at the top.

Here are two reliable solutions to fix this:

1. Override the Default Scroll Behavior with JavaScript #

This is the most straightforward fix—we'll inject a small script to override WooCommerce's built-in scroll logic. Add this code to your child theme's functions.php file, or use a custom plugin to avoid losing changes when updating your theme:

add_action( 'wp_enqueue_scripts', 'disable_checkout_auto_scroll', 99 );
function disable_checkout_auto_scroll() {
    // Only run this on the main checkout page (not order received, etc.)
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        // Target WooCommerce's checkout script
        $script_handle = 'wc-checkout';
        // Inline script to force scroll to top on load and checkout updates
        wp_add_inline_script( $script_handle, "
            jQuery(document).ready(function($) {
                // On page load, scroll straight to the top
                $(window).on('load', function() {
                    window.scrollTo(0, 0);
                });
                // Also prevent scroll when checkout updates (e.g., after changing shipping method)
                $('body').off('updated_checkout').on('updated_checkout', function() {
                    window.scrollTo(0, 0);
                });
            });
        " );
    }
}

How this works: #

• It only targets the main checkout page (ignores thank-you pages and other checkout endpoints)
• Hooks into WooCommerce's checkout script to add our custom logic
• Forces the window to scroll to the top when the page finishes loading
• Also handles cases where the checkout updates dynamically (like when a user changes their shipping method)

2. Remove the Anchor from the Checkout URL (If Needed) #

If users are landing on the checkout page with #order_review in the URL (e.g., from a direct link), the browser will automatically scroll to that anchor. This code will redirect those requests to the checkout page without the anchor:

add_action( 'template_redirect', 'remove_checkout_order_review_anchor' );
function remove_checkout_order_review_anchor() {
    if ( is_checkout() && ! is_wc_endpoint_url() && isset( $_SERVER['REQUEST_URI'] ) ) {
        $current_url = esc_url_raw( $_SERVER['REQUEST_URI'] );
        // Check if the URL has the #order_review anchor
        if ( strpos( $current_url, '#order_review' ) !== false ) {
            // Remove the anchor and redirect
            $clean_url = str_replace( '#order_review', '', $current_url );
            wp_redirect( $clean_url );
            exit;
        }
    }
}

Recommendation: #

Start with the first JavaScript solution—it's less intrusive and covers most cases. Use the second redirect method only if you notice users are arriving with the #order_review anchor in their URL.

内容的提问来源于stack exchange，提问作者H. Frederick