WooCommerce Thank You Page – 4 Basic Things You Must Know

Woocommerce thank you page

There is an obvious fact that whether you are the owner of a traditional or online store, it is crucial to say “thank you” to your customers. If the customers feel satisfied with your nice thankful message, they will most likely come back to your store for another purchase or share the services they have bought from your store with their family and friends. Wow, that means you have gained free marketing from your own customers. Sound great, right?

If you are controlling a WooCommerce store and desire for boosting sales, it is necessary to consider the importance of WooCommerce Thank You Pages. This is also the reason why we are here to help you understand about Thank You Pages to the fullest.

Before digging into features, functions, and customization, we first give you a clear definition of WooCommerce Thank You Pages.

What is a Thank You page in WooCommerce?

WooCommerce Thank You Page, also sometimes called Order Received Page in WooCommerce, is the page that your customers will see after form submission. The Thank You page URL has the default format of …/checkout/order-received/…

As normal, no matter which product your customers have ordered, WooCommerce will redirect them to the same Thank You page. But for some reason, many more store owners tend to create custom Thank You pages per product in their WooCommerce stores.

Now, spend moments taking a glance at a default WooCommerce Thank You page built with Elementor.

woocommerce-thank-you-page-elementor

The primary function of a default WooCommerce Thank You page is to thank your customers and show the details of the order that they have taken before that. As the picture shows, you can see that it often consists of four main parts, including:

  • Thank you message: first of all, send the thank you message to your customers for placing the order from your store. It is often “Thank you. You order has been received.”
  • General information: after saying thank you, the page shows order number, order date, email, total price, and payment method.
  • Order details: this part includes products’ names, specific prices of every product, shipping free, payment method, and total price.
  • Address: it is where the billing and shipping addresses of the customer are displayed.

In addition to these default elements, you can add some other interesting parts by customizing your WooCommerce Thank You page:

  • Notification of what will happen next: for example, you can tell them that a confirmation email or phone call is coming. Or let them know about the status of their order, “Your order is being processed. You will receive a confirmation email soon.”
  • Call to action: It is the most useful part where you find a way to encourage your customers to do what you expect for the website. For example, introduce them to popular blog posts on the website, redirect them to a special offer, related products or services, or ask them for some social shares.

In general, with a custom Thank You page, there will be many things to do on it. In this way, you will have high-converting thank you examples instead of regular Thank You pages in WooCommerce.

How Thank You pages are important to your WooCommerce stores

As mentioned above, a WooCommerce Thank You page comes to confirm a completed order and provide customers with basic order information while they are waiting for their order to be done. A default page like this almost focuses on carrying out the task of letting customers see what they already know but it makes customers feel secure that your store collects and provides the right information.

However, apart from this basic function, a Thank You page can offer you more. With some customization, you can add some elements to make the Thank You page work more effectively. In this way, you will turn your WooCommerce Thank You page into an attractive custom Thank You page that can be used as a marketing tool to build trust, increase customers’ engagement, and boost sales.

How to customize Your Thank you page in WooCommerce

When having a custom Thank You page for your WooCommerce store, you can add lots of useful elements such as social share buttons, recommended products, custom content, and many others. In this part, we will give you some ways to perform this task. There are several methods to add new value to your Thank You page. In general, you can customize these pages by:

Using plugins

Both free and paid plugins are available now to help you with this customization. Every kind has its own advantages and disadvantages, but in general, the paid versions, of course, will offer more functionalities. Some typical WooCommerce custom Thank You page plugins for you to consider to use are NextMove Lite, NextMove premium version, and WC Custom Thank You.

woocommerce custom thank you page plugin

Creating a Redirect

Another nice way for you is redirecting customers to a custom Thank You page after they complete their order. By default, WooCommerce offers the template_redirect hook that helps you cover this task. To create a redirect, you have to:

  • Access you WooCommerce functions.php file by following the path Appearances > Theme Editor > functions.php
  • Copy and paste the code shown below at the end of the functions.php file
<?php 

add_action( 'template_redirect', 'woo_custom_redirect_after_purchase' );
function woo_custom_redirect_after_purchase() {
	global $wp;
	if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
		wp_redirect( 'http://localhost:8888/woocommerce/custom-thank-you/' );
		exit;
	}
}

So now, your customers will be redirected to the custom Thank You page when they place an order.

Using Filters

With WooCommerce’s filters, you can change the title, make it personalized, and change the text before the order details with custom code.

  • Change the page title by adding the code below in the functions.php file.
<?php

add_filter( 'the_title', 'woo_title_order_received', 10, 2 );

function woo_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;
}

Then, you will have a page like the picture below:

  • Make the title personalized

You can add the customer’s name or any other elements by adding the code below in the functions.php file.

<?php

