WooCommerce CSS 帮助更改订单备注输入框的大小

Question

我正在尝试更改 WooCommerce 管理员编辑订单页面中“添加注释”输入框的高度大小

截图如下：

我经常需要调整这个框的大小，我希望高度约为 200 像素而不是 50。

元素是 textarea#add_order_note.input-文本

.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 标准函数 wp_add_inline_style()

将样式覆盖添加到现有样式 sheet

admin_enqueue_scripts 是当 enqueuing scripts and styles 用于管理面板时使用的正确挂钩。尽管名称如此，但它用于对脚本和样式进行排队。

Answer 3

在css中：

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

Answer 4

鉴于这是您希望通过插件更新、主题更新等方式保留的更改。它应该在子主题的 CSS 文件中进行。如果您不确定我的意思，我强烈建议您在继续开发之前阅读有关使用子主题的内容。有a tutorial from Woocommerce about this as well, besides those found on Wordpress.org.

另一种选择是为 CSS 更改设计的插件，即 Jetpack，如 Woocommerce Best Practices Documentation 中所述。

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

WooCommerce CSS 帮助更改订单备注输入框的大小

WooCommerce CSS help in changing size of order note input box

css

woocommerce

hook-woocommerce