在 WooCommerce 快速订单预览窗口的新列中显示产品缩略图 [英] Display product thumbnail in new column in WooCommerce quick order preview window

问题描述

如何在带有超链接的新列中显示产品缩略图，以便在单击时在新选项卡中打开缩略图?

列顺序:

图片"、产品"、数量"

基于

How can I display the product thumbnail in a new column with a hyperlink to open the thumbnail in the new tab whenever I click on it?

Column order:

"Image", "Product", "Quantity"

Based on Display product thumbnail in existing product column in WooCommerce quick order preview window answer code, this is my code attempt:

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 );

---

But nothing changed in the quick order preview window, can anyone point me in the right direction?

解决方案

Via woocommerce_admin_order_preview_line_item_columns filter hook, we have the option to add a new column, for order preview window.

The woocommerce_admin_order_preview_line_item_column_' . sanitize_key( $column ), ' filter hook, will become woocommerce_admin_order_preview_line_item_column_image

So to display the product thumbnail in new column, in WooCommerce quick order preview window you get:

// 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 快速订单预览窗口的新列中显示产品缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！