Displaying product thumbnail and attribute in Wooc

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 image, so my ideal would be: Product image on the left and beside it product name, in the next row product quantity and after that the attribute. If I use this function

    add_filter( 'woocommerce_cart_item_name', add_thumbnail_to_cart_items, 10, 3 );
    function add_thumbnail_to_cart_items( $product_name, $cart_item, $cart_item_key ){ 


    if ( ! is_checkout() ) return $product_name;

    $product     = $cart_item['data']; 
    $thumbnail   = $product->get_image(array( 70, 70)); 

    $opening_div = '<div id="checkout_thumbnail" style="float:left; padding-right:15px;">'; 
    return $opening_div . $thumbnail . '</div> ' . $product->get_name(); 
} 

the attribute is not shown any longer. How can I display both?

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