Is your WooCommerce order confirmation page, or the thank you page, optimized to ensure a great shopping experience and encourage the next purchase?
Many people believe the first impression matters most, neglecting the importance of the last impression—the thank you page or order confirmation page.
According to research, there's a 60-70% likelihood of selling to an existing customer compared to just 5-20% for a new prospect.
Your thank you page should be well-optimized to leave a lasting impression and keep your customers coming back for repeat purchases.
In this blog, we'll share two methods to create a custom WooCommerce order confirmation page. We'll also provide some inspiring examples and best practices to follow for an optimized order confirmation page.
Contents
The WooCommerce order confirmation page appears after checkout to confirm the order was placed successfully. Along with the confirmation, it also shares the order summary and other important details.
A basic WooCommerce order confirmation page includes the following
In addition to these basic details, you can also include:
When done right, the order confirmation or thank you page marks the end of the purchasing journey and can also initiate a long-lasting relationship with your clients.
The default WooCommerce thank you, or order confirmation page looks dull and has several shortcomings.
Here is a preview of the default order confirmation page of WooCommerce:
As you can see, the default WooCommerce thank you page lacks several key elements necessary for optimizing post-purchase engagement and driving repeat sales.
These missing features include:
Addressing these gaps can enhance the thank you page, better engage customers, and encourage repeat purchases.
For more details about the benefits of a custom order confirmation page, move to the next section.
Customizing your WooCommerce order confirmation page can enhance customer experience, boost brand identity, drive repeat sales, and increase customer engagement.
Key benefits include:
This method is recommended for expert coders as it involves manually changing the actual code.
🔔 Note: Create a child theme before editing WooCommerce templates like the thank you page to protect your changes from updates.
Follow these steps to customize the content:
Using a File Manager or FTP client, navigate to /wp-content/plugins/woocommerce/templates/checkout/
Now, you can edit the ‘thankyou.php’ file to make changes.
Here, we are going to change the success message when an order is placed successfully.
Currently, the message says, “Thank you. Your order has been received” and We are going to add the message “Thank You for Shopping with WooStore. We have started processing your order!”.
To display the success message about the order received, "thankyou.php" calls the template ‘order-received.php’. We will edit this "order-receied.php" file and update the code.
Here is the default code:
<?php
defined( 'ABSPATH' ) || exit;
?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received">
<?php
$message = apply_filters(
'woocommerce_thankyou_order_received_text',
esc_html( __( 'Thank you. Your order has been received.', 'woocommerce' ) ),
$order
);
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo $message;
?>
</p>
Here is the updated code:
<?php
defined( 'ABSPATH' ) || exit;
?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received">
<?php
$message = apply_filters(
'woocommerce_thankyou_order_received_text',
esc_html( __( 'Thank You for Shopping with WooStore. We started processing your order!' ) ),
$order
);
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo $message;
?>
</p>
Make sure to save the file.
Now, to see if the changes are working correctly, place a test order.
Here is the thank you page with the new success message:
You can follow the steps shown to customize all the sections of the order confirmation page using custom code.
By now, you must have realized that this method isn’t ideal for beginners or people lacking coding skills.
But don’t sweat it! In the next section, we’ll guide you through creating a custom thank you page that requires no coding knowledge.
Creating a custom order confirmation page using a plugin is the most convenient and efficient method. We recommend using FunnelKit Funnel Builder.
It is the best sales funnel builder for WordPress and WooCommerce that allows you to replace the default order confirmation page with a custom one.
You can design the order confirmation page with any popular page builder, such as Elementor, Divi, Oxygen, Gutenberg, etc.
The best part about this plugin is that you can customize your thank you page and checkout page. You can also offer pre-and post-purchase offers to boost the average order value.
Make sure you install and activate FunnelKit Funnel Builder.
Now follow these steps:
The first step is to easily create a store checkout for your WooCommerce store.
Navigate to FunnelKit ⇒ Store Checkout from your WordPress dashboard and hit the "Create Store Checkout" button.
Select the page builder you want to use to create your WooCommerce custom confirmation page. Then, hover over the template you like and click on ‘Preview’.
Here, we are going with Elementor and the Stunner template.
You can scroll to select the order confirmation page from the left side. If you like the template, hit the ‘Import This Funnel’ button, name it, and click Done.
This will import 3 pages: checkout, one-click upsell, and a thank you page.
Here, we will also share how to customize the thank you page. For the rest of the pages, you can get help following guides:
🔔 Note: You can offer low-dollar offers on the checkout page as an order bump to increase the average order value.
To edit the order confirmation page, click the "Thank You" page step.
Then, hit “Edit Elementor Template” to start the customization.
You can change every part of this template and add/remove any part. First, let’s customize the existing content one by one.
Upload any custom logo to replace the template logo.
Click on the section, then on the left side; you can easily change it. Remember, the template uses merge tags to display dynamic content like the customer's first name, order number, and email. So, keep that in mind.
🔔 Note: If you need more merge tags to personalize the content, you can find them under “Personalization shortcodes” under the design tab.
Click on the order details section. Here, you can change the hedging. If you offer subscriptions, you can change the heading for those products as well.
You can change the heading and also the layout of the customer details section. Arrange it as one column or two columns, as you see fit.
Highlight your special offers in this section to attract more buyers. For instance, we can provide a 5% discount on their next purchase, encouraging them to return and buy more. You can share the discount coupon they can use on the next purchase.
Update the contact information in this section.
You can add any additional content to your template as well. For instance, here, you can add an educational video or steps on how to use the product or both.
Like educational content, you can also add social share icons using the ‘Social Icons’ button.
For each icon, add the link to the respective social media account.
After making the changes, make sure to ‘Update’ the template.
Here is the order confirmation page we designed.
The last step is to enable the store checkout so that when someone buys from your store, they see this beautiful, optimized order confirmation page rather than the dull default one.
Just hit the “Enable Store Checkout” button to enable the store checkout.
Here, we have shared to set the URL of the order confirmation page in two ways:
Go to WooCommerce ⇒ Settings, then click on the Advanced tab. Under Checkout endpoints, set the "Order Received" URL as your order confirmation page URL.
Make sure to save the changes.
The URL will be https://yourdomain.com/checkout/customURL
To set a custom thank you page URL, click on the Edit icon of the thank you page URL.
Enter the custom URL you want to set in the "Page URL Slug" section and hit update.
So, the custom WooCommerce Order Confirmation Page URL will be https://yourdomain.com/order-confirmed/customURL.
To show a custom field on the WooCommerce order confirmation page, you need to add the custom field to the checkout page first. Once you collect the custom value during checkout, you can display it on the thank you page.
Here are the steps you need to follow:
To do this, edit the checkout page, scroll down, and click on “Add New Field” to add the custom field.
Then set up the field you want to add. For example, here we are asking users if the order is a gift. If yes, then we will wrap it in a gift wrapper.
Now to ensure the custom field you just built is available on the thank you page, turn the toggle button for the option “Show On Thank You Page”.
You can make the field required if you want. After setting up, click on “Add.” Remember to update the template.
👉 For more details, read our blog on how to add a custom field to the checkout page.
Now if you place a test order, the thank you page will have the custom field.
With FunnelKit Automations’s Rule Engine, you can set up different order confirmations based on different product attributes.
For example, you can show people different product pages based on the product category customers shop from.
To create different confirmation pages visible for different product attributes, first create multiple order confirmations and then set the rules.
Here are the steps you need to follow:
First, you need to create all the confirmation pages you want to show based on different criteria.
To create a thank you page, hit the “Add New Step”.
Then, choose the “Thank You” page and your favorite page builder. Then hover and click “Preview”.
Now to import, hit “Import This Template”, provide a name, and hit “Add”.
🔔Note: You can choose different templates for different order confirmation pages.
Repeat the same process to create as many order confirmation pages as you need.
Here, we have added one. So, in total, we have two.
Now, customize the different thank you pages you created in the first step to display what you want based on the rules you'll set later.
It’s time to establish rules so that different order confirmations show up depending on specific product attributes or other order and customer-related criteria.
For this, we need to set different rules for different thank you pages.
To set rules, go to the Rules tab and click on ‘Add Rules’.
Now you can set conditions based on different metrics like:
After choosing the factor, set the condition. For example, we have added this thank you page to show only if the purchase product category is beauty.
You can add multiple conditions as well. Here, we are adding the condition: cart product should be from the Beauty category, and the total should be greater than or equal to 150.
If you want to make the thank you page visible for multiple sets of rules, you can use the “Create Rule Group” option.
After setting the conditions, “Save” the rules.
And that’s it. Your store will now show different order confirmations to different audiences based on the rules you set.
Now that you know how to create a custom WooCommerce order confirmation page, let’s have a look at 3 examples you can take inspiration from to design your thank you page.
Walmart is an American multinational retail corporation with a well-balanced and sleek-looking order confirmation page.
This is an ideal example of how less is more. While it doesn’t do much, it provides a good order summary. It encourages users to return to the store and nudges them to make another purchase with the discount.
2. Foot Locker
Foot Locker is a sportswear company that sells sneakers, footwear, and apparel for men, women, and kids.
They have an optimized order confirmation page that ensures customers stay connected to the brand even after the purchase.
Here is the thank you page by Foot Locker:
Here are the takeaways:
While the brand doesn’t offer any upsells or cross-sells on the thank you page, it has been optimized to ensure customers have a smooth shopping experience by providing all the necessary information.
At the same time, they collect customer emails and consent through the register and sign-up for updates section, allowing them to easily promote their products in the future.
3. Mark and Spencer
Marks and Spencer plc is a British multinational retailer with a sleek order confirmation page.
Have a look at their thank you page:
Here are the takeaways:
This order confirmation does one clever thing to place the promotion and register form in the middle so it’s on focus and users don’t miss it.
Here are 5 tips you can follow when customizing your WooCommerce order confirmation page, irrespective of the type of product you sell.
Make sure to add personalization to boost customer engagement. For instance, addressing the customer by their name is a great start. Additionally, consider displaying a different order confirmation page based on the customer's order details or history to ensure it’s more targeted and relevant.
Add clear CTAs to guide users what step to take next. For example, you can iclude calls to action, such as “Track Your Order” or “Continue Shopping,” to help customers navigate easily.
As of the first quarter of 2024, smartphones accounted for about 77 percent of retail site traffic worldwide. That’s why experts highly recommend the confirmation page is fully responsive for seamless navigation on any device.
Offer discounts or incentives for future purchases to motivate repeat business. We recommend offering a time-sensitive discount to create urgency among users.
It’s easy to want to include everything when you have the power of customization. However, try not to overwhelm users with too much information or too many calls to action, as this can confuse them. Present information clearly and concisely to avoid overwhelming customers with unnecessary details.
The order confirmation page is usually found at the URL /order-received/ after checkout. If you create a custom order confirmation page, then you can change the URL and slug as well. We have covered details in this blog.
Order received page is located in the WooCommerce ⇒ Settings ⇒ Advanced ⇒ Page Setup.
You can customize it using WooCommerce hooks or by editing the template files. However, unless you’re an experienced coder, it’s recommended to use a plugin like FunnelKit Funnel Builder. This allows you to easily customize the thank you page with popular page builders like Elementor or Divi.
Yes, WooCommerce automatically sends an order confirmation email to the customer after purchase. If you want to learn how to customize this email, read our blog on “order confirmation email”.
You can include upsells, recommend related products, or offer discounts for future purchases.
A custom order confirmation page in your WooCommerce store can significantly impact how shoppers interact with your site and improve your customer retention rate.
With FunnelKit Funnel Builder, you can easily customize your order confirmation page. You have the flexibility to add custom fields and create rule-based multiple confirmation pages to target different audiences effectively.
Moreover, FunnelKit offers stunning prebuilt templates with promotional sections to showcase offers and encourage the next purchases. So, don’t miss the opportunity to turn customers into repeat buyers.
Get FunnelKit Funnel Builder today and start building your custom order confirmation page to enhance customer engagement and boost sales!
