在 WooCommerce 快速订单预览的新列中显示产品缩略图 window

Question

如何在新的列中显示产品缩略图，并在每次单击时使用超链接在新选项卡中打开缩略图？

列顺序：

“图片”、“产品”、“数量”

基于答案代码，这是我的代码尝试：

function filter_woocommerce_admin_order_preview_line_item_columns( $columns, $order ) {
    $new_product = $columns['image'];


    return array_merge( array( 'new_product' => $new_product ), $columns );
}
add_filter( 'woocommerce_admin_order_preview_line_item_columns', 'filter_woocommerce_admin_order_preview_line_item_columns', 10, 2 );

function filter_woocommerce_admin_order_preview_line_item_column_new_product( $html, $item, $item_id, $order ) {
    $hidden_order_itemmeta = apply_filters(
        'woocommerce_hidden_order_itemmeta',
        array(
            '_image',
            '_qty',
            '_tax_class',
            '_product_id',
            '_variation_id',
            '_line_subtotal',
            '_line_subtotal_tax',
            '_line_total',
            '_line_tax',
            'method_id',
            'cost',
            '_reduced_stock',
            '_restock_refunded_items',
        )
    );
    
    $product_object = is_callable( array( $item, 'get_product' ) ) ? $item->get_product() : null;
    
    $thumbnail = $product_object->get_image( array( 60, 60 ) );
    
    // Add thumbnail
    if ( $product_object->get_image_id() > 0 ) {
        $html .= '<div class="item-thumbnail">' . $thumbnail . '</div>';
        'image_size'    => array( 50, 50 ),
    }
    
    $html .= wp_kses_post( $item->get_name() );

    if ( $product_object ) {
        $html .= '<div class="wc-order-item-sku">' . esc_html( $product_object->get_sku() ) . '</div>';
    }

    $meta_data = $item->get_formatted_meta_data( '' );

    if ( $meta_data ) {
        <div style="margin-bottom: 40px;">
    <table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;" border="1">
        <thead>
            <tr>
                <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'image.', 'woocommerce' ); ?></th>
                <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
                <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Product quantity', 'woocommerce' ); ?></th>
                <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
                <th class="td" scope="col" style="text-align:<?php echo esc_attr( $text_align ); ?>;"><?php esc_html_e( 'Total', 'woocommerce' ); ?></th>
            </tr>
        </thead>
        <tbody>
           
            );
            ?>
        </tbody>
  
    return $html;
}
add_filter( 'woocommerce_admin_order_preview_line_item_column_new_product', 'filter_woocommerce_admin_order_preview_line_item_column_new_product', 10, 4 );

但是快速订单预览中没有任何变化 window，谁能指出正确的方向？

Answer 1

通过 woocommerce_admin_order_preview_line_item_columns 过滤器挂钩，我们可以选择添加一个新列，用于订单预览 window。

woocommerce_admin_order_preview_line_item_column_' . sanitize_key( $column ), ' 过滤器挂钩，将变为 woocommerce_admin_order_preview_line_item_column_image

所以要在新列中显示产品缩略图，在 WooCommerce 快速订单预览中 window 你会得到：

// Add new column
function filter_woocommerce_admin_order_preview_line_item_columns( $columns, $order ) { 
    // Add a new column
    $new_column['image'] = __( 'Image', 'woocommerce' );

    // Return new column as first
    return $new_column + $columns;
}
add_filter( 'woocommerce_admin_order_preview_line_item_columns', 'filter_woocommerce_admin_order_preview_line_item_columns', 10, 2 );

function filter_woocommerce_admin_order_preview_line_item_column_image( $html, $item, $item_id, $order ) {
    // Get product object
    $product_object = is_callable( array( $item, 'get_product' ) ) ? $item->get_product() : null;
    
    // Add thumbnail
    if ( $product_object->get_image_id() > 0 ) {
        // Get image ID
        $image_id = $product_object->get_image_id();
        
        // Get thumbnail
        $thumbnail = $product_object->get_image( array( 120, 120 ) );
        
        $html .= '<div class="item-thumbnail"><a href="' . wp_get_attachment_image_url( $image_id, 'full' ) . '" target="_blank">' . $thumbnail . '</a></div>';
    }
    
    return $html;
}
add_filter( 'woocommerce_admin_order_preview_line_item_column_image', 'filter_woocommerce_admin_order_preview_line_item_column_image', 10, 4 );

// CSS style
function add_order_notes_column_style() {
    $css = '.wc-order-preview .wc-order-preview-table td, .wc-order-preview .wc-order-preview-table th { text-align: left; }';
    wp_add_inline_style( 'woocommerce_admin_styles', $css );
}
add_action( 'admin_print_styles', 'add_order_notes_column_style' );

在 WooCommerce 快速订单预览的新列中显示产品缩略图 window

Display product thumbnail in new column in WooCommerce quick order preview window

php

wordpress

product

orders

woocommerce