Hello Magento Friends,

Today we will learn Magento 2: How to Change Order Status Text Color in Admin UI Component Grid.

Order status is a part of the order processing workflow that describes the stage of a particular order. The Magento 2 Sales Order Grid has many order statuses like Processing, Closed, Pending, Complete. Magento 2 Admin can even

The default sales order grid displays the order status in black color. To differentiate amongst various order status you can add background color and text color to the order status in Magento 2.

Let’s find out How to Change Order Status Text Color in Admin UI Component Grid in Magento 2

Steps to Change Order Status Text Color in Admin UI Component Grid in Magento 2:

Step 1: Move to the below path

app\code\Vendor\Extension\view\adminhtml\ui_component\sales_order_grid.xml

And add the code mentioned below

Step 2: Next, go to the following path

app\code\Vendor\Extension\view\adminhtml\layout\sales_order_index.xml

Add the below-mentioned code

Step 3: Then, go to the below file path

app\code\Vendor\Extension\view\adminhtml\web\js\grid\columns\custom.js

Now, add the code

Step 4: Now, move to the below path

app\code\Vendor\Extension\view\adminhtml\web\template\ui\grid\cells\text.html

And add the code as follows

Step 5: Finally, go to the below path

app\code\Vendor\Extension\view\adminhtml\web\css\custom.css

Lastly add the below code

Step 6: Once you are done with the above changes, kindly run the below command

Now check the result from the Magento Admin Panel. You can see the Order Status Text Colour has been changed.

order status colour

Conclusion:

Hopefully, all were able to Change Order Status Text Color in Admin UI Component Grid in Magento 2. If you face any issue with the implementation of the above steps, just mention it in the comment box. If you found the article helpful, share it with your Magento Buddies.

Happy Coding

Click to rate this post!
[Total: 7 Average: 4.1]