WooCommerce订单备注无法识别换行符问题求助

问题说明 #

在订单备注栏输入带换行的内容（比如分多行的1、2、3），前端显示时会变成无换行的连续文本，必须手动添加<br />标签才能实现换行。

解决方案 #

方法1：后端用钩子自动转换换行 #

通过WordPress的wpautop()函数自动将换行转换为HTML换行/段落标签，添加以下代码到主题的functions.php文件或自定义插件中：

add_filter( 'woocommerce_order_note', 'convert_order_note_newlines', 10, 2 );
function convert_order_note_newlines( $note_content, $note_args ) {
    // 仅处理客户添加的备注，可选
    if ( isset( $note_args['is_customer_note'] ) && $note_args['is_customer_note'] ) {
        return wpautop( $note_content );
    }
    return $note_content;
}

wpautop()会把单个换行转为<br />，两个连续换行转为<p>标签包裹的段落，适配大多数场景。

方法2：前端JavaScript实时转换 #

如果无法修改后端代码，可通过前端脚本将文本中的换行符替换为HTML换行标签：

document.addEventListener('DOMContentLoaded', () => {
    // 定位订单备注元素，根据实际DOM结构调整选择器
    const customerNotes = document.querySelectorAll('.woocommerce-customer-note p');
    customerNotes.forEach(noteEl => {
        const rawText = noteEl.textContent;
        noteEl.innerHTML = rawText.replace(/\n/g, '<br />');
    });
});

将这段代码添加到主题的自定义JavaScript文件，或通过WordPress后台“外观 > 自定义 > 附加CSS/JS”功能添加。

方法3：排查主题/插件冲突 #

若上述方法无效，可能是主题或其他插件过滤了订单备注的输出：

• 临时切换到WooCommerce官方默认主题（Storefront）测试，若换行恢复正常，说明当前主题的模板或样式存在问题；
• 禁用所有非WooCommerce插件，逐一重新启用排查，找到冲突插件后调整其设置或联系开发者。

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