8th May 2012

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">
    <div id="OrderSummaryHeader">
        %%GLOBAL_CartItemColumns%%
    </div>
    <div id="OrderSummaryBody">
        %%SNIPPET_CartItems%%
    </div>
    <div id="OrderSummaryTotal">
        %%SNIPPET_TotalRows%%
    </div>
</div>

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

Order confirmation page summary

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 #OrderSummaryTable td etc.

Leave a Reply