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

Would you like to improve your conversion rate?

Get a free design analysis and report for your ecommerce site

Submit your details below to receive a free, tailored 12 point conversion rate optimisation report for your website:

Free, no obligation service. We will not share your details.

Thank you for your request!

One of our conversion rate optimisation team will be reviewing your site soon, and we will send your free  report in the next 5 working days.