Add a custom dynamic QR code image from order variables to Woocommerce thankyou

Question

I am trying to add an img in thankyou.php page in my Woocommerce e-shop. I have done the process with moving the file from /plugins/woocommerce/... into a folder /themes/...

Below you can find the code of the thankyou.php file. It is necessary do it this way because I need some order variables to generate the img (totals and number).

<?php
if ( $order ) :

    do_action( 'woocommerce_before_thankyou', $order->get_id() );
    ?>

    <?php if ( $order->has_status( 'failed' ) ) : ?>

        <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p>

        <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions">
            <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', 'woocommerce' ); ?></a>
            <?php if ( is_user_logged_in() ) : ?>
                <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My account', 'woocommerce' ); ?></a>
            <?php endif; ?>
        </p>

    <?php else : ?>

        <?php wc_get_template( 'checkout/order-received.php', array( 'order' => $order ) ); ?>

        <ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">

            <li class="woocommerce-order-overview__order order">
                <?php esc_html_e( 'Order number:', 'woocommerce' ); ?>
                <strong><?php echo $order->get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
            </li>

            <li class="woocommerce-order-overview__date date">
                <?php esc_html_e( 'Date:', 'woocommerce' ); ?>
                <strong><?php echo wc_format_datetime( $order->get_date_created() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
            </li>

            <?php if ( is_user_logged_in() && $order->get_user_id() === get_current_user_id() && $order->get_billing_email() ) : ?>
                <li class="woocommerce-order-overview__email email">
                    <?php esc_html_e( 'Email:', 'woocommerce' ); ?>
                    <strong><?php echo $order->get_billing_email(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
                </li>
            <?php endif; ?>

            <li class="woocommerce-order-overview__total total">
                <?php esc_html_e( 'Total:', 'woocommerce' ); ?>
                <strong><?php echo $order->get_formatted_order_total(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>
            </li>

            <?php if ( $order->get_payment_method_title() ) : ?>
                <li class="woocommerce-order-overview__payment-method method">
                    <?php esc_html_e( 'Payment method:', 'woocommerce' ); ?>
                    <strong><?php echo wp_kses_post( $order->get_payment_method_title() ); ?></strong>
                </li>
            <?php endif; ?>
        </ul>
        
        <img 
            class="qrcodecz" 
            src="https://api.paylibo.com/paylibo/generator/czech/image?accountNumber=2202681982&amp;bankCode=2010&amp;amount=<?php echo $order->get_subtotal(); ?>&amp;currency=CZK&amp;vs=<?php echo $order->get_order_number() ?>&amp;message=svetvramu.cz&amp;size=200"
            alt="QR platba" 
        />

    <?php endif; ?>

    <?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>
    <?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>

<?php else : ?>

    <?php wc_get_template( 'checkout/order-received.php', array( 'order' => false ) ); ?>

<?php endif; ?>

This particular code is what I am trying to generate but it is not working.

<img 
    class="qrcodecz" 
    src="https://api.paylibo.com/paylibo/generator/czech/image?accountNumber=2202681982&amp;bankCode=2010&amp;amount=<?php echo $order->get_subtotal(); ?>&amp;currency=CZK&amp;vs=<?php echo $order->get_order_number() ?>&amp;message=svetvramu.cz&amp;size=200"
    alt="QR platba" 
/>

There is no changes in the thankyou.page (the order totals are still the same). Am I editing the right page? I suppose yes because of the list which is for sure generated from this file.

Thank you for any hint!

Answer 1

You don't need to override checkout/thankyou.php template file. Instead, you can use the following revised code (replacement):

add_action( 'woocommerce_thankyou', 'display_order_received_qr_code', 10, 1 );
function display_order_received_qr_code( $order_id ) { 
    $order = wc_get_order($order_id);

    printf('<img class="qrcodecz" alt="QR platba" src="%s" />', 
        add_query_arg( array(
            'accountNumber' => '2202681982',
            'bankCode'      => '2010',
            'amount'        => $order->get_subtotal(),
            'currency'      => 'CZK',
            'vs'            => $order->get_order_number(),
            'message'       => 'svetvramu.cz',
            'size'          => 200,
        ), 'https://api.paylibo.com/paylibo/generator/czech/image' ),
    );
}

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

On order received (thankyou) page, you will get something like: