WooCommerce结账页滚动至空字段：求插件或钩子解决方案

使用自定义钩子（无需插件，推荐） #

WooCommerce默认在结账字段验证失败时会滚动到页面顶部，我们可以通过添加自定义JS替换这个行为，直接定位到第一个错误字段：

1. 将以下代码添加到你的主题functions.php文件，或者使用自定义代码插件（如Code Snippets）：

add_action( 'wp_footer', 'custom_checkout_scroll_to_error_field' );
function custom_checkout_scroll_to_error_field() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // 监听结账错误事件
                $(document).on('checkout_error', function() {
                    // 定位第一个带有错误标记的字段容器
                    const firstError = $('.woocommerce-invalid:first');
                    if (firstError.length) {
                        // 平滑滚动到目标位置，减去100px适配顶部导航
                        $('html, body').animate({
                            scrollTop: firstError.offset().top - 100
                        }, 500);
                    }
                });
            });
        </script>
        <?php
    }
}

这段代码的作用是：当结账验证失败触发checkout_error事件时，自动找到第一个标记为错误的字段，平滑滚动到该位置（偏移量可根据你的网站导航高度调整）。

插件方案 #

如果不想编写代码，可以选择以下插件实现类似功能：

• WooCommerce Checkout Field Editor：支持自定义结账字段，部分版本可通过配置或扩展钩子实现错误字段定位滚动，同时还能编辑字段的显示、验证规则。
• Custom Checkout Fields for WooCommerce：高评分的字段管理插件，部分高级功能包含验证后的错误定位，适合非技术用户。
• 注意：选择插件时优先选择最近更新、用户评分高的版本，确保和当前WooCommerce版本兼容。

内容的提问来源于stack exchange，提问作者Rahul Singh