WooCommerce结账页州选择框文本替换及代码仅生效账单区问题

我来帮你分析下为啥只有账单州的文本改了，配送州没变化：

WooCommerce的配送地址字段默认是隐藏的，只有当用户勾选「使用不同的配送地址」这个选项后，配送州（#shipping_state）的元素才会被动态渲染到页面里。你的脚本是在document ready时执行的，这时候配送州的选择框还没出现在DOM中，自然找不到这个元素，也就没法替换它的默认选项文本啦。

给你调整下代码，解决这个问题：

function ea_custom_script_woo_checkout(){
    if(is_checkout()){
        ?>
        <script type="text/javascript">
            // 封装替换逻辑成函数，方便重复调用
            function replaceStatePlaceholder() {
                jQuery('#billing_state option, #shipping_state option').each(function() {
                    var text = jQuery(this).text();
                    jQuery(this).text(text.replace('Seleziona un\'opzione…', 'Seleziona una provincia'));
                });
            }

            jQuery( document ).ready(function() {
                // 页面加载时先处理账单州
                replaceStatePlaceholder();
                
                // 监听配送地址勾选框的变化，当用户勾选后执行替换
                jQuery('input#ship-to-different-address-checkbox').on('change', function() {
                    // 延迟一点确保字段已渲染
                    setTimeout(replaceStatePlaceholder, 100);
                });

                // 监听WooCommerce结账页面的更新事件，防止动态加载后失效
                jQuery(document.body).on('updated_shipping_method', function() {
                    replaceStatePlaceholder();
                });
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'ea_custom_script_woo_checkout');

关键调整点说明： #

• 把替换逻辑封装成了replaceStatePlaceholder函数，这样可以在多个场景下重复调用
• 监听了「使用不同配送地址」复选框的change事件，用户勾选后延迟执行替换（确保配送字段已经渲染完成）
• 监听了WooCommerce的updated_shipping_method事件，应对一些主题或插件动态更新配送字段的情况

这样修改后，不管是账单州还是动态出现的配送州，默认选项文本都会被正确替换啦。

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