Highlight High-Value Orders with Visual Indicators

Beginner

✓ Tested

📅 August 24, 2025

⬇️ 0 Downloads

📋 0 Copies

This snippet automatically highlights high-value orders in your WooCommerce admin with visual indicators, making it easy to identify and prioritize your most valuable customers at a glance.

What does this code do?

The snippet adds color-coded backgrounds and star indicators to orders based on their total value. Orders are automatically categorized as regular, high-value, or premium based on customizable thresholds, helping you quickly spot VIP orders that need special attention.

Visual Features:

High-Value Orders ($1000+): Yellow background with gold star ⭐
Premium Orders ($5000+): Blue background with three stars ⭐⭐⭐
Animated Indicators: Pulsing stars draw attention to valuable orders
Hover Effects: Enhanced highlighting when hovering over orders
Color-Coded Borders: 4px left border for quick scanning
Summary Badge: Shows count of high-value orders on page

Benefits:

Instantly identify VIP customers who need priority service
Spot big spenders for special treatment or loyalty programs
Prioritize fulfillment for high-value orders
Better customer segmentation at a glance
Reduce risk of overlooking important orders

Customizable Thresholds:

Default settings:

High Value: $1,000+
Premium: $5,000+

Easy to adjust based on your store’s average order value.

Works with:

HPOS (High-Performance Order Storage)
Legacy WordPress posts storage
All WooCommerce 8.0+ versions
Multi-currency stores

⚠️ Important Warnings

⚠️ Thresholds are in the store's base currency - doesn't account for currency conversion
⚠️ Color highlighting might conflict with other order status colors from plugins
⚠️ Very bright monitors might make yellow background hard to see - adjust if needed
⚠️ Some admin themes might override the colors - use !important if needed
⚠️ The filter dropdown only works with legacy order storage, not HPOS
⚠️ JavaScript required - won't work if JS is disabled in browser
⚠️ Large order lists (500+) might have slight delay in applying colors
⚠️ Custom order statuses might not inherit the highlighting properly

💻 PHP Code

/**
 * Highlight high-value orders in WooCommerce admin
 * Visually distinguish orders based on their total value with colors and indicators
 * Prefix: tpsc_ (TP Snippet Collection)
 */

// ============================================
// CONFIGURATION - Customize thresholds here
// ============================================

// Define value thresholds (change these based on your store's average order value)
if (!defined('TPSC_HIGH_VALUE_THRESHOLD')) {
    define('TPSC_HIGH_VALUE_THRESHOLD', 1000);     // Orders above this are "high value"
    define('TPSC_PREMIUM_VALUE_THRESHOLD', 5000);  // Orders above this are "premium"
}

// ============================================
// ADD VISUAL STYLING TO ORDERS TABLE
// ============================================

