Order Received (Thank you) page

Welcome to a complete guide about WooCommerce thank you page customization. If you think I forget to mention something in it, just leave a comment down below.

Thank you page URL

I suppose it is the first thing I would like to talk about in this tutorial. I would like to show you how to change the default thank you page URL and how to get it for a specific order.

How to change order received page URL?

Before I show you how to do that, I would like to remind you that by default this URL looks like /checkout/order-received/123/?key=wc_order_XYZ, where 123 is an order ID and XYZ is an order key. And we only can change two things here:

• checkout slug which is the slug of the checkout page of your WooCommerce store, so you can just go to Pages and change it like you change it for any WordPress page.
• order-received slug, which is a checkout endpoint, in order to change it, please go to WooCommerce settings, then Advanced tab.

Let’s change it to .../checkout/thank-you/... for example.

But about if you would like to change the thank you page URL to something like example.com/thank-you? Is that even possible? Absolutely yes, but in that case you need to create a custom WordPress page with thank-you slug and perform a redirect to it from the actual thank you page.

Get thank you page url

I already have a tutorial on my website where I show how to get WooCommerce page URLs programmatically, like shop, cart or checkout pages, but there is no mention of WooCommerce order received page URL. So, let’s dive into it now.

When we take a look at the default thank you page URL, which is /checkout/order-received/123/?key=wc_order_XYZ, we have already figured it out, that it contains an order ID. For us it means that if we would like to generate an URL for a thank you page programmatically, we have to know the ID of the order.

$order = wc_get_order( $order_id );
echo $order->get_checkout_order_received_url();

Thank you page hooks

The next thing I want to talk about – WooCommerce action and filter hooks that are presented on the order received page. There are plenty of things you can do with hooks, let’s make a detailed look on some of them.

Redirect to a custom Thank you page

There are could be different reasons you may need a custom order received page on your WooCommerce store – maybe you just want the page URL to be like example.com/thank-you or maybe even you would like different thank you pages for different payment methods.

No matter what reasons you have, the solution will be the same – to perform a redirect on template_redirect action hook. Yes, I know that template_redirect is not exactly a thank you page hook, it is presented on any WordPress website page, but think I should mention it here, because it is super-useful.

/**
 * @snippet       Custom Thank You Page Redirect
 * @author        Misha Rudrastyh
 * @url           https://rudrastyh.com/woocommerce/thank-you-page.html#custom-thank-you-page
 */
add_action( 'template_redirect', 'rudr_redirect_custom_thank_you' );

function rudr_redirect_custom_thank_you(){
		
	// do nothing if we are not on the order received page
	if( ! is_wc_endpoint_url( 'order-received' ) || empty( $_GET[ 'key' ] ) ) {
		return;	
	}
		
	wp_safe_redirect( site_url( 'thank-you' ) );

}

You can use some conditions here as well. I already mentioned my tutorial about creating a redirect to another page depending on a payment method used. The redirect is possible to condition to products purchased.

	// first of all we need WC_Order object
	$order_id = wc_get_order_id_by_order_key( $_GET[ 'key' ] );
	$order = wc_get_order( $order_id );
	// get order items
	foreach( $order->get_items() as $item ) {
		if( 123 === $item->get_product_id() ) { // if product 123 is in the order
			wp_redirect( 'YOUR URL' );
			exit;
		}
	}

• Please keep in mind that order items and products are different things,
• The difference between wp_redirect() and wp_safe_redirect(), is that the first one allows to redirect to any external URL, and the second one – only to your website domain, though you can change that with the hook.
• The code can be inserted to your current theme functions.php file.

Change Thank you page title

Now let’s make some changed to Thank you page content. And we are going to begin with the title. By the way you can definitely find a tutorial on the internet, where it is recommended to use WordPress the_title hook. I am not sure that it is a good idea within our context. Isn’t it better to use a WooCommerce hook made specifically for this purpose? And this hook is woocommerce_endpoint_order-received_title.

And also I am thinking why to not show you woocommerce_thankyou_order_received_text filter hook that allows to change thank you page subtitle.

Let’s do it 💪 All the code from this tutorial you can insert to you current theme functions.php but I recommend to use a child theme or a custom plugin.

/**
 * @snippet       Change Thank You Page Title
 * @author        Misha Rudrastyh
 * @url           https://rudrastyh.com/woocommerce/thank-you-page.html#change_title
 */
add_filter( 'woocommerce_endpoint_order-received_title', 'misha_thank_you_title' );
 
function misha_thank_you_title( $old_title ){

 	return 'You\'re awesome!';

}

Do you see (Line 3) that this hook has the only one argument – $old_title, but what about order details? Well, you can easily get the order id from $_GET[ 'key' ] variable $order_id = wc_get_order_id_by_order_key( $_GET[ 'key' ] ) and after that to get the order object $order = wc_get_order( $order_id ) from the order ID.

