Strange displayed style for "manual" Woocommerce custom order status

Question

I'm using the following code to create a new custom order status for Woocommerce. The problem I have is that in the admin, the status shows up as unstyled. How can I style the custom status in a similar way to how "Processing" is?

/* Adding a new custom order status */
function register_manual_order_status() {
    register_post_status( 'wc-manual', array(
        'label'                     => 'Manual Order',
        'public'                    => true,
        'exclude_from_search'       => false,
        'show_in_admin_all_list'    => true,
        'show_in_admin_status_list' => true,
        'label_count'               => _n_noop( 'Manual order (%s)', 'Manual order (%s)' )
    ) );
}
add_action( 'init', 'register_manual_order_status' );
// Add to list of WC Order statuses
function add_manual_to_order_statuses( $order_statuses ) {

    $new_order_statuses = array();

    // add new order status after processing
    foreach ( $order_statuses as $key => $status ) {

        $new_order_statuses[ $key ] = $status;

        if ( 'wc-processing' === $key ) {
            $new_order_statuses['wc-manual'] = 'Manual';
        }
    }

    return $new_order_statuses;
}
add_filter( 'wc_order_statuses', 'add_manual_to_order_statuses' );

Answer 1

Don't use wc-manual slug as manual slug is already reserved in WooCommerce and displays an arrow. Instead change your status slug for example to wc-manual-order and the arrow will be replaced by the status name as desired.

So your code will be:

// Add a custom order status
add_action( 'init', 'register_manual_order_status' );
function register_manual_order_status() {
    register_post_status( 'wc-manual-order', array(
        'label'                     => __('Manual Order'),
        'public'                    => true,
        'exclude_from_search'       => false,
        'show_in_admin_all_list'    => true,
        'show_in_admin_status_list' => true,
        'label_count'               => _n_noop( 'Manual order (%s)', 'Manual order (%s)' )
    ) );
}

// Add Custom order status after processing on order statuses dropdown
add_filter( 'wc_order_statuses', 'add_manual_to_order_statuses' );
function add_manual_to_order_statuses( $order_statuses ) {
    $new_order_statuses = array();

    foreach ( $order_statuses as $key => $status ) {
        $new_order_statuses[ $key ] = $status;

        if ( 'wc-processing' === $key ) {
            $new_order_statuses['wc-manual-order'] = __('Manual');
        }
    }
    return $new_order_statuses;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

To change the background color displayed in admin orders list, you will use:
Custom order status background button color in Woocommerce 3.3 admin order list