add_action('admin_head', 'tpsc_high_value_orders_styles');
function tpsc_high_value_orders_styles() {
    $screen = get_current_screen();
    
    // Only apply to orders pages
    if ($screen && ($screen->id === 'woocommerce_page_wc-orders' || $screen->id === 'edit-shop_order')) {
        $currency = get_woocommerce_currency_symbol();
        ?>
        <style>
            /* High value orders (e.g., $1000+) */
            tr.tpsc-high-value-order {
                background: linear-gradient(to right, #fff8e5 0%, #fffdf8 100%) !important;
                border-left: 4px solid #ffc107 !important;
            }
            
            tr.tpsc-high-value-order:hover {
                background: #fff3cd !important;
            }
            
            tr.tpsc-high-value-order .column-order_total {
                font-weight: 700;
                color: #856404;
            }
            
            /* Premium orders (e.g., $5000+) */
            tr.tpsc-premium-order {
                background: linear-gradient(to right, #e7f3ff 0%, #f5f9ff 100%) !important;
                border-left: 4px solid #007cba !important;
            }
            
            tr.tpsc-premium-order:hover {
                background: #d1e7ff !important;
            }
            
            tr.tpsc-premium-order .column-order_total {
                font-weight: 700;
                color: #004085;
            }
            
            /* Value indicators (stars) */
            .tpsc-value-indicator {
                display: inline-block;
                margin-left: 8px;
                font-size: 16px;
                vertical-align: middle;
                animation: tpsc-pulse 2s infinite;
                cursor: help;
            }
            
            .tpsc-value-indicator.high {
                color: #f39c12;
                text-shadow: 0 0 2px rgba(243, 156, 18, 0.5);
            }
            
            .tpsc-value-indicator.premium {
                color: #3498db;
                font-size: 18px;
                text-shadow: 0 0 3px rgba(52, 152, 219, 0.5);
            }
            
            /* Pulse animation for indicators */
            @keyframes tpsc-pulse {
                0%, 100% { 
                    opacity: 1;
                    transform: scale(1);
                }
                50% { 
                    opacity: 0.7;
                    transform: scale(1.05);
                }
            }
            
            /* Tooltip styling */
            .tpsc-value-badge {
                display: inline-block;
                margin-left: 5px;
                padding: 2px 6px;
                border-radius: 3px;
                font-size: 10px;
                font-weight: 600;
                text-transform: uppercase;
                vertical-align: middle;
            }
            
            .tpsc-value-badge.high {
                background: #ffc107;
                color: #856404;
            }
            
            .tpsc-value-badge.premium {
                background: #007cba;
                color: white;
            }
        </style>
        
        <script>
        jQuery(document).ready(function($) {
            // Process each order row
            $('.widefat tbody tr, #woocommerce-order-items tbody tr').each(function() {
                var $row = $(this);
                var $total = $row.find('.column-order_total .amount, .order_total .amount');
                
                if ($total.length) {
                    // Extract numeric value from price
                    var priceText = $total.text();
                    var value = parseFloat(priceText.replace(/[^0-9.-]+/g, ''));
                    
                    // Add appropriate class and indicator based on value
                    if (value >= <?php echo TPSC_PREMIUM_VALUE_THRESHOLD; ?>) {
                        $row.addClass('tpsc-premium-order');
                        if (!$total.parent().find('.tpsc-value-indicator').length) {
                            $total.after('<span class="tpsc-value-indicator premium" title="Premium Order (<?php echo $currency . number_format(TPSC_PREMIUM_VALUE_THRESHOLD); ?>+)">⭐⭐⭐</span>');
                        }
                    } else if (value >= <?php echo TPSC_HIGH_VALUE_THRESHOLD; ?>) {
                        $row.addClass('tpsc-high-value-order');
                        if (!$total.parent().find('.tpsc-value-indicator').length) {
                            $total.after('<span class="tpsc-value-indicator high" title="High Value Order (<?php echo $currency . number_format(TPSC_HIGH_VALUE_THRESHOLD); ?>+)">⭐</span>');
                        }
                    }
                }
            });
            
            // Add summary badge in header if needed
            var highValueCount = $('.tpsc-high-value-order').length;
            var premiumCount = $('.tpsc-premium-order').length;
            
            if (highValueCount > 0 || premiumCount > 0) {
                var summaryHtml = '<div style="margin: 10px 0; padding: 10px; background: #f0f8ff; border-left: 4px solid #007cba; display: inline-block;">';
                summaryHtml += '<strong>Value Orders on this page:</strong> ';
                if (premiumCount > 0) {
                    summaryHtml += '<span class="tpsc-value-badge premium">' + premiumCount + ' Premium</span> ';
                }
                if (highValueCount > 0) {
                    summaryHtml += '<span class="tpsc-value-badge high">' + highValueCount + ' High Value</span>';
                }
                summaryHtml += '</div>';
                
                $('.wp-header-end').after(summaryHtml);
            }
        });
        </script>
        <?php
    }
}

// ============================================
// ADD INDICATORS TO HPOS ORDERS TABLE
// ============================================

add_action('manage_woocommerce_page_wc-orders_custom_column', 'tpsc_add_value_indicator', 20, 2);
function tpsc_add_value_indicator($column, $order) {
    if ($column === 'order_total') {
        if (!is_a($order, 'WC_Order')) {
            $order = wc_get_order($order);
        }
        
        if ($order) {
            $total = $order->get_total();
            $currency = get_woocommerce_currency_symbol();
            
            if ($total >= TPSC_PREMIUM_VALUE_THRESHOLD) {
                echo '<span class="tpsc-value-indicator premium" title="Premium Order (' . 
                     $currency . number_format(TPSC_PREMIUM_VALUE_THRESHOLD) . '+)">⭐⭐⭐</span>';
            } elseif ($total >= TPSC_HIGH_VALUE_THRESHOLD) {
                echo '<span class="tpsc-value-indicator high" title="High Value Order (' . 
                     $currency . number_format(TPSC_HIGH_VALUE_THRESHOLD) . '+)">⭐</span>';
            }
        }
    }
}

// ============================================
// ADD INDICATORS TO LEGACY ORDERS TABLE
// ============================================

add_action('manage_shop_order_posts_custom_column', 'tpsc_add_value_indicator_legacy', 20, 2);
function tpsc_add_value_indicator_legacy($column, $post_id) {
    if ($column === 'order_total') {
        $order = wc_get_order($post_id);
        
        if ($order) {
            $total = $order->get_total();
            $currency = get_woocommerce_currency_symbol();
            
            if ($total >= TPSC_PREMIUM_VALUE_THRESHOLD) {
                echo '<span class="tpsc-value-indicator premium" title="Premium Order (' . 
                     $currency . number_format(TPSC_PREMIUM_VALUE_THRESHOLD) . '+)">⭐⭐⭐</span>';
            } elseif ($total >= TPSC_HIGH_VALUE_THRESHOLD) {
                echo '<span class="tpsc-value-indicator high" title="High Value Order (' . 
                     $currency . number_format(TPSC_HIGH_VALUE_THRESHOLD) . '+)">⭐</span>';
            }
        }
    }
}

📝 Installation Instructions

INSTALLATION:
1. Copy the entire code
2. Go to WordPress Admin → Appearance → Theme Editor → functions.php
3. Paste at the bottom of the file
4. Save changes
5. Visit WooCommerce → Orders to see highlighted orders

CUSTOMIZING THRESHOLDS:
The most important customization! Adjust based on your store:

Lines 12-13: Change the threshold values
- TPSC_HIGH_VALUE_THRESHOLD: Set to your "good order" amount
- TPSC_PREMIUM_VALUE_THRESHOLD: Set to your "excellent order" amount

Examples by store type:
- Small store: $100 and $500
- Medium store: $500 and $2000
- Luxury store: $5000 and $20000

TO CHANGE COLORS:

High-value orders (yellow theme):
- Line 35: background: #fff8e5 (light yellow)
- Line 36: border-color: #ffc107 (amber)

Premium orders (blue theme):
- Line 47: background: #e7f3ff (light blue)
- Line 48: border-color: #007cba (blue)

TO CHANGE INDICATORS:
- Line 169 & 211: Change ⭐⭐⭐ to your preferred emoji/symbol
- Line 173 & 215: Change ⭐ to your preferred symbol

ADDING MORE TIERS:
To add a "Super Premium" tier ($10,000+):
1. Add new constant: define('TPSC_SUPER_PREMIUM_THRESHOLD', 10000);
2. Copy the premium CSS block and rename classes
3. Add new condition in JavaScript section

TESTING:
1. View your orders list
2. Orders above thresholds should be highlighted
3. Check hover effects work
4. Verify stars appear next to order totals
5. Look for summary badge at top of page

PERFORMANCE NOTE:
The JavaScript runs once on page load, so even with hundreds of orders there's no performance impact.

Highlight High-Value Orders with Visual Indicators

What does this code do?

Visual Features:

Benefits:

Customizable Thresholds:

Works with:

⚠️ Important Warnings

📝 Installation Instructions

📸 Screenshots

📊 Statistics

📋 Requirements

⚡ Quick Actions

Highlight High-Value Orders with Visual Indicators

What does this code do?

Visual Features:

Benefits:

Customizable Thresholds:

Works with:

⚠️ Important Warnings

📝 Installation Instructions

📸 Screenshots

📌 Related Code Snippets

📊 Statistics

📋 Requirements

⚡ Quick Actions