Product photos appear above list of products at Checkout (Wordpress/WooCommerce)

Question

On my Wordpress website, using WooCommerce, on the Checkout page, I am seeing the photos appear above the list of products at Checkout. How do I make them appear IN the list of products, as shown?

This is what I have at the moment:

add_action('woocommerce_checkout_before_order_review', 'displays_cart_products_feature_image');
function displays_cart_products_feature_image() {
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $item = $cart_item['data'];
        if(!empty($item)){
            $product = new WC_product($item->id);
            // $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'single-post-thumbnail' );
            echo $product->get_image();

            // to display only the first product image uncomment the line bellow
            // break;
        }
    }
}

This is related to Get Cart products id on checkout WooCommerce page, to display product images.

Thanks!

it's because your hook is `woocommerce_checkout_before_order_review` the table is the order review — Reigel Gallarde, Aug 15 '17 at 08:45
How then do I add each product's photo in each product row in the order review? — Euwing Tham, Aug 15 '17 at 13:04

score 1 · Accepted Answer · answered Aug 16 '17 at 01:25

1

Instead of woocommerce_checkout_before_order_review, we can use woocommerce_cart_item_name filter like this:

add_action('woocommerce_cart_item_name', 'displays_cart_products_feature_image', 10, 2 );
function displays_cart_products_feature_image( $cart_item_name, $cart_item ) {

    return ( is_checkout() ) ? $cart_item['data']->get_image() . $cart_item_name : $cart_item_name;

}

what this will do is put the image before the product name. Something like this image below:

Still not what we need right? Yes but it's the closest thing we can get. And just some CSS will fixed the problem.

.woocommerce-checkout-review-order-table .cart_item .product-name img {
    float: right;
}

Will look like this below:

answered Aug 16 '17 at 01:25

Reigel Gallarde

64,198
21
121
139

Great! Please don't forget to accept the answer. :) – Reigel Gallarde Aug 16 '17 at 05:14
It kinda work, but can you look at the last screenshot in my original post? I can't seem to get it on the right side despite using the css code in custom.css. – Euwing Tham Aug 16 '17 at 13:10
I'm not sure what's wrong.. because I can't see your theme's css rules.. – Reigel Gallarde Aug 16 '17 at 21:59

Product photos appear above list of products at Checkout (Wordpress/WooCommerce)

1 Answers1