How to edit layout of orders table (orders.php) - php

Question

I want to change the layout of table present in orders.php. Specifically, instead of having rows containing the data (name, date, status, etc.), I want separate horizontal cards for each product.
Example: https://i.stack.imgur.com/itdGU.png. I'm trying to do this with a shortcode, but I'm not sure if that's the right way. Can anyone give me directions ?
For now I'm trying this way: The code below works and returns all order numbers correctly. However I am getting all the order numbers side by side as a simple line of text: https://i.stack.imgur.com/RqdVC.png. I don't know how to insert div, or css classes to change the layout.
Even if I add css classes, the question that remains is how to add other elements such as name, price, status etc. Not sure it can all be done in one shortcode. Advice ?
// GET ALL ORDERS NUMBER OF CURRENT USER
// Give the callback function a clear and descriptive name.
add_shortcode( 'prcsed_order_numbers' , 'prcsed_order_1' );
function prcsed_order_1() {
// Get all orders for the current user.
$customer_orders = wc_get_orders([
'customer_id' => get_current_user_id(),
]);
// Transform the array of order objects into an array of order names.
$order_numbers = array_map( function( $order ) {
return $order->get_order_number();
}, $customer_orders );
// Return as a string, ready for output,
return implode( ', ', $order_numbers );
}

Answer 1

Expanding on what I was typing before. You can access more order variables using what you were already doing in $order_numbers. Here is what I have tested on standalone WooCommerce test site. You will need to input your customer ID function and modify the return HTML structure for styling and editing simplicity. What I have is not clean but does work.
$results = wc_get_orders([ 'cutomer_id'=>1 ]);
foreach ( $results as $order ) {
$first_name = $order->get_billing_first_name();
$last_name = $order->get_billing_last_name();
$status = $order->get_status();
echo '<h1>' . $first_name . ' ' . $last_name . '</h1><p>' . $status . '</p>';
}
The following link gives you the functions/hooks for the order object that you will need accessing to. https://www.businessbloomer.com/woocommerce-easily-get-order-info-total-items-etc-from-order-object/