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/

Hello David! Thank you very much!

I added the code and it worked perfectly, however the product title does not look very good.

I mean the alignment.

Here I show you a screenshot: https://mega.nz/#!jskyEAaY!OFnyfPC84GH8KQCePFsJreaUVy4mYa_DtuAy-0lM-tM

Could you help me with that?

Thank you!

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;
}

Hello david! It worked, but now the second column (Subtotal) is left with very little space.

Here you can see the screenshot: https://mega.nz/#!f0tAAaQS!ntYIe_N6jDiOs9L-nAenmm6LAkec9HS0JA_-vuFIYpQ

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;
}

Hi David, these codes served to correct the problem of the subtotal column.

But again the product title is misaligned again.

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

Hello david! I added the codes again but everything remained the same.

Thanks for your help.

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.

Hello david! I have added the codes again, please check.

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;
}

Hello david! Thanks for all the help.

I have put the code and it breaks several styles of the cart and checkout.

Anyway I thank you very much for trying to help me with this.

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.

Hello Tom! If it really is something that WooCommerce does not do by default and Shopify wins on this.

However this feature is important for e-commerce sites.

It would be nice if you had it in mind for a future GPP update.