How to Display Order Status Progress Bar in WooCommerce?

While the order status is usually described in words on the details page, you can also display it via visual representation. The order status progress bar right alongside the order details guide the shoppers throughout the purchase journey and gives them an idea of how many steps might involved in placing the order. This handy addition not only simplifies tracking but also adds a touch of clarity to your shopping experience.

Solution: Display Order Status Progress Bar in order details Page

The code snippet will add the progress bar, sets the progress percentage ($progress_percentage) and status text ($status_text) based on the order status. For example, if the order status is ‘on-hold’, the progress is set to 25% and the status text is ‘On Hold’.

add_action( 'woocommerce_order_details_before_order_table', 'ts_order_status_progress_bar', 10, 1 );
function ts_order_status_progress_bar( $order ) {
    // Get the order status
    $order_status = $order->get_status();

    // Define progress based on order status
    switch ( $order_status ) {
        case 'on-hold':
            $progress_percentage = 25; // Example: 25%
            $status_text = 'On Hold';
            break;
        case 'processing':
            $progress_percentage = 50; // Example: 50%
            $status_text = 'Processing';
            break;
        case 'completed':
            $progress_percentage = 100; // Example: 100%
            $status_text = 'Completed';
            break;
        default:
            $progress_percentage = 0; // Default: 0%
            $status_text = 'UnKnown';
    }

    // Output the progress bar
    echo '<progress max="100" value="' . $progress_percentage . '"></progress>';
    echo '<p>' . $status_text . ' (' . $progress_percentage . '%)</p>';
}

Output

When customers check their order details on the My Account page, they’ll see a progress bar indicating the status of their order. Alongside the status text like ‘Processing,’ they’ll also see the completion percentage (e.g., 50%).

Additionally, you can also show admin added notes in My Account >Orders page for completed orders in WooCommerce.