WooCommerce 用 span 标签替换注册用户的输入字段

Question

我发现以下代码可以禁止注册用户更改结帐字段 billing_email 和 billing_phone：

// Readonly Checkout Billing Fields for Registered Customers
add_action('woocommerce_checkout_fields','readonly_checkout_billing_fields',10,1);
function readonly_checkout_billing_fields( $checkout_fields ){
    $current_user = wp_get_current_user();
    $user_id = $current_user->ID;
    foreach ( $checkout_fields['billing'] as $key => $field ){
        if($key == 'billing_address_1' || $key == 'billing_address_2'){
            $key_value = get_user_meta($user_id, $key, true);
            if( strlen($key_value)>0){
                $checkout_fields['billing']['billing_email']['custom_attributes'] = array('readonly'=>'readonly');
                $checkout_fields['billing']['billing_phone']['custom_attributes'] = array('readonly'=>'readonly');
            }
        }
    }
    return $checkout_fields;
}

但是，在上面的代码中使用inspect 元素时，我可以更改输入value 属性，从而成功提交表单。例如在帐户区域编辑地址和结帐。

这是默认的 WooCommerce 输入字段：

<input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="placeholder@example.com" autocomplete="email">

问题是：如何为上述字段显示 span 标签？

截图示例链接：

1. 默认结帐字段

2. 所需的结帐字段

我尝试了很多在网上冲浪时发现的代码片段都没有成功。