WooCommerce我的账户订单列表如何在订单号旁显示商品缩略图

核心原因说明 #

你之前参考的方案仅对订单详情页生效，是因为用到的woocommerce_order_item_name钩子属于订单条目循环的触发钩子，只会在单个订单详情页、订单通知邮件等逐条渲染订单商品的场景生效。而我的账户订单列表是订单级别的表格，每一行对应一个完整订单，不会触发条目级别的钩子。

适用的钩子选择 #

你可以根据需求选两种实现方向：

• 方向1：在现有「订单号」列的内容旁追加缩略图
  对应钩子：woocommerce_my_account_my_orders_column_order-number
  这个钩子是WooCommerce给订单列表每个列单独提供的动态动作钩子，order-number就是订单号列的默认key，触发时会传入当前循环的$order对象。
• 方向2：新增独立的「商品缩略图」列
  对应两个钩子配合使用：
  1. 先用woocommerce_my_account_my_orders_columns过滤器修改列配置，新增自定义列
  2. 再用woocommerce_my_account_my_orders_column_{自定义列key}动作钩子输出对应列的内容

可直接复用的代码示例 #

方案1：订单号旁追加缩略图 #

add_action( 'woocommerce_my_account_my_orders_column_order-number', 'add_thumbnail_next_to_order_number', 10, 1 );
function add_thumbnail_next_to_order_number( $order ) {
    // 取订单内第一个商品
    $order_items = $order->get_items();
    if ( empty( $order_items ) ) return;
    $first_item = reset( $order_items );
    $product = $first_item->get_product();
    if ( ! $product ) return;
    // 输出缩略图，加边距避免和订单号挤在一起
    echo '<span style="margin-right: 8px; vertical-align: middle;">' . $product->get_image( 'thumbnail' ) . '</span>';
}

方案2：新增独立缩略图列 #

// 第一步：新增列到列配置
add_filter( 'woocommerce_my_account_my_orders_columns', 'add_thumbnail_column_to_orders_list' );
function add_thumbnail_column_to_orders_list( $columns ) {
    $new_columns = [];
    foreach ( $columns as $column_key => $column_label ) {
        // 把缩略图列插在订单号列前面
        if ( 'order-number' === $column_key ) {
            $new_columns['order-thumbnail'] = '商品图';
        }
        $new_columns[$column_key] = $column_label;
    }
    return $new_columns;
}
// 第二步：给新增列填充缩略图内容
add_action( 'woocommerce_my_account_my_orders_column_order-thumbnail', 'render_thumbnail_column_content', 10, 1 );
function render_thumbnail_column_content( $order ) {
    $order_items = $order->get_items();
    if ( empty( $order_items ) ) return;
    $first_item = reset( $order_items );
    $product = $first_item->get_product();
    if ( ! $product ) return;
    echo $product->get_image( 'thumbnail' );
}

注意事项 #

• 代码可以放到当前主题的functions.php文件，或者自定义功能插件中，无需修改WooCommerce核心模板。
• 上述代码默认取订单内第一个商品的缩略图，如果需要展示多个商品的缩略图，可以修改循环逻辑输出多个图片。
• 可以通过get_image()的第一个参数自定义缩略图尺寸，比如替换成shop_thumbnail、medium或者自定义的图片尺寸。

内容的提问来源于stack exchange，提问作者user9437856