Why does WooCommerce Order Shortcode Generate Plugin Notice on Custom Thank You Page?

I have created a re-direct to a custom “Thank You” (order-received) page in WooCommerce by using my child theme and functions.php.

The re-direct works as intended and all other shortcodes that I have created works fine, except for this.

When inserting my [order_cost_breakdown] shortcode using Gutenberg on my Thanks page and when placing on order, I get this notice:

Notice: Undefined variable: show_purchase_note in /wp-content/plugins/woocommerce/templates/order/order-details-item.php on line 60

I am not sure what I need to edit in that template to make this work or what I need to change in my shortcode function to make this work.

This is the shortcode function:

function order_cost_breakdown(){

    if ( isset( $_GET['order_id']) && $_GET['order_id'] > 0 ) {

        $order_id = (int) esc_attr( $_GET['order_id'] );

        $order = wc_get_order( $order_id );

        $order_data = $order->get_data();

    ob_start();
    
    ?>

        <div class="woocommerce-account woocommerce-page"><div class="woocommerce">

            <table class="shop_table order_details">

                <thead>

                    <tr>
                        <th class="product-name"><?php _e( 'Product', 'woocommerce' ); ?></th>
                        <th class="product-total"><?php _e( 'Total', 'woocommerce' ); ?></th>

                    </tr>

                </thead>

            <tbody>

        <?php foreach ( $order->get_items() as $item_id => $item ) {

        wc_get_template( 'order/order-details-item.php', array (

            'order' => $order,
            'item_id' => $item_id,
            'item' => $item,
            'product' => apply_filters( 'woocommerce_order_item_product', $item->get_product( $item ), $item ) ) );
        }
    ?>

    <?php do_action( 'woocommerce_order_items_table', $order ); ?>

            </tbody>
        
        <tfoot>

    <?php

        foreach ( $order->get_order_item_totals() as $key => $total ){
    ?>

    <tr>
    
        <th scope="row"><?php echo $total['label']; ?></th>
        <td><?php echo $total['value']; ?></td>
    </tr>

        <?php
    }

    ?>
            </tfoot>
    
        </table>
    
    </div>

</div>

<?php

    return ob_get_clean();
    
    }

}

If someone can help me understand and / or fix this, that would be really helpful.

Answer

As it can be seen in the source code of woocommerce: https://github.com/woocommerce/woocommerce/blob/00e38b51ef9276f0063d9df7796f19b92ca3ff76/templates/order/order-details.php, there is this order level $show_purchase_note, which is transmitted to every item view in the forecast loop. This controls whether product level purchase notes (if any) should be displayed or not. You should do the same:

Figure out its value:

$show_purchase_note    = $order->has_status( apply_filters( 'woocommerce_purchase_note_order_statuses', array( 'completed', 'processing' ) ) );

And send it to every item view in the loop, together with the value of the product’s purchase note (note the last two template arguments):

wc_get_template( 'order/order-details-item.php', array (
            'order' => $order,
            'item_id' => $item_id,
            'item' => $item,
            'product' => apply_filters( 'woocommerce_order_item_product', $item->get_product( $item ), $item ),
            'show_purchase_note' => $show_purchase_note,
            'purchase_note'      => $product ? $product->get_purchase_note() : '',
));