{"id":1373,"date":"2024-04-19T19:25:50","date_gmt":"2024-04-19T13:55:50","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=1373"},"modified":"2024-11-18T01:21:50","modified_gmt":"2024-11-17T19:51:50","slug":"how-to-set-order-status-column-background-color-in-sales-order-grid-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-set-order-status-column-background-color-in-sales-order-grid-in-magento-2\/","title":{"rendered":"How to Set Order Status Column Background Color In Sales Order Grid in Magento 2.\u00a0"},"content":{"rendered":"\n

Hello Everyone,           <\/p>\n\n\n\n

In this blog, we will learn how to Set the Order Status Column Color In the Sales Order grid in Magento 2.<\/p>\n\n\n\n

There are order statuses like pending, canceled, on hold, processing, etc.<\/p>\n\n\n\n

We add different background colors for different order statuses.<\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step given below to Set The Order Status Column Color in Magento 2<\/a>.\u00a0<\/p>\n\n\n\n

STEPS FOR SET ORDER STATUS COLUMN BACKGROUND COLOR IN MAGENTO 2<\/h2>\n\n\n\n

Step 1: Create sales_order_grid.xml file<\/strong><\/h3>\n\n\n\n

app\/code\/Vendor\/Extension\/view\/adminhtml\/ui_component\/sales_order_grid.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0" encoding="UTF-8"?>\n\n<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n\n\u00a0\u00a0\u00a0\u00a0xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<columns name="sales_order_columns">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<column name="status" component="Vendor_Extension\/js\/grid\/columns\/option">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<settings>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<filter>select<\/filter>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<options class="Magento\\Sales\\Ui\\Component\\Listing\\Column\\Status\\Options"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<dataType>select<\/dataType>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label translate="true">Status<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/settings>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/column>\n\n\u00a0\u00a0\u00a0\u00a0<\/columns>\n\n<\/listing>\n<\/pre><\/div>\n\n\n
Step 2: Create sales_order_index.xml file<\/strong><\/h3>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/adminhtml\/layout\/sales_order_index.xml<\/strong><\/p>\n\n\n
\n<?xml version="1.0"?>\n\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n\n\u00a0\u00a0\u00a0\u00a0xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<update handle="styles"\/>\n\n\u00a0\u00a0\u00a0\u00a0<head>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<css src="Vendor_Extension::css\/orderstatus.css" \/>\n\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\n\u00a0\u00a0\u00a0\u00a0<body>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<referenceContainer name="content">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<uiComponent name="sales_order_grid"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/referenceContainer>\n\n\u00a0\u00a0\u00a0\u00a0<\/body>\n\n<\/page>\n<\/pre><\/div>\n\n\n
Step 3: Create option.js file<\/strong><\/h3>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/adminhtml\/web\/js\/grid\/columns\/option.js<\/strong><\/p>\n\n\n
\ndefine([\n\n\u00a0\u00a0\u00a0\u00a0'underscore',\n\n\u00a0\u00a0\u00a0\u00a0'Magento_Ui\/js\/grid\/columns\/select'\n\n], function (_, Column) {\n\n\u00a0\u00a0\u00a0\u00a0'use strict';\n\n\u00a0\u00a0\u00a0\u00a0return Column.extend({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0defaults: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bodyTmpl: 'Vendor_Extension\/ui\/grid\/cells\/text'\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0getOrderStatusColor: function (row) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (row.status == 'pending') {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'order-pending';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}else if(row.status == 'processing') {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'order-processing';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}else if(row.status == 'complete') {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'order-complete';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}else if(row.status == 'closed') {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'order-closed';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}else if(row.status == 'canceled') {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'order-canceled';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return '#303030';\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0});\n\n});\n<\/pre><\/div>\n\n\n
Step 4: Create text.html file<\/strong><\/h3>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/adminhtml\/web\/template\/ui\/grid\/cells\/text.html<\/strong><\/p>\n\n\n
\n<div class="data-grid-cell-content" data-bind="attr: { class: $col.getOrderStatusColor($row())}" text="$col.getLabel($row())"\/>\n<\/pre><\/div>\n\n\n
Step 5: Create orderstatus.css file<\/strong><\/h3>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/adminhtml\/web\/css\/orderstatus.css<\/strong><\/p>\n\n\n
\n.order-pending {\n\n\u00a0\u00a0\u00a0\u00a0background: #FFB347 none repeat scroll 0 0;\n\n\u00a0\u00a0\u00a0\u00a0border: 1px solid #eb5202;\n\n\u00a0\u00a0\u00a0\u00a0color: #eb5202;\n\n}\n\n.order-processing {\n\n\u00a0\u00a0\u00a0\u00a0background: #E5F7FE none repeat scroll 0 0;\n\n\u00a0\u00a0\u00a0\u00a0border: 1px solid #006bb4;\n\n\u00a0\u00a0\u00a0\u00a0color: #006bb4;\n\n}\n\n.order-complete {\n\n\u00a0\u00a0\u00a0\u00a0background: #d0e5a9 none repeat scroll 0 0;\n\n\u00a0\u00a0\u00a0\u00a0border: 1px solid #5b8116;\n\n\u00a0\u00a0\u00a0\u00a0color: #185b00;\n\n}\n\n.order-closed {\n\n\u00a0\u00a0\u00a0\u00a0background: #f9d4d4 none repeat scroll 0 0;\n\n\u00a0\u00a0\u00a0\u00a0border: 1px solid #e22626;\n\n\u00a0\u00a0\u00a0\u00a0color: #e22626;\n\n}\n\n.order-canceled {\n\n\u00a0\u00a0\u00a0\u00a0background: #f9d4d469 none repeat scroll 0 0;\n\n\u00a0\u00a0\u00a0\u00a0border: 1px solid #e22626;\n\n\u00a0\u00a0\u00a0\u00a0color: #71e226;\n\n}\n\nChange css as per your need.\n<\/pre><\/div>\n\n\n
Step 6: Finally run the below commands<\/strong><\/h3>\n\n\n
\n$ php bin\/magento setup:upgrade\n\n$ php bin\/magento setup:static-content:deploy -f\n\n$ php bin\/magento cache: clean\n\n$ php bin\/magento cache: flush\n<\/pre><\/div>\n\n\n
Step 7: Output:<\/strong><\/h3>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/h2>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Set The Order Status Background Color in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog.<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates on Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>