WooCommerce自定义结账字段不显示问题求助

你的代码存在两个核心问题导致自定义字段无法显示：

• HTML实体转义错误
  代码里用了<、>、"这类HTML实体字符替代直接的<、>、"符号。在PHP的echo语句中，这些实体字符会被浏览器当作普通文本解析，不会渲染成实际的HTML标签，导致自定义字段的容器和内容都无法正常显示。

• CSS类名拼写错误
  代码中的orm-row-wide是笔误，WooCommerce标准的宽表单字段类名应为form-row-wide，这个错误虽不会直接导致字段消失，但会破坏字段的布局样式。

修正后的代码 #

add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');
function my_custom_checkout_field( $checkout ) {
    
    echo '<div id="my_custom_checkout_field"><h3>'.__('My Field').'</h3>';
                
    woocommerce_form_field( 'my_field_name', array( 
        'type'          => 'text', 
        'class'         => array('my-field-class form-row-wide'), 
        'label'         => __('Fill in this field'), 
        'placeholder'   => __('Enter a number'),
        ), $checkout->get_value( 'my_field_name' ));
    
    echo '</div>';
}

修正后，浏览器会正确解析HTML标签，自定义字段就能在结账页面的订单备注区域下方正常显示。在你确认函数已加载、使用未修改Storefront主题且无冲突插件的前提下，这段代码可正常生效。

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