在 WooCommerce 我的帐户订单列表上显示产品缩略图答案

【问题标题】：Display product thumbnails on WooCommerce My account orders list在 WooCommerce 我的帐户订单列表上显示产品缩略图
【发布时间】：2021-05-14 23:59:53
【问题描述】：

我正在尝试在 WooCommerce 我的帐户 > 订单列表中显示产品缩略图，在订单号旁边。

以下是订单截图

我必须使用什么钩子来显示图像？

我试过Add the product image to Woocommerce my account order view回答代码，但它在单视图订单上显示图像。

【问题讨论】：

标签： php wordpress woocommerce thumbnails orders

【解决方案1】：

更新

您可以使用以下内容在 WooCommerce 我的帐户 > 订单列表中添加产品缩略图，在订单号旁边：

add_action( 'woocommerce_my_account_my_orders_column_order-number', 'my_account_orders_product_thumbnails', 20, 1 );
function my_account_orders_product_thumbnails( $order ) {
    echo '<a href="'. wc_get_endpoint_url('view-order') . $order->get_id()  . '/' . '">' . '#' . $order->get_order_number() . '</a>';

    // Loop through order items
    foreach( $order->get_items() as $item ) {
        $product   = $item->get_product(); // Get the WC_Product object (from order item)
        $thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
        if( $product->get_image_id() > 0 ) {
            echo '&nbsp;' . $thumbnail;
        }
    }
}

或者您可以在订单号之后添加一个带有产品缩略图的新列，例如：

add_filter( 'woocommerce_my_account_my_orders_columns', 'filter_woocommerce_my_account_my_orders_columns', 10, 1 );
function filter_woocommerce_my_account_my_orders_columns( $columns ) {
    $new_column = array( 'order-number' => $columns['order-number']);
    unset($columns['order-number']);

    $new_column['order-thumbnails'] = '';

    return array_merge($new_column, $columns);
}


add_action( 'woocommerce_my_account_my_orders_column_order-thumbnails', 'filter_woocommerce_my_account_my_orders_column_order', 10, 1 );
function filter_woocommerce_my_account_my_orders_column_order( $order ) {
    // Loop through order items
    foreach( $order->get_items() as $item ) {
        $product   = $item->get_product(); // Get the WC_Product object (from order item)
        $thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
        if( $product->get_image_id() > 0 ) {
            echo $thumbnail . '&nbsp;' ;
        }
    }
}

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

【讨论】：

是的，它正在显示图像，但缺少订单号操作链接。我需要在这里使用锚链接 echo '#' 。 $order->get_order_number();
我正在学习 woocommerce，我只需要知道以防万一如果我必须显示图像然后是订单号，那么我必须在哪里更改代码？
是的，我会接受你的回答，你应该得到支持。在您的第一个答案中，锚链接不起作用。它在 404 上重定向
是的，在第一个答案中，您添加了 order-view 但它应该是 view-order。
是的，我更新了我的代码。感谢您的帮助

【解决方案2】：

这对我来说很好用。不幸的是，该功能不适用于 Woocommerce Pre-Order 插件，并且在移动设备中图形太小了。

add_action( 'woocommerce_my_account_my_orders_column_order-number', 'my_account_orders_product_thumbnails', 20, 1 );
function my_account_orders_product_thumbnails( $order ) {
    echo '<a href="'. wc_get_endpoint_url('view-order') . $order->get_id()  . '/' . '">' . '#' . $order->get_order_number() . '</a>'; 
    
    // Loop through order items
    foreach( $order->get_items() as $item ) {
        $product   = $item->get_product(); // Get the WC_Product object (from order item)
        $thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
        if( $product->get_image_id() > 0 ) {
            echo '&nbsp;' . $thumbnail;
        }
    }
}

【讨论】：

如果您有新问题，请点击按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。 - From Review