Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins

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';
        case 'processing':
            $progress_percentage = 50; // Example: 50%
            $status_text = 'Processing';
        case 'completed':
            $progress_percentage = 100; // Example: 100%
            $status_text = 'Completed';
            $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>';


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%).

How to Display Order Status Progress Bar in WooCommerce? - Tyche Softwares

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

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x