Add specific action button icon for custom order status to Woocommerce admin orders

Question

I've added several new statuses and they all work fine, but I do not know how to add them as buttons to/in the preview (the "eye").

Can't find a hook for it either. Any ideas?

Answer 1

First in the following code, I add first a button to admin orders list based on a custom status:

add_filter( 'woocommerce_admin_order_actions', 'add_custom_order_status_actions_button_example', 100, 2 );
function add_custom_order_status_actions_button_example( $actions, $order ) {
    // Your custom status (without "wc-")
    $action_slug = 'custom';

    // Set the action button
    $actions[$action_slug] = array(
        'url'       => wp_nonce_url( admin_url( 'admin-ajax.php?action=woocommerce_mark_order_status&status='.$action_slug.'&order_id=' . $order->get_id() ), 'woocommerce-mark-order-status' ),
        'name'      => __( 'Custom', 'woocommerce' ),
        'action'    => $action_slug,
    );

    return $actions;
}

Then now this following code I assign an icon "the eye" to the order button:

// Set Here the WooCommerce icon for your action button
add_action( 'admin_head', 'add_custom_order_actions_button_css' );
function add_custom_order_actions_button_css() {
    // The key slug defined for your action button
    $action_slug = "custom";

    echo '<style>.wc-action-button-'.$action_slug.'::after { font-family: woocommerce !important; content: "\e010" !important; }</style>';
}

Icon comes from included Woocommerce Icon library

Code goes in function.php file of your active child theme (active theme). Tested and works.

---

Or you can use the included WordPress dashicons icon library

With this CSS rules instead: font-family: dashicons !important; content: "\f177" !important;