Woocommerce 3.3后台订单列表自定义订单状态按钮背景色设置

Hey there! I’ve dealt with this exact problem when working with custom WooCommerce order states in the updated order dashboard, so let’s get your "In Progress" status looking exactly how you want it.

Step 1: Confirm Your Custom Status Setup (If Needed) #

First, make sure your "In Progress" status is registered correctly. If you used code to create it, here’s a solid reference for the right setup (skip this if your status is already visible in the dashboard):

// Register the "In Progress" order status
add_action( 'init', 'register_in_progress_order_status' );
function register_in_progress_order_status() {
    register_post_status( 'wc-in-progress', array(
        'label'                     => 'In Progress',
        'public'                    => true,
        'exclude_from_search'       => false,
        'show_in_admin_all_list'    => true,
        'show_in_admin_status_list' => true,
        'label_count'               => _n_noop( 'In Progress <span class="count">(%s)</span>', 'In Progress <span class="count">(%s)</span>' ),
    ) );
}

// Add the status to order dropdown menus
add_filter( 'wc_order_statuses', 'add_in_progress_to_order_statuses' );
function add_in_progress_to_order_statuses( $statuses ) {
    $new_statuses = array();
    // Insert "In Progress" right after the default "Processing" status
    foreach ( $statuses as $key => $label ) {
        $new_statuses[ $key ] = $label;
        if ( 'wc-processing' === $key ) {
            $new_statuses['wc-in-progress'] = 'In Progress';
        }
    }
    return $new_statuses;
}

Step 2: Assign a Custom CSS Class to Your Status #

The new WooCommerce order interface uses specific CSS classes for its status buttons. We’ll use a filter to attach a unique class to your custom status:

add_filter( 'woocommerce_order_status_classes', 'add_in_progress_status_class' );
function add_in_progress_status_class( $classes ) {
    // Map your status slug to a custom CSS class
    $classes['wc-in-progress'] = 'wc-status-in-progress';
    return $classes;
}

Note: Make sure wc-in-progress matches the slug you used when registering your status (it’s the string inside register_post_status()).

Step 3: Style the Status Button with Your Desired Colors #

Now we’ll add custom CSS to set the background color for your status. We’ll load this style only on WooCommerce order pages to keep things lightweight:

add_action( 'admin_enqueue_scripts', 'custom_in_progress_status_styles' );
function custom_in_progress_status_styles() {
    // Only load this on order-related admin pages
    $current_screen = get_current_screen();
    if ( $current_screen->id === 'edit-shop_order' || $current_screen->id === 'shop_order' ) {
        wp_add_inline_style( 'woocommerce_admin_styles', '
            /* Base style for the In Progress status button */
            .wc-status-in-progress {
                background-color: #ff9800 !important; /* Replace with your desired hex color code */
                color: #ffffff !important; /* Ensure text contrasts with the background */
            }
            /* Hover state for better user experience */
            .wc-status-in-progress:hover {
                background-color: #f57c00 !important; /* Darker shade for hover effect */
            }
        ' );
    }
}

Just swap out the hex codes (#ff9800 and #f57c00) with the exact colors you want for your status button.

How to Add This Code #

• Paste all the snippets into your child theme’s functions.php file (never edit the parent theme directly—child themes keep changes safe during updates)
• Or use a custom code plugin like Code Snippets to add the code without touching theme files.

After adding the code, refresh your WooCommerce orders page—your "In Progress" status should now show up with your custom background color, matching the style of the default status buttons!

内容的提问来源于stack exchange，提问作者yatgirl