In this guide, we will discuss the WooCommerce thank you page hooks and provide practical examples to help you personalize and optimize the thank you page.
This is aimed at developers with visual illustrations and code snippets, you can create captivating post-purchase experiences that leave a lasting impression on the customers.
If you don’t have technical expertise see this guide on customising the thank you page with our drag and drop checkout plugin.
So without any further ado, let’s jump into the tutorial.
On This Page
- 1 WooCommerce Thank You Page Hooks Visual Guide
- 2 List of WooCommerce Thank You Page Hooks
- 3 Conclusion
WooCommerce Thank You Page Hooks Visual Guide
Here’s the visual guide of WooCommerce thank you page hooks.
List of WooCommerce Thank You Page Hooks
Here are some commonly used WooCommerce Thank You page hooks:
- woocommerce_before_thankyou
- woocommerce_thankyou_order_received_text
- woocommerce_order_item_meta_start
- woocommerce_order_item_meta_end
- woocommerce_order_items_table
- woocommerce_order_details_after_order_table
- woocommerce_thankyou
These hooks allow developers to modify and personalize various aspects of the Thank You page in WooCommerce. Utilizing these hooks effectively will enable you to create a tailored post-purchase experience that aligns with your brand and enhances customer satisfaction.
Note: For more details and specific use cases, it is recommended to consult the official WooCommerce documentation.
Following is the detail and example of each hook.
1. woocommerce_before_thankyou
The woocommerce_before_thankyou hook in WooCommerce allows you to add custom content or perform actions above the default content of the thank you message. It will enable inserting personalized messages, promotional offers, or other desired content.
1.1. Add Custom Message Using the woocoommerce_before_thankyou Hook
To use the woocommerce_before_thankyou hook, we need to create a function to output the desired text or message above the default thank you message. Then we need to use the add_action() to hook our custom function.
Note: You can add any content inside the function you want to display before the default thank you message text.
The first parameter of the add_action() function is the hook name (woocommerce_before_thankyou), and the second parameter is the name of our custom function (woosuite_custom_before_thankyou_content).
Code:
// Add custom content before the Thank You page
function woosuite_custom_before_thankyou_content() {
echo '<h2>Thank You for Your Purchase!</h2>';
echo '<p>We appreciate your business and hope you enjoy your new products.</p>';
}
add_action('woocommerce_before_thankyou', 'woosuite_custom_before_thankyou_content');
1.2. Final Results
Following is the result after adding the above code to my demo store.
2. woocommerce_thankyou_order_received_text
This hook lets you customize the default "Thank you. Your order has been received." message on the thank you page. You can modify the text or replace it with your personalized message.
2.1. Replace the Default Thank You Message Using the woocoommerce_thankyou_order_received_text Hook
The following code snippet defines a function woosuite_custom_order_received_text that takes the $order parameter. Inside the function, it echoes a custom thank you message, "Thank you for your order! Your payment has been successfully received."
Note: You can add any content inside the function you want to display instead of the default thank you message.
The add_action function hooks the woosuite_custom_order_received_text function to the woocommerce_thankyou_order_received_text action. This action hook lets you modify the default thank you text on the WooCommerce thank you page.
With this code, whenever the woocommerce_thankyou_order_received_text action is triggered, the custom thank you message defined in the woosuite_custom_order_received_text function will be displayed on the thank you page, replacing the default text.
The number ‘10’ specifies the priority at which the function will be executed. Lower numbers have higher priority, meaning they will be executed earlier. In this case, the priority is set to 10, indicating that the (woosuite_custom_order_received_text) function will be executed with a medium priority.
The number ‘1’ specifies the number of arguments the hooked function (woosuite_custom_order_received_text) expects to receive.
Code:
// Customize the "Thank you. Your order has been received." message on the Thank You page
function woosuite_custom_order_received_text($order) {
echo '<p>Thank you for your order! Your payment has been successfully received.</p>';
}
add_action('woocommerce_thankyou_order_received_text', 'woosuite_custom_order_received_text', 10, 1);
2.2. Final Results
Following is the result after adding the above code to my demo store.
3. woocommerce_order_item_meta_start
The woocommerce_order_item_meta_start hook is triggered at the start of each order item's metadata on the WooCommerce thank you page. You can use this hook to modify or add custom content to the metadata section of each order item.
3.1. Add Content at the Start of Order Item Metadata Using the woocommerce_order_item_meta_start Hook
To use the woocommerce_order_item_meta_start hook, we need to create a function that will accept three parameters($idem_id, $item, and $order) to output the desired text or message at the start of the order item metadata.
Note: You can add any content you want to display at the start of the order item’s metadata.
Then we need to use the add_action() to hook our custom function.
The first parameter of the add_action() function is the hook name (woocommerce_order_item_meta_start), and the second parameter is the name of our custom function (woosuite_add_custom_content_to_order_item_meta_start).
The number ‘10’ specifies the priority at which the function will be executed. Lower numbers have higher priority, meaning they will be executed earlier.
The number ‘3’ specifies the number of arguments the hooked function (woosuite_add_custom_content_to_order_item_meta_start) expects to receive.
Code
// Add custom content to the start of order item metadata on the thank you page
function woosuite_add_custom_content_to_order_item_meta_start($item_id, $item, $order) {
echo '<p>This is custom content added at the start of order item metadata.</p>';
}
add_action('woocommerce_order_item_meta_start', 'woosuite_add_custom_content_to_order_item_meta_start', 10, 3);
3.2. Final Results
Following is the result after adding the above code to my demo store.
4. woocommerce_order_item_meta_end
The woocommerce_order_item_meta_end hook is triggered at the end of each order item's metadata on the WooCommerce thank you page. You can use this hook to modify or add custom content to the metadata section of each order item.
4.1. Add Content at the End of Order Item Metadata Using the woocommerce_order_item_meta_end Hook
To use the woocommerce_order_item_meta_end hook, we need to create a function that will accept three parameters($idem_id, $item, and $order) to output the desired text or message at the end of the order item metadata.
Note: You can add any content you want to display at the end of the order item’s metadata.
Then we need to use the add_action() to hook our custom function.
The first parameter of the add_action() function is the hook name (woocommerce_order_item_meta_end), and the second parameter is the name of our custom function (woosuite_add_custom_content_to_order_item_meta_end).
The number ‘10’ specifies the priority at which the function will be executed. Lower numbers have higher priority, meaning they will be executed earlier.
The number ‘3’ specifies the number of arguments the hooked function (woosuite_add_custom_content_to_order_item_meta_end) expects to receive.
Code:
// Add custom content to the end of order item metadata on the thank you page
function woosuite_add_custom_content_to_order_item_meta_end($item_id, $item, $order) {
echo '<p>This is custom content added at the end of order item metadata.</p>';
}
add_action('woocommerce_order_item_meta_end', 'woosuite_add_custom_content_to_order_item_meta_end', 10, 3);
4.2. Final Results
Following is the result after adding the above code to my demo store.
5. woocommerce_order_items_table
The woocommerce_order_details_after_order_table hook is triggered after the order details table on the WooCommerce thank you page. You can use this hook to add custom content or perform specific actions after the order details table.
5.1. Customize the Order Item Table
In this example, we define the woosuite_customize_order_items_table() function, which accepts the $order object as a parameter. Inside the function, we echo out a custom table row (<tr>) with a single table data cell (<td>) containing the desired custom content.
Note: You can add any content you want to display in the order items table. You can even create a new order detail table.
Then we need to use the add_action() to hook our custom function.
The first parameter of the add_action() function is the hook name (woocommerce_order_items_table), and the second parameter is the name of our custom function (woosuite_customize_order_items_table).
Code:
// Customize the order items table on the thank you page
function woosuite_customize_order_items_table($order) {
echo '<tr>';
echo '<td colspan="2">Custom content for order items table</td>';
echo '</tr>';
}
add_action('woocommerce_order_items_table', 'woosuite_customize_order_items_table');
5.2. Final Results
Following is the result after adding the above code to my demo store.
6. woocommerce_order_details_after_order_table
The woocommerce_order_items_table hook is triggered within the order items table on the WooCommerce thank you page. You can use this hook to modify or add custom content to the order items table.
6.1. Add Content After the Order Details Table
In this example, we define the woosuite_add_custom_content_after_order_table() function, which accepts the $order object as a parameter. Inside the function, we echo a few lines of HTML code to display the desired content.
Note: You can add any content you want to display after the order details table.
Then we need to use the add_action() to hook our custom function.
The first parameter of the add_action() function is the hook name (woocommerce_order_details_after_order_table), and the second parameter is the name of our custom function (woosuite_add_custom_content_after_order_table).
The number ‘10’ specifies the priority at which the function will be executed. Lower numbers have higher priority, meaning they will be executed earlier.
The number ‘1’ specifies the number of arguments the hooked function (woosuite_add_custom_content_after_order_table) expects to receive.
Code:
// Add custom content after the order details table on the thank you page
function woosuite_add_custom_content_after_order_table($order) {
echo "<section><h2>Congrats! Get 50% off your next purchase!</h2>
<div><p>As a special thanks for shopping with us today, we’d like to give you 50% off your next order of any full-priced items in our store.</p>
<p>Use code <code>[ 50special ]</code> on your next order.</p>
</div>
</section>";
}
add_action('woocommerce_order_details_after_order_table', 'woosuite_add_custom_content_after_order_table', 10, 1);
6.2. Final Results
Following is the result after adding the above code to my demo store.
7. woocommerce_thankyou
This hook allows you to add content or modify the HTML output on the thank you page. It is placed at the end of the thank you page. You can use this hook to insert custom messages, additional HTML elements, or even integrate third-party scripts or services.
7.1. Add Custom Message Using the woocoommerce_thankyou Hook
To use the woocommerce_thankyou hook, we need to create a function to output the desired text or message at the end of the thank you page. Then we need to use the add_action() to hook our custom function.
Note: You can add any content you want to display in the order item table. You can even create a new order detail table.
The first parameter of the add_action() function is the hook name (woocommerce_thankyou), and the second parameter is the name of our custom function (woosuite_custom_thankyou_message).
Code:
// Add a custom message at the end of the thank you page
function woosuite_custom_thankyou_message($order_id) {
echo '<p>Thank you for your order! We appreciate your business.</p>';
}
add_action('woocommerce_thankyou', 'woosuite_custom_thankyou_message');
7.2. Final Results
Following is the result after adding the above code to my demo store.
Conclusion
That’s it for today’s guide.
I hope this guide was helpful to you and you were able to customize the WooCommerce thank you page. I have used the primary examples of each hook to give you a better understanding.
