Create a Purchase Summary Page using Elementor

In this tutorial, I’ll show you how to create a purchase summary page using Elementor for your WooCommerce shop

This article is part of my Elementor + WooCommerce series where I show you how to create an eCommerce shop using Elementor and WooCommerce. In the previous articles, I shared how you can create a single product template, a products archive, a cart page, and a checkout page using Elementor. Feel free to check them out after this.

Ps: Below is a step-by-step video tutorial you can follow along with.

Video: Create a Purchase Summary Page using Elementor

On our purchase summary page, we will be adding a gravatar image which will be connected to your customer’s email, and a custom dynamic welcome message. 

I’ll also show you how to style your purchase summary fields like the billing details, order details, etc to match your site style and layout.

How to Create an Elementor Purchase Summary Page

To start, go to your WordPress dashboard and under Pages, Add New. Name it ‘Purchase Summary’, then click the Edit option or Edit with Elementor.

create a page in wordpress
create purchase summary page

In your Elementor editor, go to the previously made checkout page and copy its Hero section then paste it on your summary page.

Elementor hero section
0atocBj5iVFudOjV7GKEcpkOrl0TyK9tIbqwN ttIrJnt63C 5O9JAIli3Rbur8iFaxitbh5G2vekqkvUXT6KtesoOeyOOEBI6ekFYRgKvgpKKF3odiXoMtIW 5ff0nfxYcbSY8UZrVvWyjQEe7UKi3

Delete the breadcrumb (Home/Checkout); just click on the pencil icon and select Delete. This will leave you with only the heading.

Go to the widgets area on the left and search for the Image widget then drag it to the container, above the heading.

oe27DYGb55khCbESvY lW7cuDosAvO2T41AQOz23CS5M8HdCgxaA6aTkxcp8dZruiQ6SfFG3eCrpZZHMTtI9Plg79zrv0LHOm DxNl

Select the container then go to the Edit container section on the left and under Layout > Direction, change it to horizontal (), and give it a Width of 100%.

Select the image widget next and go to Edit image > choose the image, on the Dynamic tags option then select a User profile picture.

elementor dynamic fields

This will pick up the image that was used with your email on the gravatar website.

Tip:  Gravatar is a website where authors and creators add their images so that they show up whenever they use their email on any website.

When you’re done click the Update button then go back to your WordPress dashboard.

Go to Users > All users, then on the user click Edit 

edit wordpress users meta data

On the Email option, you can add an email that has an image attached to it then click Update Profile.

8e4qCTI1CIYD jBMUIlV32tXbtg8Pv k4bFvm9FsDS2n1hjPZN TdHkTo0BUiGlnvGI8dO6Edyn6W9t9D4y1oJk6nOML7D5BYUwo3TlsPOR1GFygKgizG TP89nhcjn3LSevUpVzQUcvE6T8zbVh716ZOT CKQUnNmoSPobETlfeEnBdsSPjrIwOkMnZyw

You should then go to your inbox and verify your email.

Back to the Elementor editor, when you reload the page your email image should now show up.

add gravatar image in WordPress

Select the image widget and go to Style > Border radius, and add 50px on all sides.

sqx17VRV3wsomYSxyjELrwFxHvWGiOtQfTbMHchj0fhyPg UpUJvG2eiC0Mp88HFjOgIDVT1Ta gsJXzWqVxAYau7PftwVzwCjcSO cls2rTk5f13bNw33lXS6TBLND5u1TSxMLy5SVEhEf6u26dTIFkSW lBBJHa6ZriYmmtEn3 VTAh3NmT1gndwB zw

#1. Add Custom Message

Select the heading widget, under Content > Title, select the Dynamic tag option and select User info, then select the First name.

oqz7QDjqG4pHwwHL1arf9Ec7ifOU6xf3K4 y30QwO3lHJQEKZjckmTwfU8iDw5d2DJoh3Mgnk8RZ2U4XKdnPuu8y2Sg3QF zt2UvW elQfybXrfgXNtgfd0x etB92mA 4UqTkAIP9ZRavXYhXT1SuQBi4JUagFMRMN90vzn1FKp2ilpVdG2nbIzrthNnA

Make sure your WordPress user profile has all these details

Still, in the same setting, go to Advanced, add under Before;  “Hi “, and After, “Thank you. Your order has been received.”

This is the message that will appear whenever any client makes an order, and the client’s name will be echoed in there as well.

TmNSU5bNEGMaEji34WehtCdlhmU1CaFZacbvsMlIFzpYOnlNk9oZrt8TcwdI7RAyVhW

