CraftQuest Articles

Tutorials, tips, and thoughts on Craft CMS, modern web development, and more.


Outputting Order Status Colors in Craft Commerce

Posted on Mar 30, 2020 by Ryan Irelan

Reading time: 20 seconds

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.

© 2021 Mijingo, LLC