You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将WooCommerce订单元数据值显示在只读输入文本框中?

在WooCommerce后台订单页面将自定义字段设为只读输入框的方法

嘿,我来帮你搞定这个问题!你当前用的代码是在WooCommerce后台订单页面的账单地址后展示自定义字段值,但目前只是纯文本形式。要把它改成只读的文本框,只需要调整输出HTML的部分,把原来的纯文本输出替换成带有readonly属性的<input>标签就可以了。

修改后的完整代码如下:

add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta($order){
    $my_custom_field = get_post_meta( $order->get_id(), '_my_field_slug', true ); // 注意:建议用get_id()替代id,WooCommerce新版本中order->id已被弃用
    if ( ! empty( $my_custom_field ) ) {
        echo '<p><strong>'. __("My Field", "woocommerce").':</strong> 
        <input type="text" value="' . esc_attr( $my_custom_field ) . '" readonly="readonly" style="width: 250px; margin-left: 10px;" /></p>';
    }
}

关键修改说明:

  • 替换为只读输入框:把原来直接输出字段值的部分改成<input>标签,并添加readonly="readonly"属性,确保用户无法编辑内容。
  • 安全转义:用esc_attr()包裹字段值,避免潜在的XSS安全问题,这是WordPress/WooCommerce开发的最佳实践。
  • 兼容性优化:将$order->id替换为$order->get_id(),适配WooCommerce新版本的规范,避免弃用警告。
  • 可选样式:添加了简单内联样式让输入框显示更协调,你可以根据需求调整宽度或其他样式。

这样修改后,你的自定义字段就会以只读文本框的形式展示在后台订单页面的账单地址区域啦!

内容的提问来源于stack exchange,提问作者Acephalia

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.13 06:38:34