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.
In your Elementor editor, go to the previously made checkout page and copy its Hero section then paste it on your summary page.
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.
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.
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
On the Email option, you can add an email that has an image attached to it then click Update Profile.
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.
Select the image widget and go to Style > Border radius, and add 50px on all sides.
#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.
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.
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.
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.
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.
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.
On Tablet;
Select the container and go to Advanced > Padding, unlink the values then add 40px on all sides then relink the values.
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.
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.
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.
