WooCommerce: Change order summary in header

In every order detail page, there is a summary before the title. See image. This summary has no extra markup or classes. Therefore it’s very hard to style.

The markup looks like this:

<p>Order #<mark class="order-number">O2010037</mark> was placed on <mark class="order-date">22.04.2020</mark> and is currently <mark class="order-status">Completed</mark>.</p>

It would be great if I could change it to something like this:

<p>
    <h3>Order #<mark class="order-number">O2010037</mark></h3>
    <span>was placed on <mark class="order-date">22.04.2020</mark> and is currently <mark class="order-status">Completed</mark>.</span>
</p>

I’ve checked the template file order-details.php but couldn’t find anything.

How/where can I find this summary? Is there an hook to change it?

Answer

Please take a copy of woocommerce/templates/myaccount/view-order.php and place in your active theme /woocommerce/myaccount/

You may edit in this file and it will work

<p>
<?php
printf(
    /* translators: 1: order number 2: order date 3: order status */
    esc_html__( 'Order #%1$s was placed on %2$s and is currently %3$s.', 'woocommerce' ),
    '<h3><mark class="order-number">' . $order->get_order_number() . '</mark></h3>', // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    '<span><mark class="order-date">' . wc_format_datetime( $order->get_date_created() ) . '</mark>', // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    '<mark class="order-status">' . wc_get_order_status_name( $order->get_status() ) . '</mark></span>' // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
);
?>
</p>