How to Display WooCommerce Custom Fields on the Thank You Page (Complete Guide)

Introduction

When running an online store with WooCommerce, you often need to collect additional information during checkout—like delivery preferences, notes for packaging, or special customer requests. While adding these custom fields is relatively easy, many store owners struggle to display this data on the Thank You page after checkout.

In this article, I’ll explain why these custom fields might not appear, how to display them properly using both PHP and plugins, and how this ties into different checkout methods (Gutenberg block vs Classic editor).

For a full guide on fixing custom field visibility issues during checkout itself, check out my detailed tutorial here:
👉 Fixing Custom Fields Not Showing on WooCommerce Checkout (Gutenberg vs Classic Editor)

1. Why Custom Fields Don’t Appear on the Thank You Page

The Thank You page in WooCommerce uses the hook woocommerce_thankyou, which triggers after an order is successfully placed.

However, many developers add custom checkout fields without properly saving them as order meta data, which means WooCommerce doesn’t store or display that data later.

Common causes include:

• Custom field values not saved via woocommerce_checkout_update_order_meta

• Incorrect meta key names used in display functions

• Using block checkout (Gutenberg) without a plugin that supports Thank You page data rendering

• Theme conflicts or template overrides hiding field data

✅ Solution Preview:
To make custom fields appear, you need to:

1. Save them properly to order meta.

2. Hook into woocommerce_thankyou to display the saved data.

📸 Visual Suggestion 1:

• Type: Flow diagram showing data flow — checkout form → save meta → display on Thank You page

• Placement: Below the bullet list above

• Alt text: “WooCommerce data flow from checkout custom field submission to Thank You page display”

2. Displaying Custom Fields on the Thank You Page Using PHP

If you’re using the Classic Editor (shortcode-based checkout), you can easily handle this with PHP hooks.

Step 1: Save the Custom Field to Order Meta

Add this snippet to your theme’s functions.php file:

// Save the custom checkout field data
add_action('woocommerce_checkout_update_order_meta', 'zm_save_custom_checkout_field');
function zm_save_custom_checkout_field($order_id) {
    if (!empty($_POST['billing_custom_note'])) {
        update_post_meta($order_id, '_billing_custom_note', sanitize_text_field($_POST['billing_custom_note']));
    }
}

This ensures WooCommerce stores the custom field data under a meta key associated with the order.

Step 2: Display Field Data on the Thank You Page

// Display the custom field value on the Thank You page
add_action('woocommerce_thankyou', 'zm_display_custom_field_on_thankyou', 20);
function zm_display_custom_field_on_thankyou($order_id) {
    $custom_note = get_post_meta($order_id, '_billing_custom_note', true);
    if ($custom_note) {
        echo '<h3>Your Additional Note</h3>';
        echo '<p>' . esc_html($custom_note) . '</p>';
    }
}

💡 Tip: Use meaningful headings and styles to ensure your Thank You page remains professional.

📸 Visual Suggestion 2:

• Type: Code highlight box with heading “functions.php Example – Display Custom Fields on Thank You Page”

• Placement: Directly after the PHP code above

• Alt text: “PHP snippet to show WooCommerce custom checkout field on Thank You page”

Step 3: Test Your Changes

1. Add a product to your cart.

2. Go through the checkout process and fill out your custom field.

3. Complete the order and view the Thank You page.

You should now see the entered data displayed neatly.

3. Using a Plugin for Gutenberg Block Checkout

For stores using the new block-based checkout, PHP hooks won’t automatically render data on the Thank You page. The block checkout system relies on React components and REST API endpoints instead of PHP templates.

To handle this, use a compatible plugin such as Woo Checkout Field Editor Pro. It fully supports custom field management and displays data seamlessly across checkout, order summary, and Thank You pages.

Steps to Use the Plugin:

1. Install and Activate Woo Checkout Field Editor Pro

2. Go to WooCommerce → Checkout Fields

3. Add a new field under Additional Fields

