The most important aspect of a successful thank you page is making sure people see it. You don’t need anything fancy or complicated. It just needs to make a good first impression by standing out from the rest of the site.
The purpose of this article is to provide you with a general tutorial on how to customize WooCommerce thank you page or order received page using code.
Why customize WooCommerce thank you page?
The thank you page gives you a way to stay in touch with your customers after their purchase.
You may overlook the importance of the order confirmation or thank you page in your online store, but it is actually a crucial part of the sales process.
The default WooCommerce thank you page is boring and a dead end for customers. Customers are confused as to what’s next.
Instead, if you customize it, you can:
- Add onboarding instructions, next steps…
- Promote related products via cross-selling and upselling
- Use coupons to encourage repeat purchases
- Provide valuable resources to customers
- Engage customers with social proof, videos, etc.
In light of that, let’s see how we can easily create and customize a custom thank you page using code. Dear developers, all eyes here!
Customize WooCommerce thank you page with code
There are three ways to customize the thank you page or order received page using code:
- Creating a redirect
- Using filters
- Overwriting template files
Also, keep this post on safely adding code to the file open in another tab for reference.
Let’s see each of three ways in detail.
Customizing thank you page by creating a redirect
It is simple to make redirection by creating a new plugin or opening the file functions.php and enter the following code to the end of the file.
add_action( 'template_redirect', 'sa_custom_redirect_after_purchase' );
function sa_custom_redirect_after_purchase() {
global $wp;
if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/' );
exit;
}
}
Here’s the custom thank you page after placing an order.
Redirecting seems good, but this is missing important things such as order summary table, billing and shipping details and other important information that WooCommerce currently provides.
Customizing thank you page using filters
Instead of creating a thank you page, you may want to change the page title or change some text before order information. In such cases, you can use filters.
Changing the thank you page title
add_filter( 'the_title', 'sa_title_order_received', 10, 2 );
function sa_title_order_received( $title, $id ) {
if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
$title = "Thank you for your order :)";
}
return $title;
}
WooCommerce provides the function is_order_received_page() in includes/wc-conditional-functions.php file. This is how the changed title would appear:
Personalizing the thank you page title
You can do this to include the customer’s name in the title or anything else.
add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 );
function sa_personalize_order_received_title( $title, $id ) {
if ( is_order_received_page() && get_the_ID() === $id ) {
global $wp;
// Get the order. Following lines are present in order_received() in includes/shortcodes/class-wc-shortcode-checkout.php file
$order_id = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) );
$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );
if ( $order_id > 0 ) {
$order = wc_get_order( $order_id );
if ( ! $order || ! hash_equals( $order->get_order_key(), $order_key ) ) {
$order = false;
}
}
if ( $order instanceof WC_Order ) {
$title = sprintf( "You are awesome, %s!", esc_html( $order->get_billing_first_name() ) );
}
}
return $title;
}
This will look like this:
Customizing the text before order information
The default text shown before the order information is “Thank you. Your order has been received.”.
This text comes from the file templates/checkout/thankyou.php. You can change this text using a filters available in WooCommerce which is woocommerce_thankyou_order_received_text.
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 );
function sa_update_order_received_text( $text, $order ) {
$text .= 'We have emailed the order receipt to you.';
return $text;
}
This code will append the text “We have emailed the order receipt to you.” to the existing text.
If you want to overwrite the text completely, you need to avoid concatenating the $text variable.
$text = 'We have emailed the purchase receipt to you.';
If you want to add instructions here that need the customer to download a form, you can do that too.
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 );
function sa_change_order_received_text( $text, $order ) {
$text = 'We have emailed the purchase receipt to you. Please make sure to fill <a href="https://demo.storeapps.org/form.pdf">this form before attending the event.';
return $text;
}
This will look like this:
Customizing thank you page by overwriting WooCommerce template files
WooCommerce shows the contents of the thank you page from the thankyou.php template file that can be found in woocommerce/templates/checkout/ folder.
You will need some PHP knowledge if you want to choose this method to customize WooCommerce thank you page.
You can use your own template by copying the thankyou.php file to your theme’s folder in a similar folder structure.
For example, if you are using the Storefront theme, then your thankyou.php should be copied to:
wp-content/themes/storefront/woocommerce/checkout/ folder. You will need to create the two folders, ‘woocommerce’ & ‘checkout’.
When WooCommerce finds the same template is present in your own theme, then priority is given to the template present in your theme.
Let’s take an example. On the WooCommerce default thank you page, the payment method is shown in the beginning and in the order details.
We want to provide a coupon code to the customer for their next purchase & remove the payment method from the top section.
Below is the thankyou.php template:
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="woocommerce-order">
<?php if ( $order ) : ?>
<?php if ( $order->has_status( 'failed' ) ) : ?>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions">
<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php _e( 'Pay', 'woocommerce' ) ?>
<?php if ( is_user_logged_in() ) : ?>
<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( 'My account', 'woocommerce' ); ?>
<?php endif; ?>
</p>
<?php else : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received. We have emailed you the order receipt for this transaction.', 'woocommerce' ), $order ); ?></p>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
<li class="woocommerce-order-overview__order order">
<?php _e( 'Transaction ID:', 'woocommerce' ); ?>
<strong><?php echo $order->get_order_number(); ?></strong>
</li>
<li class="woocommerce-order-overview__date date">
<?php _e( 'Date:', 'woocommerce' ); ?>
<strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong>
</li>
<li class="woocommerce-order-overview__total total">
<?php _e( 'Total:', 'woocommerce' ); ?>
<strong><?php echo $order->get_formatted_order_total(); ?></strong>
</li>
</ul>
<?php endif; ?>
<p>Congratulations on your first order. Here is a 15% discount on your next order. Use the coupon code <strong>WELCOME15</strong> to avail the discount.</p>
<?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<?php else : ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Thank you. Your order has been received.', 'woocommerce' ), null ); ?></p>
<?php endif; ?>
</div>
You might want to change the data shown in the order details table & the customer details (when logged in).
Those are coming from another file. WooCommerce uses a function woocommerce_order_details_table() that is attached to the woocommerce_thankyou hook.
The function woocommerce_order_details_table() is defined in includes/wc-template-functions.php file.
The thank you page is a collection of four different template files:
- templates/checkout/thankyou.php
- templates/order/order-details.php
- templates/order/order-details-item.php
- templates/order/order-details-customer.php
Once you know what data is coming from which template, you just need to copy the right template to your theme’s folder & that’s all.
Now, let’s see how to customize WooCommerce thank you page for a product variation.
How to redirect to a custom thank you page based on variation ID using hook?
add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 );
function sa_redirect_product_attribute_based( $order_id ) {
$order = wc_get_order( $order_id );
if ( $order instanceof WC_Order ) {
foreach( $order->get_items() as $item ) {
// Add whatever variation id you want below here
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
// change below to the URL that you want to send your customer to
wp_redirect( 'https://demo.storeapps.org/custom-thank-you/' );
}
}
}
}
Print text on thank you page based on product attribute
Extending the above example, you can also display any custom text on the WooCommerce thank you page based on the variation id. Here’s the code for it:
add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 );
function sa_show_custom_text_by_variation_id( $order_id ) {
$order = wc_get_order( $order_id );
if ( $order instanceof WC_Order ) {
foreach( $order->get_items() as $item ) {
// Add whatever variation id you want below here. My attributes are Color, Size
if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
echo '<p>Do not hesitate to reach out to us in case you want to exchange the T-shirt for a different size.</p>';
}
}
}
}
When you add the code, the thank you page would look like this:
That’s quite a lot of code snippets here. If you are not into coding and want an easy solution, read below to discover a powerful plugin.
How to set up a custom WooCommerce thank you page per product and sitewide using a plugin?
Customizing thank you page involves a lot of elements. It’s not that easy it seems so. A small mistake you make while adding the code snippet and everything goes haywire.
Therefore if you want to focus more on your sales and marketing and save yourself from the coding hassles, we suggest using the Custom Thank You Page for WooCommerce plugin.
It helps you set up a WooCommerce custom thank you page per product as well as sitewide. We’ll add support for product variaition soon.
A thank you page optimized with this plugin allows you to upsell (using Smart Offers), build an email list, promote your offers, collect feedback, show video message, coupons and do other things.
Your default WooCommerce thank you page will convert into a powerful marketing tool like this:
More plugin features:
- Four readymade high-converting thank you page templates to help you get started with a bang.
- Redirect users after purchase/payment to affiliate links, third-party links, or resources.
- Gives you an opportunity to build the thank you page as per your favorite theme, plugins, and page editors & design the page the way you desire.
Final words
Hopefully, this article would have helped you to understand the importance of customizing a custom thank you page along with a good understanding of how to do it via a code and plugin.
The use of this small page can be an excellent opportunity to increase sales, regardless of how normal it might appear to us.