WooCommerce结账页物流字段调整求助：脚本失效及PHP修改故障

Hey there, let's work through this issue step by step—your jQuery code works in the console, so we just need to fix how it's loaded in WordPress to make it stick.

Why Your Current Approach Isn't Working #

When you add the script directly to the page editor's plain JS pane, it probably runs before the checkout page's DOM is fully loaded, so the script can't find the elements you're targeting. Plus, WordPress loads jQuery in noConflict mode, and script execution timing is critical here.

The Safe, Reliable Solution #

We'll use WordPress's official script enqueuing system to load your custom code correctly, and add safeguards for dynamic checkout updates.

Step 1: Create a Custom JavaScript File

1. In your active theme (use a child theme if you aren't already—this prevents code loss when your theme updates), create a js folder if it doesn't exist.
2. Inside that folder, create a file named checkout-shipping-move.js with this code:

jQuery(document).ready(function($) {
    // Only run if both target elements exist to avoid errors
    const shippingRow = $("#order_review > table > tfoot > tr.woocommerce-shipping-totals.shipping");
    const paymentUl = $("#payment > ul");

    if (shippingRow.length && paymentUl.length) {
        // Move the shipping row initially
        shippingRow.appendTo(paymentUl);

        // Re-run when WooCommerce updates the checkout (e.g., user selects a new shipping method)
        $(document.body).on('updated_checkout', function() {
            // Make sure we don't duplicate the row if it's already moved
            if (shippingRow.parent().is("#payment > ul") === false) {
                shippingRow.appendTo(paymentUl);
            }
        });
    }
});

Step 2: Enqueue the Script via functions.php

Add this code to your child theme's functions.php file (never edit the parent theme's functions.php directly—this avoids breaking your site if the theme updates):

function enqueue_custom_checkout_script() {
    // Only load this script on the main checkout page (not order confirmation pages)
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        wp_enqueue_script(
            'checkout-shipping-move',
            get_stylesheet_directory_uri() . '/js/checkout-shipping-move.js',
            array( 'jquery' ), // Ensure jQuery loads before our script
            wp_get_theme()->get('Version'), // Cache-busting with theme version
            true // Load script in the footer, after DOM is ready
        );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_checkout_script' );

Key Notes to Avoid Site Crashes #

• Always use a child theme: If you edit the parent theme's functions.php and make a syntax error (like missing a bracket), your site will go down. A child theme lets you safely add custom code without risking the parent theme.
• Test code locally first: Before adding code to your live site, test it on a staging environment or local dev site to catch errors early.
• Check for element selector changes: If your theme customizes the WooCommerce checkout HTML, double-check that your selectors (#order_review > table > tfoot > tr.woocommerce-shipping-totals.shipping and #payment > ul) still match the actual DOM elements.

Testing the Fix #

1. Save all your changes.
2. Clear your site's cache (if you use a caching plugin).
3. Go to the checkout page and verify the shipping totals row has moved to after the payment section.
4. Test selecting different shipping methods to ensure the row stays in the correct position after the checkout updates.

内容的提问来源于stack exchange，提问作者Jaroslav Melich