在 WooCommerce 快速訂單預覽 window 的新列中顯示產品縮略圖

Question

如何在帶有超鏈接的新列中顯示產品縮略圖，以便在單擊時在新選項卡中打開縮略圖？

列順序：

“圖像”、“產品”、“數量”

基於WooCommerce 快速訂單預覽 window 答案代碼中現有產品列中顯示產品縮略圖，這是我的代碼嘗試：

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_'. 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' );