Add HTML/CSS to order statuses on front and backend in WooCommerce-CodePudding

I've been trying to add CSS to woocommerce order statuses. The first method was to rename the order statuses with a function and add HTML tags to each one.

This solution works for the frontend (my account -> orders), but creates display issues in the backend:

add_filter( 'wc_order_statuses', 'ts_rename_order_status_msg', 20, 1 );
function ts_rename_order_status_msg( $order_statuses ) {
     $order_statuses['wc-completed']       = _x( '<div >Purchuased</div>', 'Order status', 'woocommerce' );
     $order_statuses['wc-processing']      = _x( 'Processing', 'Order status', 'woocommerce' );
     $order_statuses['wc-on-hold']         = _x( 'Waiting', 'Order status', 'woocommerce' );
     $order_statuses['wc-pending']         = _x( 'Deleted', 'Order status', 'woocommerce' );    
     
     return $order_statuses;
}

So I went looking for a different solution and came across this post from LoicTheAztec: Custom order status background button color in Woocommerce 3.3 admin order list

The solution works for the backend and I was wondering if the same could be done for the frontend (my account > orders). So I tried to do something like this.

add_action('admin_head', 'styling_admin_order_list' ); // Here I don't know what to replace
function styling_admin_order_list() {
    global $pagenow, $post; Here I don't know what to replace

    if( $pagenow != 'my-orders-page') return; // Exit
    if( get_post_type($post->ID) != 'ID_my-orders-page' ) return; // Exit

    // HERE we set your custom status
    $order_status_completed = 'Completed'; // <==== HERE
    ?>
    <style>
        .order-status.status-<?php echo sanitize_title( $order_status_completed ); ?> {
            background: #d7f8a7;
            color: #0c942b;
        }
    </style>
    <?php
}

Unfortunately without the desired result, any advice?

CodePudding user response：

1) For the frontend part you can use the woocommerce_my_account_my_orders_column_{$column_id} composite hook where {$column_id} need to be replaced by order-status.

This will allow you to rewrite the existing output and add additional HTML as well as the current order status:

function action_woocommerce_my_account_my_orders_column_order_status( $order ) {
    echo '<span >' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
}
add_action( 'woocommerce_my_account_my_orders_column_order-status', 'action_woocommerce_my_account_my_orders_column_order_status', 10, 1 );

Result:

<span >Completed</span>
<span >Processing</span>

2) For the backend part you can use the admin_head action hook, with which you can directly apply CSS via the order status (which is added by default)

function action_admin_head() {
    global $pagenow, $post;

    if ( $pagenow != 'edit.php' ) return; // Exit
    if ( get_post_type( $post->ID ) != 'shop_order' ) return; // Exit

    ?>
    <style>
        /* General */
        .order-status {
            color: #ffffff !important;
        }

        /* Status completed */
        .order-status.status-completed {
            background: #d7f8a7;
        }

        /* Status processing */
        .order-status.status-processing {
            background: #ddaaff;
        }
    </style>
    <?php
}
add_action( 'admin_head', 'action_admin_head' );