README

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

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

Configuration

Setting Up Status Colors

Navigate to Stores > Settings > Order Status in the Magento Admin
Click on any existing status to edit, or create a new status
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)
Select or enter your desired color
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

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

Color picker not appearing in status form

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

Column not showing in Status grid

Clear layout cache: php bin/magento cache:clean layout
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.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
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

rollpix / module-orderstatuscolor

Maintainers

Details