I am trying to add another column to the Orders page of the My Account Section of Woocommerce's Storefront theme. In the column, I would like to display the thumbnails of the products in the order. I have tried the suggested code in Show Product Image In orders Page Woocommerce and Add Product Thumbnail to My Account. However, neither showed an image of the product. I have managed to get the thumbnail of the product to show in the "View" Section of an order using this code, but am not sure how to incorporate these elements into creating a new column on the "Orders" page:
// Display the product thumbnail in order view pages
add_filter( 'woocommerce_order_item_name', 'display_product_image_in_order_item', 20, 3 );
function display_product_image_in_order_item( $item_name, $item, $is_visible ) {
// Targeting view order pages only
if( is_wc_endpoint_url( 'view-order' ) ) {
$product = $item->get_product(); // Get the WC_Product object (from order item)
$thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
if( $product->get_image_id() > 0 )
$item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>' . $item_name;
}
return $item_name;
}
I also want to have the images in each column act as a link going to the product's page, just as how the Product's title acts as a link on the Order Details page. The outcome should look something like this
Any suggestions would be greatly appreciated!