Displaying product thumbnail and attribute in Woocommerce cart and checkout

Question

I am isplaying product attributes in my Woocommerce checkout table, see my previous question: Show Woocommerce taxonomy in emails

I also want to show the product ima

Answer 1

Updated

The following will display the product image next to its name and the product attribute below:

In checkout, the cart item quantity comes after the product name, then nothing can be added after the product name. The product attribute can be added after as custom cart item data, using another hook for it.

// cart and checkout inline styles (To be removed and added in your theme's styles.css file)
add_action( 'wp_head', 'custom_inline_styles', 900 );
function custom_inline_styles(){
    if ( is_checkout() || is_cart() ){
        ?><style>
        .product-item-thumbnail { float:left; padding-right:10px;}
        .product-item-thumbnail img { margin: 0 !important;}
        </style><?php
    }
}

// Product thumbnail in checkout
add_filter( 'woocommerce_cart_item_name', 'product_thumbnail_in_checkout', 20, 3 );
function product_thumbnail_in_checkout( $product_name, $cart_item, $cart_item_key ){
    if ( is_checkout() ) {

        $thumbnail   = $cart_item['data']->get_image(array( 70, 70));
        $image_html  = '<div class="product-item-thumbnail">'.$thumbnail.'</div> ';

        $product_name = $image_html . $product_name;
    }
    return $product_name;
}

// Cart item qquantity in checkout
add_filter( 'woocommerce_checkout_cart_item_quantity', 'filter_checkout_cart_item_quantity', 20, 3 );
function filter_checkout_cart_item_quantity( $quantity_html, $cart_item, $cart_item_key ){
    return ' <strong class="product-quantity">' . sprintf( '&times; %s', $cart_item['quantity'] ) . '</strong><br clear="all">';
}

// Product attribute in cart and checkout
add_filter( 'woocommerce_get_item_data', 'product_descrition_to_cart_items', 20, 2 );
function product_descrition_to_cart_items( $cart_item_data, $cart_item ){
    $product_id = $cart_item['product_id'];
    $product = wc_get_product($product_id);
    $taxonomy = 'pa_delivery';
    $value = $product->get_attribute($taxonomy);
    if ($product->get_attribute($taxonomy)) {
        $cart_item_data[] = array(
            'name' => get_taxonomy($taxonomy)->labels->singular_name,
            'value' => $product->get_attribute($taxonomy),
        );
    }
    return $cart_item_data;
}

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

If needed, you should need to style yourself the displayed product attribute, depending on your existing CSS customizations made in your theme and by yourself.

---

The code is based on this related answer:
Displaying product thumbnail and attribute in Woocommerce cart and checkout

Answer 2

We can use CSS to display image thumbnail in Woocommerce Cart :

@media (max-width: 767px) {
    .woocommerce table.shop_table.cart div.product-thumbnail {
        display: block !important;
        width: 75px !important;
        height: auto !important;
    }
}

It works in my website