How to Customize WooCommerce Order Summary in Your Store (Step-by-Step Guide)

Editorial Team
January 31, 2024
How to Customize WooCommerce Order Summary in Your Store (Step-by-Step Guide)

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.

What is WooCommerce Order Summary?

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:

  • Product information: Product information includes the name of the product, quantity, price, image, and product attribute (in case of variable product). 
  • Payment information: Payment information includes subtotal, shipping cost, any applicable taxes, additional fees, or discounts applied to the order subtotal, and total payable amount.
  • Customer information: Customer information includes name, email, billing, and shipping address. The shipping address represents the place where the product will be delivered. 
  • Payment method: The order summary also includes the payment method the user chooses to pay for the order. 
  • Order ID: The order summary on the thank you page includes the order ID as well. 
  • Date of order placement: On the order summary page, the date of order placed is also included. 
  • Order notes: If the order has additional notes, they are also shown as part of the order summary. 

🔔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.

default thank you page

Why Should You Customize WooCommerce Order Summary in Your Store? 

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

default woocommerce checkout page

Here is the default WooCommerce thank you page 

default checkout page woocommerce

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:

  • Brand representation

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.

  • Enhanced user experience

A customized order summary can be designed to be more user-friendly, presenting information in a clear, organized, and aesthetically pleasing manner. 

  • Provide clarity and relevance

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.

  • Building trust

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. 

How to Customize WooCommerce Order Summary Without Coding?

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.

Step 1: Install and activate FunnelKit 

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.

Step 2: Create a store checkout with a pre-built template  

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.

create store checkout

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. 

click on preview to import utopoia as store checkout

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.

import utopia as store checkout

This will import a store checkout with three steps: checkout, upsell, and thank you page. 

Step 3: Customize WooCommerce order summary on the checkout page 

To customize the checkout page template, click on the “Edit” option. 

edit checkout with new ui

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.

edit elementor template

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 

  • Enable Image: Enable this option to add the product images to the order summary.
  • Collapsable Text View: Provide the text that will show up on top when the order summary is collapsed. 
  • Expanded Text View: Add the text that will show up when the order summary section is expanded. 
  • Coupon Button Text: Enter the coupon button text.
  • Enable Coupon: Enabling this option will add a coupon field to the order summary section.
  • Collapsible Coupon Field: Enable this option to make the coupon field collapsible.
  • Quantity Switcher: This option will add the coupon quantity switcher to the order summary, where users can update the item quantity.
  • Allow Deletion: If you enable this option, users will get the option to delete/remove any product from the cart. 
edit order summary section on checkout page

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

edit mini cart on checkout

After making all the changes, click on the “Update” button to save. 

Here is what the checkout page with WooCommerce order summary looks like:

checkout page with order history preview

🌟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

Step 4: Customize the WooCommerce order summary on the thank you page

To customize the thank you page template, click on the “Edit” option. 

click on thank you page to edit

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.  

edit template thank you page

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. 

edit heading thank you page

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. 

edit customer details

For the order details section, you can set different headings for physical products, subscriptions, and downloads.

edit order details

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.

style tab order details

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:

preview order confirmation page with WooCommerce order summary

As you can see, the overall page looks more pleasing than the default WooCommerce pages.

Step 5: Activate your store checkout 

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. 

enable store checkout

Now you have a checkout and thank you page with a customized WooCommerce order summary.

Frequently Asked Questions About WooCommerce Order Summary

Here are some of the commonly asked questions about WooCommerce order summary with answers.

  • How can I customize the order summary to match my brand?

You can integrate your brand logo, use consistent colors, typography, and incorporate unique design elements to align the order summary with your brand identity. 

  • Is it essential to optimize my order summary for mobile devices?

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. 

  • Is it possible to track user interactions with the order summary?
    Yes, you need to enable conversion tracking settings in Funnel Builder. For more details, check the documentation on conversion tracking. 

Ready to Customize WooCommerce Order Summary? 

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?

Author: Editorial Team
The Editorial Team at FunnelKit (formerly WooFunnels) is a passionate group of writers and copy editors. We create well-researched posts on topics such as WordPress automation, sales funnels, online course creation, and more. We aim to deliver content that is interesting and actionable.

Increase your sales, starting today.

Grab Our Exclusive Bundle
chevron-down