add_filter( 'the_title', 'woo_personalize_order_received_title', 10, 2 );
function woo_personalize_order_received_title( $title, $id ) {
    if ( is_order_received_page() && get_the_ID() === $id ) {
	    global $wp;

        // Get the order. Line 9 to 17 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->get_order_key() != $order_key ) {
                $order = false;
            }
        }

        if ( isset ( $order ) ) {
            //$title = sprintf( "You are awesome, %s!", esc_html( $order->billing_first_name ) ); // use this for WooCommerce versions older then v2.7
	    $title = sprintf( "You are awesome, %s!", esc_html( $order->get_billing_first_name() ) );
        }
    }
    return $title;
}

Then, you will have a page like the picture below:

  • Change the text before order details

In WooCommerce, the default text “Thank you. Your order has been received.” is shown before the order details. You can use the filter woocommerce_thankyou_order_received_text to add a new text to the existing one.

<?php

add_filter('woocommerce_thankyou_order_received_text', 'woo_change_order_received_text', 10, 2 );
function woo_change_order_received_text( $str, $order ) {
    $new_str = $str . ' We have emailed the purchase receipt to you.';
    return $new_str;
}

After adding this code, you will have a new text “Thank you. Your order has been received. We have emailed the purchase receipt to you.”

In case, you want to replace the existing text with a completely new one, please add the text below:

<?php

add_filter('woocommerce_thankyou_order_received_text', 'woo_change_order_received_text', 10, 2 );
function woo_change_order_received_text( $str, $order ) {
    $new_str = 'We have emailed the purchase receipt to you. Please make sure to fill <a href="http://localhost:8888/some-form.pdf">this form</a> before attending the event';
    return $new_str;
}

Then, you will have a page like the picture below:

Overriding Templates

This method allows a whole custom design, but it is more complicated than the other ones because it requires some knowledge of PHP.

As normal, all the information on WooCommerce Thank You page comes from the thankyou.php template file. But WooCommerce also allows you to use your own template. You will add it to your theme: **wp-content/themes/your theme/woocommerce/checkout/**folder. Then, you will have a custom Thank You page containing the information taken from your 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' ) ?></a>
                                <?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' ); ?></a>
                                <?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 for doing business with us. We have emailed you the purchase 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>Since this is your first order, we are happy to extend a 10% discount on your next purchase. Use the coupon code <strong>WELCOME10</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>

Depending on the custom content you expect, you can combine this customization method with other ones for the best Thank You page.

What you should do for a good Thank You page

What we really expect to gain on the Thank You page is not only confirmation but also the increase of conversion rate. Therefore, to have optimized Thank You page examples, it is essential to pay attention to the best practices below:

Stop putting normal things on your WooCommerce Thank You page because there are dozens of those kinds out there. Why don’t you make your customers more and more happy and excited with powerful words like “Congratulations,” “You are successful,” “Big thanks”. Don’t need to be lengthy. Just some words like that are exciting enough to attract your customers.

Be full of enthusiasm

Put the best content above the fold

Your customers will only spend very little time on your page; therefore, it is advisable to put your interesting content in a visible place so that customers can see it immediately when reaching the page. It would be a good idea to add call to action right here, especially if your business has an ongoing offer or upcoming event.

Show special offers

Some guy has purchased your product, reached the Thank You page, and be about to close the tab. But don’t let him leave so easily. You will get more purchases from him if you know how to keep him on the page. The best method for this case is displaying great offers together with social share icons. If the former can help you gain repeat purchases, the latter is useful for pushing engagement.

Include the human elements

This is aimed at building up the trust of the website. You can add some images of the business owner or a video of teamworking. Real-life materials are invaluable resources in the online world, contributing to pushing people to take action.

Create an eye-catching design

Content on the page is so important, but content alone is not enough. Visitors won’t take notice of the content if the design is quite poor. Therefore, find a way to make the Thank You page attractive and stylish as expected.

Don’t be wordy

Don’t let your Thank You page be filled with words and words. Your customers certainly won’t spend time reading all of them. Even they will also ignore your key content like call to action on the page. After all, say no to wordiness and keep your texts clear and concise.

Don’t show promises you can’t keep

The delivery of accurate information is what your customers need from your business. If you are not sure about some kind of details, don’t add them to the page. Don’t fail with this step because it may cause long-term effects, including loss of trust and professionalism.

In conclusion,

After our sharing, perhaps you understand more about the definition, structure, and customization of a Thank You page in WooCommerce. It’s time to stop this topic here. Before saying goodbye to you, our beloved readers, we still once remind you to never forget saying “thank you” to your customers by setting up a custom Thank You page.

There are many interesting things to learn about WooCommerce Thank You page. Then, we will mention them in detail in the next articles.

For the final word, thanks for spending time on our topic. If you have any contributions, please leave your comments below. We are so happy to answer any queries.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Download Woostify Now

Enter your email address and be the first to learn about updates and new features.

stay informed!

Subscribe to receive exclusive content and notifications