Changing WooCommerce Custom Order Status Icons October 09 2014
If you’re using the official WooCommerce iPhone app, you may have noticed that custom order statuses have their own icon when displayed in your order details:
Custom Order Status Icon
These handy little icons (designed by Jay Koster) can be added to your WooCommerce “Orders” page as well so they’re consistent throughout your shop and the app.
Here’s a quick guide on how to add WooCommerce custom order status icons. You don’t have to be using the iPhone app to be able to these icons for your custom order statuses, so feel free to use them in any WooCommerce store.
WooCommerce Custom Order Statuses
First, you can easily add your own order statuses to your WooCommerce shop with a tiny bit of code. We’ve written a tutorial on creating WooCommerce custom order statuses at SellwithWP.com if you’d like to add one of your own.
That example adds “Building” and “Awaiting shipment” order statuses, so let’s use these in our test shop.
Default Custom Status Display
When you add a custom order status to WooCommerce, you may notice that the order will show up in your “Orders” list, but that no handy visual indicator of the status is shown:
This can throw a wrench in shop management, as you have to either edit the order or hover over the missing icon to see what status the order has. You could also filter your orders by status to see a list of total orders per status.
Let’s walk through how we would add a new icon that will display for all WooCommerce custom order statuses, but you could extend this to use your own icons for each new custom status.
Add a Custom Order Status Icon
Let’s go through a tutorial on how to add a custom order status icon using the same icon as the iPhone app. You could use your own icon if desired, and can even create a new one for each of your custom order statuses.
- First, upload your icon to your site’s media folder. You can save and use this icon if you’d like:
Just right-click and hit “Save Image As…”.
- Now get the URL of that attachment by clicking on your media file to edit it. You can copy the URL here:
- Add a custom code snippet to your site – we’ve described best practices for this here. You’ll add a snippet like this:
Note a couple of things:
- My custom order status is targeted with the
.column-order_status mark.awaiting-shipmentpart. Change this tomark.your-statususing your order status name (hyphenated if more than one word). - I’m adding the same icon for both custom statuses, but you can repeat this for each custom status if you’d like to use different icons.
- Add the URL of your media file in the
content: url();part. Notice that I didn’t needhttp://www.mysite.com/– I can just start from the/wp-content/part.
- My custom order status is targeted with the
- Check out your orders list. You’ve now got shiny new WooCommerce custom order status icons!
Adding your custom status icons is simple, and is a great way to help you see your order statuses at a glance when viewing them in your WooCommerce shop. We’d love to hear about it in the comments if you use this tip!
Please note that the iPhone app will not pull any custom icons in – the standard custom status icon will still be used.
The post Changing WooCommerce Custom Order Status Icons appeared first on SkyVerge.