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

【问题标题】：Displaying product thumbnail and attribute in Woocommerce cart and checkout在 Woocommerce 购物车和结帐中显示产品缩略图和属性
【发布时间】：2018-08-24 17:18:06
【问题描述】：

我正在我的 Woocommerce 结帐表中显示产品属性，请参阅我之前的问题：Show Woocommerce taxonomy in emails

我还想展示产品图片，所以我的理想是：产品图片在左侧，产品名称旁边，下一行是产品数量，然后是属性。如果我使用这个功能

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

该属性不再显示。如何同时显示两者？

【问题讨论】：

标签： php wordpress woocommerce cart checkout

【解决方案1】：

更新

下面会在产品名称旁边显示产品图片，下面是产品属性：

在结帐时，购物车商品数量在产品名称之后，然后在产品名称之后不能添加任何内容。产品属性可以添加为自定义购物车项目数据，使用另一个挂钩。

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

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

如果需要，您应该需要为显示的产品属性设置样式，具体取决于您在主题中和您自己进行的现有 CSS 自定义。

【讨论】：

display:inline-block 不起作用。浏览器（Firefox）不使用它，我也尝试过！important，没有运气......
代码可以...我已删除此 CSS 规则，因为它取决于您现有的 CSS 样式自定义，需要由您完成。由于结帐页面中附加到产品名称的数量，实际上没有其他选择。
@LoicTheAztec 这适用于桌面，但不会出现在 IOS 移动浏览器上。有任何想法吗？谢谢！

【解决方案2】：

我们可以使用 CSS 在 Woocommerce Cart 中显示图像缩略图：

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

它适用于我的网站

【讨论】：