Did you know you can have different colors for WooCommerce order notes based on order status?
I released a small plugin in Jan 2016 which offers this feature. Today this plugin is celebrating 1000 downloads with 200+ active installs. These are not the big numbers at all. But the reviews from the users and a fact that this small feature as a plugin is proving helpful to others, makes me happy 🙂
Story behind the plugin
In December 2015, I was just having a look at WooCommerce support forum and noticed one of the user (tom) had asked if there is any way so that order notes can have different colors based on order status. Since the feature was not available by default, I started checking WooCommerce plugin code, markup of order notes and the css classes applied to it. Looking at markup I thought there must be some filter using which I can append my css class and easily change the background color.
I searched on my local WooCommerce setup but did not find any such filter! It had WooCommerce 2.4.x. I thought its a good opportunity to contribute & introduce such filter which will be very handy in future. So I went to WooCommerce github repository but noticed that Kevin Hagerty had already submitted pull request for the same and it was merged as part of WooCommerce 2.5 Dashing Dolphin milestone.
All the open issues under 2.5 milestone were completed and WooCommerce was set for next major release. I was curious to know if WooCommerce has introduced colored order notes feature in 2.5. To double check I cloned release/2.5 branch on my local and cross checked but did not see any user interface on backend for this feature. Thus it was clear that only the woocommerce_order_note_class filter was introduced but not the backend UI.
So using that filter, I provided a quick solution to Tom and asked him to place that code in theme’s functions.php file mentioning that it will work only with 2.5 and above. Later, I thought this can be built as a small plugin so that other user’s who want the same feature can easily install the plugin instead of copy/pasting the code 🙂