WooCommerce：结账页账单地址字段转标题大小写并持久化问题

问题根源 #

你当前的代码仅处理输入框第一个字符的大小写转换，遇到数字开头的地址时，数字后的单词首字母无法正确大写；且仅依赖前端keyup事件，存在用户直接提交（如按回车）未触发事件的可能，导致提交后数据仍为原始格式。另外，CSS的text-transform: capitalize只是视觉展示效果，不会修改实际提交的表单值。

解决方案 #

需要结合前端实时格式化和后端强制修正，同时用正则处理每个单词的首字母大写，适配数字开头的场景。

1. 前端JS代码（实时格式化） #

替换原有函数，用正则匹配每个单词（包括数字后的单词）实现标题大小写转换，同时绑定表单提交事件确保最后格式化一次：

function wc_checkout_alter_field_input() {
    if (is_checkout()):
        if (!wp_script_is('jquery', 'done')) {
            wp_enqueue_script('jquery');
        }

        wp_add_inline_script('wc-checkout', '
            jQuery(document).ready(function($){
                // 定义标题大小写格式化函数
                function formatTitleCase(str) {
                    // 将整个字符串转为小写，再把每个单词的首字母大写
                    return str.toLowerCase().replace(/\b[a-z]/g, function(match) {
                        return match.toUpperCase();
                    });
                }

                // 实时格式化账单/配送地址字段
                $("#billing_address_1, #shipping_address_1").on("keyup blur", function() {
                    $(this).val(formatTitleCase($(this).val()));
                });

                // 表单提交前最后格式化一次，避免漏处理
                $("form.checkout").on("submit", function() {
                    $("#billing_address_1, #shipping_address_1").each(function() {
                        $(this).val(formatTitleCase($(this).val()));
                    });
                });
            });
        ');
    endif;
}
add_action('wp_enqueue_scripts', 'wc_checkout_alter_field_input');

2. 后端PHP代码（强制修正，防止前端JS被禁用） #

前端JS可能被用户禁用，必须在后端保存订单数据时再做一次格式化，确保数据最终正确：

function wc_force_address_title_case($order_id) {
    $billing_address_1 = get_post_meta($order_id, '_billing_address_1', true);
    $shipping_address_1 = get_post_meta($order_id, '_shipping_address_1', true);

    // PHP版标题大小写格式化函数
    function format_title_case($str) {
        return ucwords(strtolower($str));
    }

    // 更新格式化后的地址
    if (!empty($billing_address_1)) {
        update_post_meta($order_id, '_billing_address_1', format_title_case($billing_address_1));
    }
    if (!empty($shipping_address_1)) {
        update_post_meta($order_id, '_shipping_address_1', format_title_case($shipping_address_1));
    }
}
add_action('woocommerce_checkout_update_order_meta', 'wc_force_address_title_case');

3. CSS样式优化（可选） #

保留原有CSS，补充视觉一致性处理：

#billing_address_1, #shipping_address_1 {
    text-transform: capitalize;
}

效果说明 #

• 前端输入时，无论是数字开头还是纯字母地址，都会实时转换为标题大小写（如123 example st → 123 Example St）
• 订单提交后，后端会再次校验格式化，确保即使前端JS失效，数据依然正确
• 适配大小写锁定或全小写输入场景，最终同步到QuickBooks的地址格式符合要求

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