WooCommerce订单状态变更时用户端通知及徽章开发需求

Got it, let's work through this problem step by step. I've built similar notification systems for WooCommerce stores before, so here's a practical approach to get both the top bar admin notification and user profile badge working—with a focus on fixing that tricky badge issue.

First: Top Bar Admin Notification #

We'll hook into WooCommerce's core order status change event to trigger a notice for the admin who updated the order. This part is straightforward:

// Trigger admin notification when order status changes
add_action('woocommerce_order_status_changed', 'send_admin_order_status_notice', 10, 4);
function send_admin_order_status_notice($order_id, $old_status, $new_status, $order) {
    // Only show the notice to users who can manage WooCommerce (admins/shop managers)
    if (!current_user_can('manage_woocommerce')) return;

    add_action('admin_notices', function() use ($order_id, $new_status) {
        $status_label = wc_get_order_status_name($new_status);
        echo '<div class="notice notice-info is-dismissible">
            <p>Order #' . esc_html($order_id) . ' has been updated to <strong>' . esc_html($status_label) . '</strong> status.</p>
        </div>';
    });
}

This will pop up a dismissible notice at the top of the admin dashboard right after an order status is modified.

The Tricky Part: User Profile Badge #

To add a small badge to the user's profile, we need to:

1. Track when an order status changes for a specific user
2. Store that update in the user's metadata
3. Render the badge in their profile page
4. Style it to look like a proper notification badge

Step 1: Track Order Updates in User Meta #

Modify the earlier function to update the user's meta whenever their order status changes:

// Update user meta and send admin notice on order status change
add_action('woocommerce_order_status_changed', 'handle_order_status_updates', 10, 4);
function handle_order_status_updates($order_id, $old_status, $new_status, $order) {
    $user_id = $order->get_user_id();
    if (!$user_id) return; // Skip guest orders if you don't need to track them

    // Send admin notice (same as before)
    if (current_user_can('manage_woocommerce')) {
        add_action('admin_notices', function() use ($order_id, $new_status) {
            $status_label = wc_get_order_status_name($new_status);
            echo '<div class="notice notice-info is-dismissible">
                <p>Order #' . esc_html($order_id) . ' has been updated to <strong>' . esc_html($status_label) . '</strong> status.</p>
            </div>';
        });
    }

    // Track pending updates for the user
    $pending_updates = get_user_meta($user_id, 'unread_order_updates', true);
    $pending_updates = is_array($pending_updates) ? $pending_updates : [];

    // Avoid duplicate entries for the same order
    if (!in_array($order_id, $pending_updates)) {
        $pending_updates[] = $order_id;
        update_user_meta($user_id, 'unread_order_updates', $pending_updates);
        // Optional: Store the new status if you want to display it later
        update_user_meta($user_id, 'order_' . $order_id . '_status', $new_status);
    }
}

Step 2: Render the Badge in User Profile #

Now we'll add the badge to the user's profile page (admin backend view):

// Add notification badge to user profile
add_action('show_user_profile', 'render_order_status_profile_badge');
add_action('edit_user_profile', 'render_order_status_profile_badge');
function render_order_status_profile_badge($user) {
    $unread_updates = get_user_meta($user->ID, 'unread_order_updates', true);
    if (empty($unread_updates) || !is_array($unread_updates)) return;

    $update_count = count($unread_updates);
    ?>
    <h3>Order Status Alerts</h3>
    <table class="form-table">
        <tr>
            <th>
                <span class="order-alert-badge"><?php echo esc_html($update_count); ?></span>
                Unread Order Updates
            </th>
            <td>
                <p>You have <?php echo esc_html($update_count); ?> order(s) with updated statuses. 
                <a href="<?php echo esc_url(get_permalink(get_option('woocommerce_myaccount_page_id')) . 'orders/'); ?>">View your orders</a> to clear this alert.</p>
            </td>
        </tr>
    </table>
    <?php
}

Step 3: Style the Badge #

Add some CSS to make the badge look like a small, attention-grabbing notification:

// Add styles for the profile badge
add_action('admin_head', 'order_badge_styles');
function order_badge_styles() {
    ?>
    <style>
        .order-alert-badge {
            display: inline-block;
            background: #ffb900;
            color: #fff;
            font-size: 11px;
            padding: 1px 6px;
            border-radius: 10px;
            font-weight: 700;
            margin-right: 6px;
            vertical-align: middle;
        }
    </style>
    <?php
}

Step 4: Clear Badge When User Views Orders #

To make the badge disappear once the user checks their orders, add this function to reset the meta:

// Clear unread updates when user views their orders
add_action('template_redirect', 'clear_unread_order_updates');
function clear_unread_order_updates() {
    if (is_user_logged_in() && is_wc_endpoint_url('orders')) {
        $user_id = get_current_user_id();
        delete_user_meta($user_id, 'unread_order_updates');
    }
}

Notes & Troubleshooting #

• If the badge isn't showing up, double-check that the user has orders with status updates, and that the meta key unread_order_updates is being set correctly (you can verify this in the user's meta section in wp-admin).
• For frontend user profiles (if you're using a custom profile page), you can use the woocommerce_account_dashboard hook instead of show_user_profile to render the badge there.
• Adjust the CSS colors/sizing to match your store's design.

Let me know if you hit any snags—we can tweak this further based on your exact setup!

内容的提问来源于stack exchange，提问作者R. Garcia