Customize WooCommerce Order Status Icons

A situation recently came up where a user thought that the WooCommerce Order Status Icons in the Orders page were too small and difficult to distinguish. This could be especially true on older monitors, smaller screens, or even different lighting, so let’s change it up!

What this will achieve is increasing the size of those icons greatly and changing the colors to be a little more visible:

color-switch

In your functions.php file (found in Appearance > Editor > Theme Functions) you would want to copy the code above the closing PHP tag, if displayed:

function wc_order_status_styling() {
 echo '<style>
 .widefat .column-order_status mark.on-hold:after, .widefat .column-order_status mark.completed:after, .widefat .column-order_status mark.cancelled:after, .widefat .column-order_status mark.processing:after {
 font-size: 2em;
 }
 /* Processing Ellipsis */
 .widefat .column-order_status mark.processing:after {
 color: #2529d7;
 content: "\e011";
 }
 /* On-Hold Dash */
 .widefat .column-order_status mark.on-hold:after {
 color: #555555;
 content: "\e033";
 }
 /* Cancelled X */
 .widefat .column-order_status mark.cancelled:after {
 color: #d72525;
 content: "\e013";
 }
 /* Completed Checkmark */
 .widefat .column-order_status mark.completed:after {
 color: #32d725;
 content: "\e015";
 }
 </style>';
}
add_action('admin_head', 'wc_order_status_styling');

You can change the colors by modifying the #xxxxxx numbers and entering any hex number color.

I hope this helps!


Update: December 4, 2014

Thanks to my good buddy Nicola Mustone (who you should all follow on Twitter), he pointed out that newer versions of WordPress weren’t accepting the change. The code above has been altered and should work on all sites moving forward. 🙂

In addition, Jason asked in the comments how you would switch the icon. This is a bit of a complex topic, since how the icons are pulled in now is through a custom font included in the WooThemes installation. You can add your own font such as fontawesome.io (my personal favorite) and edit from there, but you would be making changes to the plugin. Alternatively, you can create 40px*40px lightweight images to add in via CSS. You would upload them into your Media folder and link them, like so:

function wc_order_status_styling() {
echo '<style>
.widefat .column-order_status mark.on-hold:after, .widefat .column-order_status mark.completed:after, .widefat .column-order_status mark.cancelled:after, .widefat .column-order_status mark.processing:after {
font-size: 2em;
}
/* Processing Ellipsis */
.widefat .column-order_status mark.processing:after {
content: url(https://localhost/woo/wp-content/uploads/2014/12/order-processing-40px.png);
}
/* On-Hold Dash */
.widefat .column-order_status mark.on-hold:after {
content: url(https://localhost/woo/wp-content/uploads/2014/12/order-on-hold-40px.png);
}
/* Cancelled X */
.widefat .column-order_status mark.cancelled:after {
content: url(https://localhost/woo/wp-content/uploads/2014/12/order-cancelled-40px.png);
}
/* Completed Checkmark */
.widefat .column-order_status mark.completed:after {
content: url(https://localhost/woo/wp-content/uploads/2014/12/order-completed-40px.png);
}
</style>';
}
add_action('admin_head', 'wc_order_status_styling');

Which would result in a final appearance something like this:

newicons

 

I don’t particularly recommend this method, however – it will be a heavier load on your site and harder to manage. When I get some extra time I’ll create a blog post on how you can hook up new font options, so stay tuned!

P.S. – In the meantime, I’ve uploaded the icons I used for the demo, which you can download here. Enjoy!

5 thoughts on “Customize WooCommerce Order Status Icons”

  1. Added pending info to the functions.

    function wc_order_status_styling() {
    echo ‘
    .widefat .column-order_status mark.on-hold:after, .widefat .column-order_status mark.completed:after, .widefat .column-order_status mark.cancelled:after, .widefat .column-order_status mark.processing:after, .widefat .column-order_status mark.pending:after {
    font-size: 2em;
    }
    /* Processing Ellipsis */
    .widefat .column-order_status mark.processing:after {
    color: #32d725;
    content: “\e011”;
    }
    /* On-Hold Dash */
    .widefat .column-order_status mark.on-hold:after {
    color: #555555;
    content: “\e033”;
    }
    /* Pending Clock */
    .widefat .column-order_status mark.pending:after {
    color: #ffba00;
    content: “\e012”;
    }
    /* Cancelled X */
    .widefat .column-order_status mark.cancelled:after {
    color: #d72525;
    content: “\e013”;
    }
    /* Completed Checkmark */
    .widefat .column-order_status mark.completed:after {
    color: #2529d7;
    content: “\e015”;
    }
    ‘;
    }

    add_action(‘admin_head’, ‘wc_order_status_styling’);

    Reply

Leave a Comment