Order Received (Thank you) page in WooCommerce

In this tutorial I gonna guide you through all the ways of customizing the WooCommerce Thank You page content.

/51 comments

I welcome you in this great lesson related to WooCommerce thank you page customization. Guys, I want to remind you that I’m always glad to publish a tutorial by your request, just suggest a tutorial topic in comments and if I find it interesting, wait for a tutorial πŸ™ƒ

Coming back to WooCommerce Thank you page…

Before all, remember about overriding the templates

In the examples in this tutorial below I’m using hooks. The hooks can be applied very easily – just insert 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:

Of course you do not have to change the content of this 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 woocommerce folder. Example:

Since 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 much WooCommerce template files and… the new WooCommerce version is appeared. You won’t lose your changes but maybe your code won’t work with that new WooCommerce version as expected, you you will have to check every changed template.

Change the Thank You page title

Yay, let’s begin with the simple things. But not simple for everyone obviously – let me explain – I’ve seen a tutorial where it was recommended to change the Thank You page title with WordPress the_title hook. It is so weird πŸ‘» WooCommerce has specific hooks for that: woocommerce_endpoint_order-received_title
and woocommerce_thankyou_order_received_text. But what is the difference?

WooCommerce thank you page title
The first hook woocommerce_endpoint_order-received_title allows to change "Order received" text, the second hook woocommerce_thankyou_order_received_text – "Thank you. Your order has been received."

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.

add_filter( 'woocommerce_endpoint_order-received_title', 'misha_thank_you_title' );
 
function misha_thank_you_title( $old_title ){
 
 	return 'You\'re awesome!';
 
}
add_filter( 'woocommerce_thankyou_order_received_text', 'misha_thank_you_title', 20, 2 );
 
function misha_thank_you_title( $thank_you_title, $order ){
 
	return 'Oh ' . $order->get_billing_first_name() . ', thank you so much for your order!';
 
}

And here is the result:

How to change order received page title and subtitle in WooCommerce

Change Thank You page URL

By default its URL is .../checkout/order-received/..., but if you go to WooCommerce > Settings > Advanced in wp admin area you can change it to .../checkout/thank-you/... for example.

Checkout endpoints in WooCommerce advanced settings
Please note, that these changes don’t affect !is_wc_endpoint_url( 'order-received' ) function.

Collect additional customer details on your Thank You page

1. First off all we have to add a form

So, we need a form, right? Where would you add it? If just after the title, read above about woocommerce_thankyou_order_received_text, if below it, there are two hooks that can help you, both of them are in the same place in the code and have an $order_id argument:

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

add_action( 'woocommerce_thankyou', 'misha_poll_form', 4 );
 
function misha_poll_form( $order_id ) {
 
 	echo '<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="' . $order_id . '" />
		' . wp_nonce_field( 'thankyou'.$order_id, 'thankyou_nonce', true, false ) . '
		</form>';
 
}

Some notes:

2. Send the 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.

add_action( 'wp_footer', 'misha_send_thankyou_ajax' );
 
function misha_send_thankyou_ajax(){
 
	// exit if we are not on the Thank You page
	if( !is_wc_endpoint_url( 'order-received' ) ) return;
 
	echo "<script>
	jQuery( function( $ ) {
		$('input[type=radio][name=like]').change(function() {
			$.ajax({
				url: '" . admin_url('admin-ajax.php') . "',
				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 );
				}
			});
		});
	});
	</script>";
 
}

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

Collect customer details via custom form on the WooCommerce thank you page

3. Process the AJAX request

Now the only thing left is to process the form. By the way, you can read more about ajax 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' );
 
	if( $order = wc_get_order( $_POST['order_id'] ) ) {
		$note = $order->get_formatted_billing_full_name() . '  thinks that the shop is ' . $_POST['like'] . '.';
		$order->add_order_note( $note, 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 customer order notes

Redirect to another page depending on a product purchased or payment method used

Bur what if sometimes the default Thank You page is not enough (even the customised one)? In this case you can redirect customers to a different page with template_redirect hook.

add_action( 'template_redirect', 'misha_redirect_depending_on_gateway' );
 
function misha_redirect_depending_on_gateway(){
 
	/* do nothing if we are not on the appropriate page */
	if( !is_wc_endpoint_url( 'order-received' ) || empty( $_GET['key'] ) ) {
		return;
	}
 
	$order_id = wc_get_order_id_by_order_key( $_GET['key'] );
	$order = wc_get_order( $order_id );
 
	if( 'bacs' == $order->get_payment_method() ) { /* WC 3.0+ */
		wp_redirect( 'YOUR URL' );
		exit;
	}
}
add_action( 'template_redirect', 'misha_redirect_depending_on_product_id' );
 
function misha_redirect_depending_on_product_id(){
 
	/* do nothing if we are not on the appropriate page */
	if( !is_wc_endpoint_url( 'order-received' ) || empty( $_GET['key'] ) ) {
		return;
	}
 
	$order_id = wc_get_order_id_by_order_key( $_GET['key'] );
	$order = wc_get_order( $order_id );
 
	foreach( $order->get_items() as $item ) {
		if( $item['product_id'] == 1 ) {
			wp_redirect( 'YOUR URL' );
			exit;
		}
	}
 
}

Please do not forget to let me know in comments in case some of the snippets don’t work. And one more thing – I’ve written this tutorial just because I was asked in a comment here, so feel free to suggest the tutorial topics 😁

Related Posts

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 51

Leave a comment

php js HTML CSS Code