4. Enable Display on Thank You Page if the plugin provides this option (available in most versions)

5. Save your settings

Your custom fields will now automatically show on the Thank You page, without touching any code.

📸 Visual Suggestion 3:

• Type: Screenshot of Woo Checkout Field Editor Pro interface showing Thank You Page display toggle

• Placement: After Step 4

• Alt text: “Woo Checkout Field Editor Pro settings showing display custom fields on Thank You page option”

4. Styling and Personalizing the Thank You Page

A well-designed Thank You page improves user trust and encourages repeat purchases. Along with displaying custom field data, consider adding:

• Personalized messages using customer names

• Order summary highlights

• A “Continue Shopping” button

• Links to FAQs or shipping policies

Here’s an example of how you can personalize the message dynamically:

add_action('woocommerce_thankyou', 'zm_custom_thankyou_message', 25);
function zm_custom_thankyou_message($order_id) {
    $order = wc_get_order($order_id);
    $first_name = $order->get_billing_first_name();
    echo '<p>Thank you, ' . esc_html($first_name) . '! Your order details are below.</p>';
}

This adds a personal touch while keeping your Thank You page informative.

📸 Visual Suggestion 4:

• Type: Screenshot of a customized Thank You page with customer name and custom field shown

• Placement: After the personalization code example

• Alt text: “Customized WooCommerce Thank You page showing customer name and custom checkout field value”

5. Common Mistakes to Avoid

Even experienced developers can make errors that prevent custom fields from displaying correctly.
Here are some key points to check:

• Wrong meta key name: Ensure the meta key matches the one used during saving.

• Code placement: Always use functions.php or a custom plugin, not a page builder code block.

• Block vs Classic confusion: Make sure you’re not mixing checkout types — Gutenberg blocks ignore PHP hooks.

• Plugin conflicts: Deactivate other checkout customizer plugins if data isn’t showing.

• Caching: Clear cache after adding new code, as stored templates may hide changes.

By avoiding these issues, you can save hours of debugging.

6. When to Use PHP vs Plugin

If you’re unsure which approach to choose, here’s a quick breakdown:

Criteria	PHP Method	Plugin Method
Editor Type	Classic Editor (Shortcode Checkout)	Gutenberg Block Checkout
Control Level	Full (custom logic)	Easy UI-based
Skill Required	Intermediate PHP	Beginner-friendly
Maintenance	Manual	Automatic updates
Performance	Lightweight	Slightly heavier

Both approaches work perfectly if implemented correctly. The key is to choose the one compatible with your WooCommerce checkout setup.
📸 Visual Suggestion 5:

• Type: Comparison table visual (PHP vs Plugin)

• Placement: Below the comparison table

• Alt text: “Comparison chart showing PHP method vs Plugin method for displaying custom fields on WooCommerce Thank You page”

7. Bonus: Display Custom Fields in Order Emails Too

Once you’ve displayed fields on the Thank You page, you can also include them in order confirmation emails:

// Add custom field to WooCommerce email
add_filter('woocommerce_email_order_meta_fields', 'zm_add_custom_field_to_email');
function zm_add_custom_field_to_email($fields) {
    $fields['billing_custom_note'] = array(
        'label' => __('Order Note'),
        'value' => get_post_meta(wc_get_order_id(), '_billing_custom_note', true),
    );
    return $fields;
}

This ensures customers and admins both see the same information consistently across all order-related communications.

Conclusion

Displaying WooCommerce custom fields on the Thank You page enhances transparency and builds customer trust. Whether you use PHP for classic checkout or a plugin like Woo Checkout Field Editor Pro for block checkout, both methods deliver professional and functional results.

For deeper insights into fixing field visibility issues during checkout itself—especially with Gutenberg block compatibility—read this related guide:
👉 Fixing Custom Fields Not Showing on WooCommerce Checkout (Gutenberg vs Classic Editor)

With these steps, your Thank You page will not only display all the right details but also improve user experience and overall trust in your WooCommerce store.