How to Customize the WooCommerce Thank You Page

Here is a Detailed Guide on How to Customize the WooCommerce Thank You Page.

Customizing the WooCommerce “Thank You” page is a great way to enhance the post-purchase experience for your customers. You can add personalized messages, upsell products, or integrate custom functionality. In this guide, we’ll walk through how to customize the WooCommerce Thank You page with various examples of code and customization techniques.

Ready to optimize your marketing and sales funnels? Contact us today for strategies and tools that will help you attract, engage, and convert leads faster than ever before!

Understanding the WooCommerce Thank You Page
Customizing the Thank You Page Using a Child Theme
Adding Custom Content with Hooks
Modifying the Order Information
Displaying Custom Messages Based on Order Status
Adding Upsell or Cross-sell Products
Displaying Custom Fields
Conclusion

1. Understanding the WooCommerce Thank You Page

The WooCommerce “Thank You” page is the page displayed after a customer completes a purchase. This page confirms the order and provides the customer with important details like order number, items purchased, shipping information, and more.

By default, WooCommerce uses hooks and templates to display the thank-you page. If you want to modify it, you’ll need to customize the template files or use hooks to insert custom content.

2. Customizing the Thank You Page Using a Child Theme

It’s always best to perform customizations in a child theme. This ensures that your changes are preserved even when the parent theme is updated.

If you haven’t created a child theme yet, follow this guide to create a WordPress child theme.

3. Adding Custom Content with Hooks

WooCommerce provides several hooks that allow you to add custom content to the Thank You page. You can use these hooks in your child theme’s functions.php file.

Example: Adding a Custom Thank You Message

Let’s say you want to display a custom thank-you message at the top of the page. You can do this by using the woocommerce_thankyou hook.

Add this code to your child theme’s functions.php:

function custom_thank_you_message() {
    echo '<p>Thank you for your purchase! We hope to serve you again soon.</p>';
}
add_action( 'woocommerce_thankyou', 'custom_thank_you_message', 5 );

woocommerce_thankyou: This hook is triggered after the order details are displayed on the Thank You page.
custom_thank_you_message: This is the function that displays your custom message.
5: This is the priority at which the function is called. You can adjust this to control the position of the message on the page.

Example: Displaying Order Summary in a Custom Format

If you want to modify the order summary to display additional details like a custom message or special instructions, you can do so by hooking into the woocommerce_order_details_after_order_table hook.

function custom_order_summary_content( $order ) {
    echo '<h2>Your Special Instructions:</h2>';
    echo '<p>' . get_post_meta( $order->get_id(), '_special_instructions', true ) . '</p>';
}
add_action( 'woocommerce_order_details_after_order_table', 'custom_order_summary_content', 10, 1 );

In this example:

We’re adding a custom heading “Your Special Instructions”.
We’re fetching the special instructions using the get_post_meta() function.
_special_instructions is a custom field that can be added to the order during checkout.

4. Modifying the Order Information

If you want to modify the order details displayed on the Thank You page, you can hook into the WooCommerce template and customize the output.

Example: Change Order Total Label

To change the label for the order total displayed on the Thank You page, you can use the following code in your functions.php:

function change_order_total_label( $label, $order ) {
    return 'Total Amount Paid:';
}
add_filter( 'woocommerce_get_order_item_totals', 'change_order_total_label', 10, 2 );

This code changes the label from “Order Total” to “Total Amount Paid”.

5. Displaying Custom Messages Based on Order Status

WooCommerce allows you to check the order status and display different messages accordingly. For example, you can display a custom message when an order is on hold, processing, or completed.

Example: Custom Message for Different Order Statuses

function custom_order_status_message( $order_id ) {
    $order = wc_get_order( $order_id );
    $status = $order->get_status();

    if ( 'on-hold' === $status ) {
        echo '<p>Your order is on hold. We will process it as soon as possible.</p>';
    } elseif ( 'completed' === $status ) {
        echo '<p>Thank you! Your order has been completed and is on its way!</p>';
    } elseif ( 'processing' === $status ) {
        echo '<p>Your order is being processed. Thank you for your patience!</p>';
    }
}
add_action( 'woocommerce_thankyou', 'custom_order_status_message', 10, 1 );

6. Adding Upsell or Cross-sell Products

You can use the Thank You page as an opportunity to display related products, such as upsell or cross-sell items.

Example: Displaying Upsell Products

WooCommerce offers functions to retrieve and display upsell products. Use this code to show upsell items on the Thank You page:

function display_upsell_products_on_thank_you( $order_id ) {
    $order = wc_get_order( $order_id );

    foreach ( $order->get_items() as $item_id => $item ) {
        $product = $item->get_product();
        $upsells = $product->get_upsell_ids();

        if ( ! empty( $upsells ) ) {
            echo '<h3>You may also like:</h3>';
            echo '<ul>';
            foreach ( $upsells as $upsell_id ) {
                $upsell_product = wc_get_product( $upsell_id );
                echo '<li><a href="' . get_permalink( $upsell_product->get_id() ) . '">' . $upsell_product->get_name() . '</a></li>';
            }
            echo '</ul>';
        }
    }
}
add_action( 'woocommerce_thankyou', 'display_upsell_products_on_thank_you', 20, 1 );

7. Displaying Custom Fields

If you want to display additional customer information, such as custom checkout fields, on the Thank You page, you can do so by using custom metadata.

Example: Displaying a Custom Checkout Field

Let’s say you have a custom field called “Gift Message” added during checkout. To display this field on the Thank You page, you can add the following code:

function display_custom_checkout_field_on_thank_you( $order_id ) {
    $order = wc_get_order( $order_id );
    $gift_message = get_post_meta( $order_id, '_gift_message', true );

    if ( ! empty( $gift_message ) ) {
        echo '<p><strong>Gift Message:</strong> ' . esc_html( $gift_message ) . '</p>';
    }
}
add_action( 'woocommerce_thankyou', 'display_custom_checkout_field_on_thank_you', 10, 1 );

8. Conclusion

Customizing the WooCommerce Thank You page can significantly improve the customer experience and increase conversions. By using hooks and custom code in your child theme, you can tailor the page to fit your business needs. Whether it’s displaying a personalized message, adding related products, or showing custom checkout fields, WooCommerce provides plenty of flexibility to customize this important post-purchase page.

Remember to test your customizations thoroughly to ensure they work as expected across different order statuses and scenarios.