Magento 2 Order Status Color

A Magento 2 module that allows you to customize order status colors in the admin panel. Add visual color badges to order statuses for better order management and quick status identification.

Developed by Rollpix

Features

• Visual Color Picker - Easy-to-use color palette with 24 predefined colors + custom color picker
• Color Column in Status Grid - See all configured colors at a glance in Stores > Order Status
• Colored Status Badges - Order status displayed as colored badges in the Orders grid
• Works with All Statuses - Compatible with native Magento statuses and custom ones
• Automatic Background - Background color calculated automatically (15% opacity of main color)
• No Core Modifications - Uses plugins and layout XML, no core file changes
• Mage-OS Compatible - Fully compatible with Mage-OS distributions

Compatibility

| Platform | Versions | |----------|----------| | Magento Open Source | 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8 | | Adobe Commerce | 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8 | | Mage-OS | 2.0.x, 2.1.x | | PHP | 7.4, 8.0, 8.1, 8.2, 8.3, 8.4 |

Screenshots

Color Picker in Status Form

The color picker includes a palette of predefined colors and a custom color picker for any HEX color.

Orders Grid with Colored Badges

Order statuses are displayed as colored badges for quick visual identification.

Order Status Grid with Color Column

View all configured colors in the Order Status management grid.

Requirements

• Magento 2.4.4+ / Mage-OS 2.0+
• PHP 7.4 or higher (including PHP 8.4)

Installation

Via Composer (Recommended)

composer require rollpix/module-orderstatuscolor

Enable the Module

php bin/magento module:enable Rollpix_OrderStatusColor
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Manual Installation

1. Create directory app/code/Rollpix/OrderStatusColor
2. Download and extract the module files into that directory
3. Run the enable commands above

Configuration

Setting Up Status Colors

1. Navigate to Stores > Settings > Order Status in the Magento Admin
2. Click on any existing status to edit, or create a new status
3. You will see a new Status Color field with:
   • A palette of 24 predefined colors (click to select)
   • A custom color picker for any color
   • A text field to enter HEX codes manually (e.g., #FF5733)
4. Select or enter your desired color
5. Click Save Status

Viewing Colors

• Order Status Grid (Stores > Order Status): A new "Color" column shows the configured color swatch and HEX code
• Orders Grid (Sales > Orders): The Status column displays colored badges

Color Format

• Use 6-digit HEX format: #RRGGBB (e.g., #FF5733)
• 3-digit HEX is also supported: #RGB (e.g., #F53)
• Leave empty for default gray color (#303030)

Predefined Color Palette

The module includes 24 carefully selected colors:

| Color | HEX | Use Case | |-------|-----|----------| | Green | #2ECC71 | Complete, Success | | Blue | #3498DB | Processing, In Progress | | Red | #E74C3C | Cancelled, Failed | | Orange | #E67E22 | Pending, On Hold | | Yellow | #F1C40F | Warning, Attention | | Purple | #9B59B6 | Special, VIP | | Gray | #7F8C8D | Closed, Archived |

Technical Details

Database Changes

The module adds a status_color column (VARCHAR 7) to the sales_order_status table to store HEX color codes.

Module Structure

Rollpix/OrderStatusColor/
├── Block/
│   └── Adminhtml/Order/Status/Grid/Renderer/
│       └── Color.php                 # Renders color swatch in status grid
├── Model/
│   └── StatusColorProvider.php       # Provides status colors from database
├── Plugin/
│   ├── Block/Adminhtml/Order/Status/Edit/
│   │   └── Form.php                  # Adds color picker to status form
│   └── Controller/Adminhtml/Order/Status/
│       └── Save.php                  # Saves color when status is saved
├── ViewModel/
│   └── StatusColors.php              # Generates dynamic CSS for badges
├── etc/
│   ├── adminhtml/
│   │   └── di.xml                    # Plugin declarations
│   ├── db_schema.xml                 # Database schema
│   ├── db_schema_whitelist.json
│   └── module.xml                    # Module declaration
├── view/adminhtml/
│   ├── layout/
│   │   ├── sales_order_index.xml     # Adds CSS to orders grid
│   │   └── sales_order_status_index.xml  # Adds color column to status grid
│   ├── templates/
│   │   └── status-colors.phtml       # Dynamic CSS generation
│   ├── ui_component/
│   │   └── sales_order_grid.xml      # Custom status column component
│   └── web/
│       ├── css/
│       │   ├── source/_module.less   # Base badge styles
│       │   └── status-grid.css       # Status grid styles
│       ├── js/
│       │   ├── grid/columns/select.js    # Custom grid column
│       │   └── status-colors.js          # Color initialization
│       └── template/ui/grid/cells/
│           └── status.html           # Knockout template for badges
├── composer.json
├── registration.php
└── README.md

Troubleshooting

Colors not showing in Orders grid

1. Clear all caches: php bin/magento cache:flush
2. Deploy static content: php bin/magento setup:static-content:deploy -f
3. Clear browser cache

Color picker not appearing in status form

1. Recompile DI: php bin/magento setup:di:compile
2. Clear generated code: rm -rf generated/code/*
3. Flush cache: php bin/magento cache:flush

Column not showing in Status grid

1. Clear layout cache: php bin/magento cache:clean layout
2. Clear full page cache: php bin/magento cache:clean full_page

Uninstallation

php bin/magento module:disable Rollpix_OrderStatusColor
composer remove rollpix/module-orderstatuscolor
php bin/magento setup:upgrade
php bin/magento cache:flush

Note: The status_color column will remain in the database. To remove it completely, run:

ALTER TABLE sales_order_status DROP COLUMN status_color;

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Support

• Issues: GitHub Issues
• Email: info@rollpix.com
• Website: rollpix.com

License

This module is licensed under the MIT License - see the LICENSE file for details.

Changelog

1.0.0

• Initial release
• Color picker with 24 predefined colors
• Custom color picker support
• Color column in Order Status grid
• Colored badges in Orders grid
• Full compatibility with:
  • Magento 2.4.4 - 2.4.8
  • Mage-OS 2.0.x - 2.1.x
  • PHP 7.4 - 8.4

Made with love by Rollpix