Displaying product thumbnail and attribute in Woocommerce cart and checkout

强颜欢笑 提交于 2019-12-01 11:45:27

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!