I am looking to customize the appearance of the TR element where Woocommerce displays the "Backordered" text in wp-admin on the Order edit page. I would like this styling to apply to both the order edit page and the "order quick view" modal.
The challenge I am facing is that there are no specific classes or IDs to target with my CSS.
<table cellspacing="0" class="display_meta">
<tbody>
// THE FOLLOWING TR NEEDS STYLING
<tr>
<th>Backordered:</th>
<td><p>2</p></td>
</tr>
// END OF FILE
<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 attempted to use basic CSS like this:
table.display_meta tr:first-child {
color: red !important;
}
While this did change the color as intended, it affected every first child TR, which is not desired when multiple meta fields are displayed per product on an order with many orderlines.
https://i.sstatic.net/e5XyC.png
I specifically want to highlight the backordered line to prevent premature packing by the warehouse personnel.
I believe adding some custom classes or utilizing a snippet may be the solution, although I have been unsuccessful in finding relevant examples through search engines.
If possible, styling the entire
<tr class="item">Any suggestions or guidance would be greatly appreciated!