How can I style the "Backordered: " - text in WP-admin

I need to style the TR element where Woocommerce prints the "Backordered" text in wp-admin, Order edit page, preferably for both the order edit, and for the "order quick view" modal.

My problem is that there are no classes or id to target my css to.

    <table cellspacing="0" >
     <tbody>
//  THIS FOLLOWING TR I NEED TO STYLE
       <tr> 
        <th>Backordered:</th>
          <td><p>2</p></td>
       </tr> 
// EOF
       <tr>
        <th>Cost of goods:</th>
         <td><p>8,17</p></td>
       </tr>
       <tr>
        <th>Purchase price:</th>
         <td><p>8,17</p></td>
       </tr>
     </tbody>
    </table>

I tried using some simple CSS like this:

table.display_meta tr:first-child {
    color: red !important;
}

And that did work, but the problem is that as you can see from the attached image; I print several meta fields per product, so when the order has many orderlines, every first tr child will obviously turn red.

I only want style the backordered line, to make it visible enough so the warehouse don't start the packing process.

I think I need to add some classes, or maybe I can do this using a snippet. But even Google is not my friend here. I can't find any examples of this.

It would also be ok to style the entire <tr > that is wrapped around the entire line if I could address the correct class ID that holds the backordered product.

Anyone?

CodePudding user response：

You can add an additional CSS class to the item's <tr> when the item contains any item meta with a meta key of 'Backordered', via the woocommerce_admin_html_order_item_class filter.

add_filter( 'woocommerce_admin_html_order_item_class', function( $class, $item, $order ) {
    foreach ( $item->get_formatted_meta_data( '_', true ) as $meta_id => $meta_data ) {
        if ( strpos( $meta_data->key, 'Backordered' ) !== false ) {
            $class .= ' backordered-item';
            break;
        }
    }
    return $class;
}, 10, 3 );