Outputting Order Status Colors in Craft Commerce

In Craft Com­merce each new order has a sta­tus asso­ci­at­ed with it. Com­merce ships with the a default sta­tus ​“New.” This is fine and good but to cre­ate a work­flow with your sta­tus­es to trig­ger emails and show order progress then you’ll want to cre­ate your own statuses. 

One prop­er­ty of each sta­tus is the sta­tus col­or. This sta­tus col­or is used in the Com­merce con­trol pan­el inter­face via small dots along­side the sta­tus name. But we can also access and use those col­ors in our templates.

Here’s a sim­ple order table that we build in my course Up and Run­ning with Craft Com­merce 3.

Notice on the right we have the sta­tus name and the text is col­ored accord­ing to the sta­tus col­or we set. Here’s the code to get that:

{{ order.orderStatus.color }}

This out­puts a string of the col­or select­ed for the sta­tus (e.g. ​“green”).

You can then use that in an inline style tag or as a class name to get the col­or you need.