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.
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.
Default settings:
Easy to adjust based on your store’s average order value.
/**
* 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>';
}
}
}
}
Something not working as expected? Need help customizing it for your specific needs?
Have an idea for functionality you're missing on your site? Tell us what you're looking for!
Share it with us! Our community loves learning and growing together.
No comments yet.