The WooCommerce order summary displays all order details, enabling users to effortlessly view all related information at a glance.
It’s important to make sure your order summary looks clean and offer transparency so users feel assured they have ordered the right products with the correct information.
By customizing the order summary section, you can enhance the user experience, provide additional information and even match the design with your brand.
In this guide, we’ll share why it’s important to customize the WooCommerce order summary and how to customize it on both the checkout and thank you pages.
Contents
The WooCommerce order summary is a concise overview of the key details related to a customer's order within the WooCommerce e-commerce platform, typically presented during the checkout process and on the order confirmation or thank-you page.
Typically, an order summary includes the following information:
🔔Note: These are the elements of the order summary while all of them are shown in the order confirmation/thank you page, some may not be there on the checkout page.
Before we talk about why you should customize the order summary section of WooCommerce, let’s have a look at the default WooCommerce pages.
Here is the default checkout page with the order summary
Here is the default WooCommerce thank you page
Both the default WooCommerce order summary section is basic and does not adequately reflect any brand identity.
The product section doesn’t show any product image, only the name, which can create a little ambiguity. Moreover, it’s not engaging enough.
If you customize the WooCommerce order summary section, you can achieve the following:
Customization allows you to incorporate your brand colors, font, and overall visual identity into the order summary. This reinforces brand recognition and presents a cohesive image throughout the customer's shopping experience.
A customized order summary can be designed to be more user-friendly, presenting information in a clear, organized, and aesthetically pleasing manner.
By customizing, you can prioritize and emphasize the most important information for your customers. This ensures that crucial details such as product information, pricing, and discounts are easily accessible and understood.
A well-designed and professional-looking order summary can instill trust in customers. When they perceive your online store as trustworthy and reliable, they will likely make repeat purchases.
Now, let’s check how you can customize the WooCommerce order summary on both the checkout and thank you pages.
In this section, we’ll not override the order summary block with a piece of code or any template file.
Instead, we’ll customize it without doing any custom programming.
We’ll use a sales funnel builder named FunnelKit Funnel Builder to customize the order summary in your WooCommerce store’s checkout page and thank you page.
FunnelKit Funnel Builder is a plugin that comes with pre-built templates that you can use to import checkout and thank you pages and customize them easily.
Moreover, FunnelKit FunnelBuilder provides deep integration with page builders such as Elementor, Divi, Oxygen, Gutenberg, etc.
Therefore, you can customize WooCommerce pages along with the order summary section simply by using drag-and-drop without any coding.
In addition, you can also add order bumps and one-click upsells, which helps you increase your AOV. Furthermore, you can provide lucrative discounts on your offers with just a few clicks.
The first step is to install both FunnelKit Funnel Builder free and FunnelKit Pro on your website.
If you need help installing and activating FunnelKit Funnel Builder Pro, then check our installation guide.
Now, we need to create a store checkout that will replace the default WooCommerce checkout and thank you page.
For that, navigate to FunnelKit ⇒ Store Checkout and click on the “Create Store Checkout” button.
After that, select your page favorite page builder and choose a template from the list of prebuilt checkout templates FunnelKit provides.
To select one, hover on the template you like and click on Preview. We are going with Utopia here.
Now choose whether you want a one-page checkout or multi-step checkout page. We are going with a one-step checkout page here.
After that, click on “Import This Funnel” to import the template. Provide a name and click on “Add” to import the template.
This will import a store checkout with three steps: checkout, upsell, and thank you page.
To customize the checkout page template, click on the “Edit” option.
Here, you can customize the design and content of the checkout page with the selected page builder.
For that, click on the “Edit Template” option.
Here you can customize the content and design of the checkout page. Regarding order summary, FunnelKit Funnel Builder has a unique yet user-friendly feature named collapsible order summary.
This feature adds a collapsible order summary on the top of the checkout page, which is really handy, especially for mobile users, as they don’t have to scroll down to see the order details.
Users can apply coupon codes and also update cart item quantities using this collapsible field.
To add this collapsible order summary, you need to turn on the “Enable” toggle button.
You can also customize different components of the order summary, such as
Another amazing feature is that with FunnelKit Funnel Builder, you can also add a mini cart to the checkout page.
With this mini cart, customers can view, update cart items, and apply coupon codes in the coupon field.
It has an additional option to "Allow Deletion" where you can change the product quantities and remove items you don't want, making it superior to the redundant, default WooCommerce cart page.
🌟For more details on the customization option of a mini cart on the checkout page, read our blog on how to add a WooCommerce mini cart.
After making all the changes, click on the “Update” button to save.
Here is what the checkout page with WooCommerce order summary looks like:
🌟Read our blog on how to customize the checkout page using FunnelKit Funnel Builder and add an order bump to boost AOV.
Also, check how you can customize the upsell page.
To customize the thank you page template, click on the “Edit” option.
Here, you need to click the ‘Edit Template’ option to customize the order summary page.
On this page, if you scroll down a little, you will find WooCommerce order summary shortcodes that you can copy and use.
Some of the WooCommerce order summary shortcodes are Customer first name, Customer number, order number, order total, etc.
Now to edit any section of this WooCommerce order confirmation page, just click on that section, and on the left panel, you can customize the content and styles.
For example, you can change the confirmation message heading; it’s font family, font size, etc.
For the Customer Details section, you can change the heading. You can also change the layout to either a two-column or one-column full-width structure.
For the order details section, you can set different headings for physical products, subscriptions, and downloads.
If you move to the style tab of any section, you will find options to customize the style of the order summary section that fits your brand.
For instance, for the Order Details on the style tab, you can customize color and typography for the heading, product, subtotal, total, etc.
Make sure to click on ‘Update’ to save all your changes.
Here is the final look of the thank you page with WooCommerce order summary:
As you can see, the overall page looks more pleasing than the default WooCommerce pages.
Finally, you need to activate the store checkout. For that, come back to the sales funnel page and turn on the “Enable Store Checkout” button.
Now you have a checkout and thank you page with a customized WooCommerce order summary.
Here are some of the commonly asked questions about WooCommerce order summary with answers.
You can integrate your brand logo, use consistent colors, typography, and incorporate unique design elements to align the order summary with your brand identity.
Yes. Because in the upcoming year, a significant 42% of smartphone users intend to increase their shopping activities through mobile devices. So, it’s important that you optimize the order summary section for mobile devices as well.
The checkout page and order confirmation represent the final stages of a purchasing journey, making it crucial to establish a personalized touch as users leave your site.
While the idea of customizing the order summary section may seem trivial, it plays an important role in ensuring you provide a seamless shopping experience for your customers.
With FunnelKit Funnel Builder, you can easily customize the order summary and also boost average order value with order bumps and one-click upsells.
This gives you the opportunity to elevate your customer's journey and leave a lasting impression.
So, are you ready to change how the WooCommerce order summary looks in your store?
