How to Use the WooCommerce Purchase Summary Widget in Elementor [PRO]

[Music] Hi everyone this is shiri from elementor Today i’ll show you how to use the Purchase summary widget The purchase summary page or the thank You page is the last station in your Woocommerce store that customers will See after completing a purchase It offers a quick review of your order Shows the bank details of your business If your store allows bank transfer Payments And if the user purchases a downloadable Product it will show the list of files To be downloaded You can also use this page to promote Any of your additional business goals Such as for coupons social media links Or links to similar products With elementor’s purchase summary widget You can fully customize the design of Your purchase summary page making sure Your branding is consistent from start To finish Let’s jump right in To get started go to pages and click add New to create the purchase summary page Since it doesn’t exist yet by default Then click edit with elementor From the widgets panel search for and Drag the purchase summary widget into The page Okay as you can see we need to have at Least one order in the system so that we

Can preview the purchase summary page If we are building a new store and don’t Have any orders yet we can place a test Order by going to the woocommerce Settings and temporarily enabling the Bank transfer payment method as it Doesn’t require any real payments Then make sure to place at least one Order on the site Okay back in the editor let’s save our Work so far And refresh As you can see it now displays an order With all its relevant details I’ll go ahead and add some padding to This section so the widget is placed Better All right time to explore the purchase Summary widget first off in the content Tab we can choose to either hide Or show the confirmation message We can type a custom message And set its alignment to our liking Next under payment details we can adjust What is written in each payment field Like so As for bank details we can change the Title And set its alignment Note that we only see this when the bank Transfer payment gateway is enabled Let’s continue with downloads which will Be displayed only when previewing an Order with a downloadable product

Next we have the purchase summary Just like before we can rename the title Of this section and set its alignment Same goes for the billing details And shipping address Now let’s check out the preview settings Where we can choose to preview the Purchase summary with either the latest Order or choose a specific one by Entering the order id This way we can cover different types of Orders To find an order id go to your Woocommerce orders All right time to style There are many options over here for us To really customize this widget to our Liking let’s do it First we’ll style the sections Let’s scroll a bit to get there We can change the background color here And if we want we can also set a box Shadow Add a border And border radius For our design we’ll set it to none We also have a padding setting which We’ll set to zero Now let’s add some spacing which will Add space above the titles Next up under topography we can change The color and topography of the Confirmation message so it aligns with The other titles across our website

Same goes for the titles With an additional control of spacing Let’s also style the general text which Appears here And here Time to move on to payment details We can control the horizontal spacing Change the title’s color And the topography We can also adjust the space beneath the Title Next we will go to items and just like Before adjust the color and topography Dividers refer to these lines between The items We can play around with the border type The width And the color But we’ll keep them simple and white for Our design Let’s move on to the bank details now Where we will tweak it to match the Styles we used before Set the space between Style the titles And items As well as the dividers Slowly but surely our purchase summary Page is coming together Next let’s style the order details Here we can control the gap between the Rows and change the color and topography Of the titles and totals We can do the same for the items

And item variations for if you have any As well i set a link color for the Products We can also control the dividers like we Did previously These button controls refer to the Buttons we have when purchasing a Downloadable product Remember the preview settings from Before I’m going to use it to view another Order that contains some downloadable Products from our website Let’s style them with the same fonts and Colors as we used before We will remove the border And set the padding All right now that we’re done Customizing first desktop let’s see what It looks like on mobile devices Looks quite good as is on tablet Let’s check it out on mobile Just like any other widget settings with Device icons can be tweaked for various Screen sizes I’ll go ahead and adjust the spaces here And here Better The rest looks just perfect Now our page is ready and we’ll click Publish Note that when we drag in a new purchase Summary widget and save the design we’ll Be prompted with this message asking if

We want to save it as the purchase Summary page The changes will automatically sync with Woocommerce which you can access via Your site settings Here you can set your shop pages right From in the editor so you can clearly See which pages your visitors will be Sent to Amazing One last tip to make our purchase Summary page even more rocking Since most fields can be populated Dynamically we can personalize the Confirmation message Let’s click the dynamic tags icon Select user info In field choose user meta And for the meta key type billing Underscore first underscore name This will pull up the user’s name that He or she entered in the checkout step Note that this action is only relevant When the customer creates a user account In your online store Now we’ll add the before text to be Thank you followed by a comma and a Space and the after text to be we got Your order Or an icon that fits your brand Also make sure to have a fallback text In case our buyer checked out as a guest Well that’s it now you know how to use The purchase summary widget to fully

Customize the design of your purchase Summary page Go ahead try it out and show us your Awesome designs in the comments below As always have fun creating and don’t Forget to subscribe to our youtube Channel for more tips and tutorials ciao For now You