在Woocommerce购物车和结帐中显示产品缩略图和属性 [英] Displaying product thumbnail and attribute in Woocommerce cart and checkout

问题描述

我正在Woocommerce结帐表中播放产品属性，请参阅我之前的问题：

---

代码基于以下相关答案：

在Woocommerce购物车和结帐中显示产品缩略图和属性

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?

解决方案

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

这篇关于在Woocommerce购物车和结帐中显示产品缩略图和属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！