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

Question

我正在我的 Woocommerce 结帐中显示产品属性 table，请参阅我之前的问题：

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

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

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

Answer 1

已更新

以下将在其名称旁边显示产品图片，并在下方显示产品属性：

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

代码进入您的活动子主题（或活动主题）的 function.php 文件。已测试并有效。

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.

代码基于此相关答案：

Answer 2

我们可以使用 CSS 在 Woocommerce 购物车中显示图片缩略图：

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

它在我的网站上有效

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

Displaying product thumbnail and attribute in Woocommerce cart and checkout

php

wordpress

checkout

cart

woocommerce