WooCommerce 2.5 is on its way. That introduces a filter for $note_classes
which was missing in previous version. Once that ships, you can use following code which adds css classes to order note containers. Then you can use those classes to apply colors. You need to put this in your functions.php file.
function woo_process_order_note_classes($note_classes, $note){
$per_note_status = explode('to ', $note->comment_content );
switch ($per_note_status[1]) {
case 'Pending Payment.':
$note_classes[] = 'pending-note';
return $note_classes;
break;
case 'Processing.':
$note_classes[] = 'processing-note';
return $note_classes;
break;
case 'On Hold.':
$note_classes[] = 'onhold-note';
return $note_classes;
break;
case 'Completed.':
$note_classes[] = 'completed-note';
return $note_classes;
break;
case 'Cancelled.':
$note_classes[] = 'cancelled-note';
return $note_classes;
break;
case 'Refunded.':
$note_classes[] = 'refunded-note';
return $note_classes;
break;
case 'Failed.':
$note_classes[] = 'failed-note';
return $note_classes;
break;
default:
return get_comment_meta( $note->comment_ID, 'is_customer_note', true ) ? array( 'customer-note', 'note' ) : array( 'note' );
break;
}
}
add_filter('woocommerce_order_note_class', 'woo_process_order_note_classes', 10, 2);
function load_woo_order_note_css() {
global $current_screen;
if ( "shop_order" == $current_screen->post_type ) {
wp_register_style( 'order-note-style', get_stylesheet_directory_uri() . '/admin/order-note.css' );
wp_enqueue_style( 'order-note-style' );
}
}
add_action( 'admin_enqueue_scripts', 'load_woo_order_note_css', 11 );
Also don’t forget to create order-note.css file. Below is css which I used:
.note.pending-note .note_content { background: #993300; color: #ffffff; }
.note.pending-note .note_content:after { border-color: #993300 transparent; }
.note.processing-note .note_content { background: #00FF00; color: #000000; }
.note.processing-note .note_content:after { border-color: #00FF00 transparent; }
.note.onhold-note .note_content { background: gray; color: #ffffff;}
.note.onhold-note .note_content:after { border-color: gray transparent; }
.note.completed-note .note_content { background: #003300; color: #ffffff; }
.note.completed-note .note_content:after { border-color: #003300 transparent; }
.note.cancelled-note .note_content { background: #280000 ; color: #ffffff; }
.note.cancelled-note .note_content:after { border-color: #280000 transparent; }
.note.refunded-note .note_content { background: #0066FF; color: #ffffff; }
.note.refunded-note .note_content:after { border-color: #0066FF transparent; }
.note.failed-note .note_content { background: #CC0000; color: #ffffff; }
.note.failed-note .note_content:after { border-color: #CC0000 transparent; }