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

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

CodePudding user response：

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/