How to output the order status color in a Twig template.
In Craft Commerce each new order has a status associated with it. Commerce ships with the a default status “New.” This is fine and good but to create a workflow with your statuses to trigger emails and show order progress then you’ll want to create your own statuses.
One property of each status is the status color. This status color is used in the Commerce control panel interface via small dots alongside the status name. But we can also access and use those colors in our templates.
Here’s a simple order table that we build in my course Up and Running with Craft Commerce 3.
Notice on the right we have the status name and the text is colored according to the status color we set. Here’s the code to get that:
{{ order.orderStatus.color }}
This outputs a string of the color selected for the status (e.g. “green”).
You can then use that in an inline style tag or as a class name to get the color you need.