RARE FIND: Display a Woocommerce Order in a Nice Clean HTML Formatted Output

I’ve been looking around for this for way too long, and finally just had to quickly write my own.

This is based on the HTML & CSS Styles and Classes from the Storefront Theme, however this will certainly still work and display in any theme you add it to… You may just need to add some styles to control the look of it all.

I am always available to help you with this & any other dev work you need if you reach out on the Contact Page.

A few helpful links are also included as comments within the code for additional order meta fields from both Business Bloomer and Stack Overflow if needed. Huge shoutout to both of them for all of the help over the years.

Thanks for visiting & good luck with this code! Should work as it, just insert your order ID or even add it as a URL parameter as you can see how I’ve been doing it.

By the way, for anyone that is new to WordPress Development, this is PHP code that should live inside your WordPress theme or plugin PHP files.

            $order_id = $_GET['order_id'];

            $order = new WC_Order($order_id); // Order id
            $order_id = $order->get_id();
            $order_number = get_post_meta($order_id,"express_checkout_order_number",true);
            if ($order_number=="") $order_number = $order_id;
            $order_status = $order->get_status();
            $order_date = $order->get_date_created();
            $order_billing_address = $order->get_formatted_billing_address();
            $order_shipping_address = $order->get_formatted_shipping_address();
            if ($order_shipping_address=="") $order_shipping_address = $order_billing_address;
            
            $get_formatted_order_total = $order->get_formatted_order_total();
            $get_subtotal = $order->get_subtotal();
            $get_total = $order->get_total();

            //more order fields can be found here
            //https://www.businessbloomer.com/woocommerce-easily-get-order-info-total-items-etc-from-order-object/
            
            echo '<p>Order #<mark class="order-number">'.$order_number.'</mark> was placed on <mark class="order-date">'.date_format($order_date,"D M d, Y g:ha").'</mark> and is currently <mark class="order-status">'.$order_status.'</mark>.</p>';
            
            echo '<section class="woocommerce-order-details">
            <h2 class="woocommerce-order-details__title">Order details</h2>
            <table class="woocommerce-table woocommerce-table--order-details shop_table order_details">
            <thead>
            <tr>
            <th class="woocommerce-table__product-name product-name">Product</th>
            <th class="woocommerce-table__product-table product-total">Total</th>
            </tr>
            </thead>
            <tbody>';
                  
            // Get and Loop Over Order Items
            foreach ( $order->get_items() as $item_id => $item ) {
               
               $product_id = $item->get_product_id();
               $variation_id = $item->get_variation_id();
               $product = $item->get_product();
               $product_name = $item->get_name();
               $quantity = $item->get_quantity();
               $subtotal = $item->get_subtotal();
               $total = $item->get_total();
               $tax = $item->get_subtotal_tax();
               $taxclass = $item->get_tax_class();
               $taxstat = $item->get_tax_status();
               $allmeta = $item->get_meta_data();
               $somemeta = $item->get_meta( '_whatever', true );
               $product_type = $item->get_type();
               
               echo '
               <tr class="woocommerce-table__line-item order_item">
               <td class="woocommerce-table__product-name product-name">
               '.$product_name.' <strong class="product-quantity">×&nbsp;'.$quantity.'</strong>	</td>
               <td class="woocommerce-table__product-total product-total">
               <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>'.number_format($total,2).'</bdi></span>	</td>
               </tr>';
            }
            
            echo '</tbody>
            <tfoot>
               <tr>
                  <th scope="row">Subtotal:</th>
                  <td><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>'.number_format($get_subtotal,2).'</span></td>
               </tr>
               <tr>
                  <th scope="row">Total:</th>
                  <td><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>'.number_format($get_total,2).'</span></td>
               </tr>
            </tfoot>
            </table>
            </section>
            <section class="woocommerce-customer-details">
               <h2 class="woocommerce-column__title">Billing address</h2>
               <address>
                  '.$order_billing_address.'
               </address>
            </section>
            <section class="woocommerce-customer-details">
               <h2 class="woocommerce-column__title">Shipping address</h2>
               <address>
                  '.$order_shipping_address.'
               </address>
            </section>';
            
            //need more order data? output all order data via get_order_details function here
            //https://stackoverflow.com/questions/39401393/how-to-get-woocommerce-order-details