Search code examples
phpwordpresstemplateswoocommerceorders

How to insert the first 3 product images of an order in WooCommerce "My account" orders table

Does somebody know how to insert the first 3 images of an order into the WooCommerce my-orders table?

Additionally I would like to add an "and more"-button, linked to the specific order (same link as order-number) with an if condition.

enter image description here

Hint: To stay more flexible it would be nice to get a solution without hooks, if possible.

I'd like to edit even more and overwrite the my-orders.php via child-theme later.

Here is the solution I use at the moment.

<div class="order-status">
    <span>Order Status</span>
    <?php           
    elseif ( 'order-status' === $column_id ) :
        $order_color_check = $order->get_status();  
        if($order_color_check=="completed") :
            echo '<span class="order-status-value" style="color: green;">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
            
        else :
            echo '<span class="order-status-value" style="color: red;">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
        endif; ?>
</div>
Solution
    • Know that myaccount/my-orders.php is @deprecated since WC 2.6.0
    • My answer is via hooks, but editing via the template file should be done via myaccount/orders.php
    • The output of the html will need some CSS for styling (theme dependent)
    // Adds a new column to the "My Orders" table in the account.
function filter_woocommerce_account_orders_columns( $columns ) {
    // Add a new column
    $new_column['order-products'] = __( 'Products', 'woocommerce' );

    // Return new column as first
    return $new_column + $columns;
}
add_filter( 'woocommerce_account_orders_columns', 'filter_woocommerce_account_orders_columns', 10, 1 );

// Adds data to the custom "order-products" column in "My Account > Orders"
function action_woocommerce_my_account_my_orders_column_order( $order ) {
    $count = 0;
    
    // Loop through order items
    foreach ( $order->get_items() as $item_key => $item ) {
        // Count + 1
        $count++;
        
        // First 3
        if ( $count <= 3 ) {
            // The WC_Product object
            $product = wc_get_product( $item['product_id'] );
            
            // Instanceof
            if ( $product instanceof WC_Product ) {
                // Get image - thumbnail
                $thumbnail = $product->get_image( array(50, 50) );

                // Output
                echo '<div class="product-thumbnail" style="display:inline-block;padding:2px;"><a href="' . $product->get_permalink() . '">' . $thumbnail . '</a></div>';
            }
        } elseif ( $count == 4 ) {
            // Output "read more" button
            echo '<span><a href="' . $order->get_view_order_url() . '">'. __( 'Read more', 'woocommerce') . '</a></span>';
            break;
        }
    }
}
add_action( 'woocommerce_my_account_my_orders_column_order-products', 'action_woocommerce_my_account_my_orders_column_order', 10, 1 );

    Result