Question 3218 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce CSS help in changing size of order note input box

I am trying to change the height size of the ‘Add Note" input box in WooCommerce admin edit orders page

  • screenshot below:

enter image description here

I constantly have to resize this box and I would like the height to be approx 200 px instead of 50.

The element is
textarea#add_order_note.input-text

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

I am hoping someone might be able to advise the correct CSS code I need to enter via Appearance – Customize – Additional CSS or perhaps I should be using a code snippet ?

I have made a few different CSS attempts, but I don’t know how to input the code correctly

Tags:

4

Answers


  1. 0

    I found a solution.
    Add this to your functions theme.

    add_action('admin_head', 'customcss');

function customcss() {
  echo '<style>
    #add_order_note {height: 200px !important;}
  </style>';}
    Login or Signup to reply.
  2. 0

    Add the below code snippet to your active theme 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');

    Tested OK with WooCommerce 6.3. Adding the style override to an existing style sheet can be done using the WP standard function wp_add_inline_style()

    admin_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles.

    Login or Signup to reply.
  3. 0

    In css:

    textarea#add_order_note {
 width:100%;
 height: 200px;
 resize: none;
}
    Login or Signup to reply.
  4. 0

    Seeing as this is a change you want to persist through plugin updates, theme updates, etc. It should be made within the CSS file of your child theme. If you’re unsure what I mean by that, I highly recommend you read up on using a child theme before any continued development. There is a tutorial from Woocommerce about this as well, besides those found on WordPress.org.

    Another alternative is a plugin designed for CSS alteration, i.e. Jetpack, as mentioned in the Woocommerce Best Practices Documentation.

    While there are many ways to accomplish this, adding a snippet into your functions.php isn’t ideal from a design and maintainability perspective. That should be reserved for logical (functional, business logic, whatever term you choose) changes, rather than layout (view, display, etc) changes. WordPress is built on the principles of MVC and it’s best to maintain that logical separation of code whenever possible. Even in "Appearance – Customize – Additional CSS" is better than in functions.php – although I prefer to avoid using that altogether, as it can quickly become cluttered and difficult to maintain.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search