'How do I display dynamic product image on Woocommerce checkout (not in order table)?

I'm trying to achieve something like this, but this code obviously renders the image in the order table which due to the way I want to display the image(s) of purchased products, it doesn't work for my use case.

I'm wondering if it's possible to get the image(s) for the products purchased dynamically and then render them inside a div above the 'order details' section? I'm not a PHP developer so I struggle to know what's needed to achieve this kind of functionality.

Here is the code from the example linked above:

add_filter( 'woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3 );
 
function ts_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {
     
    /* Return if not checkout page */
    if ( ! is_checkout() ) {
        return $name;
    }
     
    /* Get product object */
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
 
    /* Get product thumbnail */
    $thumbnail = $_product->get_image();
 
    /* Add wrapper to image and add some css */
    $image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
                . $thumbnail .
            '</div>'; 
 
    /* Prepend image to name and return it */
    return $image . $name;
}

Am I able to use this with an action like this:

add_action('woocommerce_checkout_before_customer_details', 'displays_cart_products_feature_image');

Sorry for being a novice, any help would be greatly appreciated!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source