5 Minute Masterclass: Adding an Order Summary to the Order Confirmation Page

5 Minute Masterclass: Adding an Order Summary to the Order Confirmation Page

Today’s quick lesson is based on a question I was asked in a recent comment – how do we add a summary of the customers order on the order confirmation page?

As things stand, the confirmation page in BigCommerce simply displays a thank you message and if you have set up a “pay later” option, details on how to complete the order, plus some links to new/popular products. So how to add the order confirmation details?

I initially tried calling the %%Panel.ConfirmOrder%% into the order.html template, but while this is read by the template file, and pulls in the table structure, it seems the cart/order session data is emptied between checkout success and order confirmation, resulting in an empty summary.

The workaround lies in the email templates.

I remembered that the order confirmation email sends a customer a summary of the order, and amazingly after a quick test, the snippet is rendered by the order confirmation template.

So here is how to get the summary:

Head over to Design > Browse Template Files… and open the order.html template file. On line 50 (assuming you’re in an unedited version of the template), above %%GLOBAL_OrderConfirmationDetails%%, paste the following code:

<div id="OrderSummary"><br> <div id="OrderSummaryHeader"><br> %%GLOBAL_CartItemColumns%%<br> </div><br> <div id="OrderSummaryBody"><br> %%SNIPPET_CartItems%%<br> </div><br> <div id="OrderSummaryTotal"><br> %%SNIPPET_TotalRows%%<br> </div><br> </div>

Now when you place an order, you will get a summary on the confirmation page.

<img title="Order confirmation page summary" src="http://www.flairconsultancy.com/wp-live/wp-content/uploads/2011/11/order-summary.png" alt="Order confirmation page summary" width="570" height="300">

To style the order summary, because the table IDs aren’t set up properly, I have wrapped each snippet in a div tag with a unique ID. You can then reference them in your CSS file as <em>#OrderSummaryTable td</em> etc.