[Support request] Show product image at checkout

Hi there,

requires some custom work, but luckily this guy already figured it out:

https://www.techiesandesh.com/woocommerce-show-product-image-checkout-page/

Edit this line to remove the inline styles:

<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">

ie.
<div class="ts-product-image">

Then add this CSS:

.woocommerce table.shop_table td.product-name {
    display: flex;
}
.ts-product-image {
    flex: 0 0 50px;
    margin-right: 5px;
}

try this snippet instead:

add_filter( 'woocommerce_cart_item_name', 'db_product_image_on_checkout', 10, 3 );
 
function db_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( array( 50, 50 ) );
 
    /* Add wrapper to image and add some css */
    $image = '<span class="db-product-image">'
                . $thumbnail .
            '</span>'; 
    $name = '<span class="db-product-name">' . $name . '</span>';
    /* Prepend image to name and return it */
    return $image . $name;
}

And this CSS:

.db-product-image img {
    vertical-align: middle;
    padding-right: 10px;
}

If you can add the code in – i added some extra HTML/Classes that may ( or may not ) allow me to correct that.

I need you to add back the code so i can look and see if the problem can be fixed, not sure as tables are a pain in the backside.

Due to the variable sized content there probably isn’t a perfect solution, you can try this CSS instead of that i provided above:

.woocommerce table.shop_table td.product-name {
    display: grid;
    grid-template-columns: 40px auto;
    min-width: 180px;
}
.db-product-image {
    margin-right: 10px;
}

This is likely why it’s not a thing by default in WooCommerce. Wonder if there are any examples using WooCommerce out there we can check out. That way we can just copy the code.