WooCommerce后台订单编辑页面添加备注输入框高度修改CSS求助

我来帮你搞定这个问题！调整这个备注输入框的高度其实很简单，下面是具体的解决方法：

正确的CSS代码 #

首先，你给出的默认CSS选择器有点冗余——因为ID在页面中是唯一的，我们可以用更精准的选择器来覆盖默认样式。推荐使用以下代码：

/* 调整WooCommerce后台订单添加备注输入框高度 */
textarea#add_order_note {
    height: 200px !important;
    width: 100%; /* 保留原宽度设置，确保适配后台布局 */
}

加!important是为了确保我们的样式能覆盖WooCommerce的默认样式，毕竟后台的默认CSS可能有更高的优先级。

实现方式（两种可选，推荐第一种） #

方法一：通过「外观-自定义-额外CSS」添加（最简单） #

这是最安全、最易操作的方法，完全不需要编辑主题文件或代码片段：

• 登录WordPress后台，进入「外观」→「自定义」
• 在自定义面板中找到「额外CSS」选项（一般在面板底部位置）
• 把上面的CSS代码粘贴进去，点击「发布」按钮
• 刷新订单编辑页面，就能看到备注框高度已经变成200px了

方法二：使用代码片段（适合进阶需求） #

如果你担心主题更新会丢失设置（不过现在「额外CSS」的内容是存在数据库里的，不会丢失），或者只想在订单编辑页面加载这段CSS，可以用这个方法：
你可以通过主题的functions.php文件，或者使用「代码片段」插件添加以下PHP代码：

add_action('admin_head', 'custom_order_note_textarea_height');
function custom_order_note_textarea_height() {
    // 仅在订单编辑页面加载自定义CSS
    global $pagenow;
    if ($pagenow === 'post.php' && get_post_type() === 'shop_order') {
        ?>
        <style>
            textarea#add_order_note {
                height: 200px !important;
                width: 100%;
            }
        </style>
        <?php
    }
}

这段代码会自动判断当前页面是否是订单编辑页，只有在该页面才会加载我们的自定义CSS，不会影响其他后台页面。

为什么之前的选择器可能无效？ #

你提供的默认选择器textarea#add_order_note.input-text .add_note #add_order_note存在两个问题：

1. 选择器层级错误：.add_note是备注输入框的父容器，正确的层级应该是.add_note textarea#add_order_note，而不是把.add_note放在ID后面
2. 冗余重复：同一个选择器里重复写了#add_order_note，完全没必要，因为ID在页面中是唯一的，直接用textarea#add_order_note就足够精准了

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