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!


Have any questions or comments about this article, or ways you think it can be improved?
Join the conversation in the comments below, or sign up for my newsletter to recieve periodic updates!

Tags: , , , ,

5 Responses to “Customize WooCommerce Order Status Icons”

  1. Bryce July 12, 2014 at 20:05 EDT (8:05 PM) #

    Nice one Danny! Do you need to hook it into any action?

    • Danny Santoro July 14, 2014 at 09:57 EDT (9:57 AM) #

      You shouldn’t have to! 🙂 Without hooking anywhere it should load in the header, but you could probably hook it into admin_init : http://codex.wordpress.org/Plugin_API/Action_Reference/admin_init

      Interesting idea Bryce, I’ll have to play with that to see if either way is better!

      • Jason December 4, 2014 at 01:48 EST (1:48 AM) #

        Is there a way to change the icons?

        • Danny Santoro December 4, 2014 at 12:19 EST (12:19 PM) #

          Hey Jason!

          That’s a very good question. The icons are using a custom font by WooThemes so it keeps your site loading – you can either add your own custom font or use static images (which I don’t particularly suggest). I’ve updated the blog post to show the image method, but the new font icon method deserves a post of its own – I’ll try and work on that when I can 🙂

  2. maksoks.com May 18, 2015 at 16:54 EDT (4:54 PM) #

    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’);

Leave a Reply to Jason Cancel reply

%d bloggers like this: