WooCommerce CSS有助于更改订单注释框的大小

Question

我正在尝试更改wooCommerce admin编辑订单中的“添加”注释框的高度大小

• ：

我不得不调整此盒子大小，我希望高度约为200 px而不是50。

元素是 textarea＃add_order_note.input -text

.add_note #add_order_note {
width: 100%;
height: 50px;
}

我希望有人可以建议我需要通过外观输入的正确CSS代码 - 自定义 - 其他CSS，或者我应该使用代码片段？

我已经尝试了一些不同的CSS尝试，但是我不知道如何正确输入代码

Answer 1

我找到了一个解决方案。
将其添加到您的功能主题中。

add_action('admin_head', 'customcss');

function customcss() {
  echo '<style>
    #add_order_note {height: 200px !important;}
  </style>';}

Answer 2

将以下代码段添加到您的活动主题 functions.php

/**
 * Add styling to wc admin
 */
function wc_order_styles_update() {

    $custom_css = "
                .add_note #add_order_note{
                        height: 300px !important;
                }";
    wp_add_inline_style('woocommerce_admin_styles', $custom_css);
}

add_action('admin_enqueue_scripts', 'wc_order_styles_update');

使用 woocommerce 6.3 测试的正常。可以使用WP标准函数

admin_enqueue_scripts 是当应在管理面板中使用。尽管有名字，但它用于启动脚本和样式。

Answer 3

在CSS中：

textarea#add_order_note {
 width:100%;
 height: 200px;
 resize: none;
}

Answer 4

看到这是一个更改，您想通过插件更新，主题更新等持续存在。应该在您的孩子主题的CSS文件中进行。如果您不确定我的意思，我强烈建议您在继续开发之前使用子主题阅读。有 woocommerce 的教程好吧，除了在wordpress.org上找到的。

另一种选择是为CSS更改设计的插件，即JetPack，如实践文档。

尽管有很多方法可以实现这一目标，但从设计和可维护性的角度来看，将摘要添加到您的 function.php 并不理想。应该保留用于逻辑（功能性，业务逻辑，无论您选择的术语如何）而不是布局（视图，显示等）更改。 WordPress建立在MVC的原理上，最好尽可能维持代码的逻辑分离。即使在“外观 - 自定义 - 附加CSS”中，也比 functions.php 更好 - 尽管我更喜欢完全避免使用它，因为它可能很快变得混乱且难以维护。