Select the container then under Layout > Align items, align it to the centre.

#2. Add Purchase Summary Details

Add a new single-column section then go to your widgets area and search for the Purchase Summary widget, and drag it to your container.

Since we now have a customized Thank you text in the header, delete the confirmation message from the new purchase summary widget.

Do this by going to Edit purchase summary > Content > Confirmation message, just disable that option.

disable purchase summary message

Select the main container then go to Advanced > Padding, unlink the values then add 40% at the top and the bottom.

Over to the Payment Details option, you can customize and add any fields you would like to be displayed here, and these fields can be dynamically referenced as well.

vvSZOPjS1877EzHb7hpljzZz f CzvjLf d wwomRgXhMCeUafsckzYrrld3qIx5MgOsqh9STECCB1w0NPsb34bKyKZLwE8VpBfwLudGZBPLx6f6dYspTJQS9TzPLXj1OLsZ6ktrr9E24SOCWKAaw4NPc7YkpXq4902Y4pfOFKGvdxpCH MVvKnAU3 KbA

The Bank Details option shows the means used to make the purchase/payment.

There’s also an option called Preview Settings, under Preview order with; you can choose to display by latest order or by order ID.

Go to the Style tab and make these customizations;

Sections;

Set the Background colour to white and add 30px to the Spacing option.

Confirmation Message

For General text set the Color to black and the Typography body text.

Payment Details;

Add 30 under Space between, set Titles colour to black, and Typography body text. 

For Items add blue (secondary) colour and Typography body text. 

For Dividers, add a transparent blue, select solid for the Border type, and add 3px under Width.

Order Details;

Set black colour for Titles & Totals and Typography body text.

For Items set the colour to the secondary( blue), and Typography body text.

You can go ahead and customize other settings to your liking. And when you’re done, click the Update button and then preview.

custom elementor purchase summary page

Purchase Summary Page Responsive Settings

To ensure that the purchase summary page you’ve just created is fully responsive on all devices, go over to Responsive Mode at the bottom, then check on the tablet and mobile devices to see how they look.

6quJAhdqP 6dBBpKGgl6ru1HKsMvY2pRWgB40mJDHxVTehFP 471PpMj5EHT5XlZ J7qGFE4TxySitgys4x9Nx7gH11G8Wh04wWzZql7EgwztAqq6aeGiDj1e2PSX7GGRhhjmq XkSE4Npd1F8WPP8tesZro

On Tablet;

Select the container and go to Advanced > Padding, unlink the values then add 40px on all sides then relink the values.

4upSXk ucsrwYRW9bwI4Wu7 MxdjhyPBYfyF7a9KhxX1hZ ctp9I8yYnuZbgVOEdqwXHKFO6LSje7Um5Dg3BFtRhiyB3jhSCdyxXdy

Update and preview. 

Click the hamburger icon (☰) at the top left corner and go to Site settings > WooCommerce, under Purchase Summary, select the purchase summary page you’ve created, then click the Update button.

hGBBYuE4dIXcg1xIBBB xr2 YEE y0X6jRV1 Mp1qONO9MjPmZPAacNBvTcpgQ1sq7i5VrzLd6QuFXHgyQsd5yeENf464DCAOvjRe3BAXzQafwfXncB1Rmc32kPYm1LKgFqGYoNlKcTMkKbU4Qh73hOlRQ 6hjWOTLI4cGnrwzPt0XW ZoZpfuGTVQXcQ

z91Ig5qjCjjbAUtLOj40u28AdgY3NcjEVhYat7sJ56Jj9U3GSIs0GAeGI2UoCX1 Wpmswwbl3upwDdLWvUXa gmWuc7vipfXAZ7BKs

SV2VXv5cquffo9eXL5tvej6573 Ct8kKHpu5Az1NzA RhR5sgy3XakGZeznkT0KWA0uFFYrPQuN2dbQixhWtq9V3LRM2L8T4IDO92CBR209KSF eNeCKzC Rp59TakLoITGPsGv0RoZx1FhgFji8vy9Qg 5nRVQaQvjrckTBNvFeOu rFzk2eKI2OFmZRQ

To test the Purchase Summary page, let’s head back to the Cart page, go to the cart on the menu and click Checkout, choose a payment mode, accept the terms and click Place order. This should redirect you to the purchase summary page you just created.

Create a Purchase Summary Page using Elementor

In conclusion

That’s how you can create a purchase summary page for your WooCommerce shop using Elementor where your clients can be redirected after making a successful purchase/order.

If you have any comments or questions please use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users