The second hook woocommerce_thankyou_order_received_text makes it easier because WC_Order object is available as a function argument.

add_filter( 'woocommerce_thankyou_order_received_text', 'misha_thank_you_subtitle', 20, 2 );

function misha_thank_you_subtitle( $thank_you_title, $order ){

	return 'Oh ' . $order->get_billing_first_name() . ', thank you so much for your order!';

}

And here is the result:

Add content or a shortcode to Thank you page

There are three hooks that can help you with that:

• woocommerce_thankyou_order_received_text – we’ve already made a quick look above,
• woocommerce_thankyou – runs just after the order details,
• woocommerce_thankyou_METHOD – the same as the previous one, but can be connected to a payment method slug.

I am going to use woocommerce_thankyou hook to display several latest products just below the order details.

add_action( 'woocommerce_thankyou', 'misha_shortcode_or_content' );

function misha_shortcode_or_content( $order_id ) {

	echo do_shortcode( '[products limit="3"]' );

}

Thank You Page Templates

In all the examples you’ve seen in this tutorial I used hooks. A hook can be applied very easily – just insert it to the functions.php / child theme’s functions.php / custom plugin.

But not always hooks allow us to make the customization we need. If you open your WooCommerce plugin folder, you will find the templates directory there. But in terms of this tutorial we’re interested in the following files:

• templates/checkout/thankyou.php
• templates/checkout/order-details.php
• templates/checkout/order-details-item.php
• templates/checkout/order-details-customer.php

Of course you do not have to change the content of these files directly inside WooCommerce plugin folder. All you need to do is to choose the file you would like to change and duplicate it in your current theme’s woocommerce folder.

After that you can make changes in this file! But be careful – hooks are a more safe way to make changes of course. Just imagine you changed so many of WooCommerce template files and… the new WooCommerce version arrived. You won’t lose your changes but maybe your code won’t work with that new WooCommerce version as expected, so you will have to check every changed template.

Collect additional customer details on your Thank You page

1. Add a HTML form

So, we need a form, right? Where would we add it? If just after the title, we can use woocommerce_thankyou_order_received_text, if below it, woocommerce_thankyou is a perfect fit.

Ok, so my form is going to be super-simple.

<?php
add_action( 'woocommerce_thankyou', 'misha_poll_form', 4 );

function misha_poll_form( $order_id ) {

 	?>
		<h2>What do you think about my shop?</h2>
		<form id="thankyou_form">
			<label><input type="radio" name="like" value="superb"> Superb</label>
			<label><input type="radio" name="like" value="good enough"> Good enough</label>
			<label><input type="radio" name="like" value="could be better"> Could be better</label>
			<input type="hidden" name="action" value="collect_feedback" />
			<input type="hidden" name="order_id" value="<?php echo $order_id ?>" />
			<?php wp_nonce_field( 'thankyou'.$order_id, 'thankyou_nonce' ) ?>
		</form>
	<?php

}

Some notes:

• Line 1 – If you set the hook priority to 9 and lower, the form will be displayed before the Order details section, if 10 and higher – after the addresses section.
• You do not see a submit button – I didn’t forget it, we are going to send this form with AJAX!
• Line 11 – Do not forget about a nonce, we need it for security reasons.

2. Send AJAX request

You can add the code to a .js file of course, but in that case do not forget to pass the url parameter correctly.

jQuery( function( $ ) {
	$( 'input[type=radio][name=like]' ).change( function() {
		$.ajax({
			url: woocommerce_params.ajax_url,
			type: 'POST',
			data: $( '#thankyou_form' ).serialize(),
			beforeSend: function( xhr ){
				$( '#thankyou_form' ).html( 'Thank you! You feedback has been send!' );
			},
			success: function( data ){
				console.log( data );
			}
		});
	});
});

So, if you’ve done everything correctly, here is what you should got:

3. Process the AJAX request

Now the only thing left is to process the form. By the way, you can read more about AJAX requests in this category.

add_action( 'wp_ajax_collect_feedback', 'misha_thankyou_ajax' ); // wp_ajax_{ACTION}
add_action( 'wp_ajax_nopriv_collect_feedback', 'misha_thankyou_ajax' );

function misha_thankyou_ajax(){

	// security check
	check_ajax_referer( 'thankyou'. $_POST[ 'order_id' ], 'thankyou_nonce' );

	$order = wc_get_order( $_POST[ 'order_id' ] );
	$order->add_order_note( $order->get_formatted_billing_full_name() . '  thinks that the shop is ' . sanitize_text_field( $_POST[ 'like' ] ), 0, true );
	
	die;

}

Go to the order edit page and find the Order notes metabox. Of course you can also change the order details with that form.

# WooCommerce, admin-ajax.php

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter