How to Edit WooCommerce Thank You Page

In the competitive world of ecommerce, every touchpoint with a customer is an opportunity to enhance their experience and solidify their loyalty. The WooCommerce thank you page, typically seen by customers after a purchase, is no exception. This often-overlooked page holds significant potential for deepening customer relationships, increasing sales, and improving engagement. Customizing this page can transform it from a simple transactional acknowledgment into a powerful tool for conmtinued marketing and customer interaction.

FAQ

Why customize your WooCommerce thank you page?

The default WooCommerce thank you page is straightforward, displaying basic order details like order number, date, email, total, and payment method. While functional, it misses opportunities to engage customers further. Customizing your WooCommerce thank you page can significantly enhance your ecommerce strategy for several compelling reasons:

1. Improved customer experience: Personalizing the thank you page can make the shopping experience more engaging and memorable. By adding a warm, personal thank-you message or custom graphics, you can leave a lasting impression that fosters positive customer sentiment and loyalty.
2. Increased customer retention: A customized thank you page provides an opportunity to connect with customers beyond the transaction. Offering discounts on future purchases, encouraging newsletter sign-ups, or promoting a loyalty program can motivate customers to return, increasing customer retention.
3. Enhanced marketing opportunities: The thank you page is an ideal spot to introduce customers to other products or services, conduct surveys, or encourage them to follow your brand on social media. This can increase engagement and cross-sell opportunities.
4. Valuable feedback collection: By including a feedback form or survey on your thank you page, you can gather insights into customer preferences and their shopping experience. This information can be invaluable for improving your products and services.
5. Boosted word-of-mouth marketing: Encouraging customers to share their purchases on social media directly from the thank you page can amplify your brand’s reach and attract new customers.
6. Tracking and analytics: Customizing the page allows for better integration with analytics tools. Tracking how customers interact with your thank you page helps you understand their behavior better, providing data that can be used to optimize their journey further.

5 methods to edit your WooCommerce thank you page

Method 1: How to edit WooCommerce thank you page using plugins

Editing the WooCommerce thank you page using plugins is a straightforward way to enhance the checkout experience without writing any custom code. Here’s how you can do it using two popular plugins: WooCommerce thank you pages customizer and FunnelKit.

Using WooCommerce thank you pages customizer

WooCommerce thank you pages customizer is designed specifically for customizing the thank you page. It allows you to add personal touches, such as special offers, social sharing buttons, and custom messages.

1. Go to your WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. Search for WooCommerce thank you page customizer.
   
   
4. Click Install now, then Activate.
5. In the Dashboard go to Thank you page.
   
   
6. Here, you can choose different sections to customize, such as adding a thank you message, customer details, order details, and more.
7. Use the visual builder to drag and drop elements you want to include or modify.
8. Use the built-in preview function to see how your changes look in real-time.
9. Once satisfied, click Publish to make your changes live.

Using FunnelKit

FunnelKit (formerly WooFunnels) is a more comprehensive tool that offers functionalities beyond just customizing the thank you page, including building entire sales funnels.

1. Navigate to Plugins > Add new in your WordPress dashboard, search for FunnelKit.
2. Install and activate the plugin.
   
   
3. Go to FunnelKit > Funnels.
   
   
4. Select Create funnel option.
5. Choose thank you page from the available templates or start from scratch.
6. Click on the template to import it or select Start from blank if you’re starting from scratch and check the thank you checkbox.
   
   
   
7. Once the template is loaded, click on Edit to customize it.
8. You can add or remove elements such as images, text blocks, buttons, and more using the WordPress block editor.
9. Customize the layout, style, and content according to your brand and message.
10. After customization, navigate through the funnel setup to ensure that the thank you page is linked correctly to your checkout process.
11. Save your changes and make sure to test the thank you page to confirm everything works as expected.

Both plugins offer a user-friendly interface with drag-and-drop builders, making it easy to create a custom experience for your customers after they make a purchase. Choose the plugin based on your specific needs: go for WooCommerce thank you pages customizer if you need simple modifications, or choose FunnelKit for more extensive customizations and sales funnel capabilities.

Method 2: How to edit WooCommerce thank you page by creating a redirect

Another straightforward method to modify the WooCommerce thank you page is to set up a redirection by either creating a new plugin or editing the functions.php file located in wp-content/themes/your-theme-name/. To implement the redirection, append the following code at the end of the functions.php file:

add_action( 'template_redirect', 'woo_custom_redirect_after_purchase' );

function woo_custom_redirect_after_purchase() {

 global $wp;

 if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {

 wp_redirect( 'http://localhost:8888/woocommerce/custom-thank-you/' );

 exit;

 }

}

This script checks if the checkout process has concluded and then redirects to a custom URL. Keep in mind that if you opt for a redirection to a custom thank you page, it may not include certain default WooCommerce features such as the order summary table and other important order-related information which are typically available on the default page.

Potential considerations

While redirecting to a custom thank you page can enhance the post-purchase user experience by providing a more tailored page, it’s important to remember that the default WooCommerce thank you page comes with useful features like an order summary that may be missing from the custom page. If these features are essential for your customers, consider how you might replicate them on your new page.

Method 3: How to edit WooCommerce thank you page manually

Initial setup

Before starting, ensure you are working with a child theme rather than directly modifying the parent theme or WooCommerce files. Modifications to the parent theme or WooCommerce can be lost during updates.

Step 1: Obtain the thankyou.php file

Start by using an SFTP client or your web hosting’s cPanel to access your site’s file directory. Navigate to wp-content/plugins/woocommerce/templates/checkout and download the thankyou.php file to your computer.

Step 2: Modify the thankyou.php file

Open the thankyou.php file in a text editor. While simple text editors like Notepad or TextEdit can work, using a dedicated coding editor like Visual Studio Code, which supports multiple platforms (Windows, MacOS, Linux), is advisable for better functionality.

Original code snippet:

This default code snippet will be replaced in our child theme template.

<p class="woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received.', 'woocommerce' ), $order ); ?></p>

New custom code:

Here’s the revised code for our custom thank you page.

<p class="woocommerce-notice woocommerce-notice–success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you for placing an order with us!', 'woocommerce' ), $order ); ?></p>

<p class="thankyou-note">Please note that delivery times are currently estimated at 7-10 business days for U.S. delivery. Orders outside the United States may take between two weeks and 30 days to arrive and could face delays due to customs or other policies beyond our control. For queries regarding your order, please reach out to [email protected].</p>

After making your changes, save the file as thankyou.php. Use your SFTP or cPanel to upload this file to wp-content/themes/your-child-theme/woocommerce/checkout within your child theme’s directory.

CSS customizations

To enhance the appearance, add the following CSS customizations to your child theme’s style.css file:

.woocommerce-checkout p.woocommerce-notice {

 font-size: 20px;

 font-weight: 800;

 color: #3857F1;

}

.woocommerce-checkout p.thankyou-note {

 margin-bottom: 40px;

 padding: 0 0 5px 20px;

 border-left: solid 5px #c4401c;

}

Upload the updated style sheet back to your child theme folder to apply these styles.

By following these steps, you can successfully customize your WooCommerce thank you page, adding a personal touch and relevant information tailored to your customers’ needs.

Method 4: How to edit WooCommerce thank you page with filters

Editing the WooCommerce thank you page using filters involves writing custom code that hooks into WooCommerce’s existing actions and filters. Filters allow you to modify data that WooCommerce generates before it’s sent to the user’s browser. Here’s a step-by-step guide on how to do this by adding custom functions to your WordPress theme’s functions.php file or through a custom plugin specifically for your WooCommerce customizations.

Step 1: Identify the right filter

The first step is to identify the appropriate filter(s) to use. For the thank you page, the woocommerce_thankyou_order_received_text filter is quite useful for modifying the thank you message displayed to customers. You can also look for other hooks and filters depending on what specific aspect of the page you want to modify.

Step 2: Add custom code to your child theme or plugin

It’s best practice to place your custom code in a child theme’s functions.php file or a custom plugin to avoid losing changes when updating the parent theme or WooCommerce.

Here’s how you might use the woocommerce_thankyou_order_received_text filter:

add_filter('woocommerce_thankyou_order_received_text', 'customize_thank_you_message', 10, 2);

function customize_thank_you_message($thank_you_text, $order) {

 return "Thank you for your order, " . $order->get_billing_first_name() . "! We appreciate your business and hope you'll shop with us again soon!";

}

This function customizes the thank you message to include a personalized greeting using the customer’s first name.

Step 3: Modify other elements of the thank you page

You might want to modify other elements of the thank you page, such as adding additional content or custom styles. To do this, you could use other hooks such as woocommerce_thankyou. This action hook runs after the order details on the thank you page.

Here’s an example of how to add custom content:

add_action('woocommerce_thankyou', 'add_custom_content_to_thankyou_page', 20);

function add_custom_content_to_thankyou_page($order_id) {

 if (!$order_id) {

 return;

 }

Ensure the order exists.

 $order = wc_get_order($order_id);

 if (!is_a($order, 'WC_Order')) {

 return;

 }

 echo '<div class="custom-thank-you-content">';

 echo '<p>We have emailed your order confirmation to ' . $order->get_billing_email() . ' and will send you an update when your order has shipped.</p>';

 echo '</div>';

}

This code checks if there’s a valid order ID, fetches the order details, and then displays a custom message including the email address associated with the order.

Step 4: Add custom styles

If you need to style the new elements you’ve added or modify the existing styling, you can do this by adding CSS to your child theme’s style.css file:

.custom-thank-you-content {

 background-color: #f8f8f8;

 padding: 20px;

 margin-top: 20px;

 border-radius: 5px;

}

Step 5: Test your changes

After making these changes, make sure to test your thank you page thoroughly in different scenarios (e.g., different order types, logged-in vs guest users) to ensure that everything displays correctly and the page functions as expected.

By following these steps, you can effectively customize the WooCommerce thank you page to improve customer experience and add personalized touches that can contribute to customer retention and satisfaction.

Benefits of using filters:

• Non-destructive: Using filters does not require modifying the original template files, which means your changes are preserved during plugin updates.
• Customizable: You can tailor the modifications exactly to your needs without being confined to the limitations of a GUI as in some plugins.
• Scalable and maintainable: Code using filters is generally easier to maintain and can be easily extended or modified as requirements grow or change.

Using filters is a powerful way to customize the WooCommerce thank you page, especially when you need to tweak specific elements of the page dynamically based on the order details or other criteria. It’s a preferred method for developers who want to ensure their changes are upgrade-safe and integrated smoothly with the existing WooCommerce setup.

Method 5: Building a custom thank you page from scratch

Creating a custom thank you page from scratch in WordPress involves several steps, from planning the design to implementing it using WordPress tools. Whether you’re thanking a visitor for a purchase, form submission, or for subscribing to a newsletter, a custom thank you page can enhance user experience and provide additional engagement opportunities. Here’s how you can build one:

Step 1: Plan your thank you page

Before you start coding or designing, think about what you want to include on your thank you page. Common elements include:

• A thank you message acknowledging the visitor’s action.
• Links to other relevant pages or products.
• Social media sharing buttons.
• A sign-up form for a newsletter.
• Contact information or a customer service link.

Step 2: Create a new page in WordPress

Log in to your WordPress admin dashboard and go to Pages > Add New. Give your page a title like thank you. You don’t need to write anything in the content area if you plan to customize the page through code or a page builder.

Step 3: Design your page

Option A: Using a page builder

If you are using a page builder (like Elementor, Beaver Builder, or WPBakery), you can drag and drop elements to design your page:

• Use text blocks for custom messages.
• Add images or videos for a more engaging appearance.
• Insert social sharing widgets.
• Add any other elements that your page builder supports.

Option B: Custom coding

If you prefer to code the page:

• Edit the page with the default WordPress editor and use HTML/CSS to style your elements.
• For more complex functionalities, consider creating a custom page template. You can do this by copying the page.php file in your theme, renaming it (e.g., page-thankyou.php), and then modifying the PHP and HTML to suit your needs.

Step 4: Redirect to the thank you page

After designing your thank you page, you need to redirect users to this page after they complete an action. The method depends on what the action is.

For form submissions:

• If using a plugin like Contact Form 7, Gravity Forms, or WPForms, set the redirect in the form settings. Most form plugins have a redirection option where you can enter the URL of your new thank you page.

For ecommerce transactions:

• If using WooCommerce, you can use the thank you page plugin or add custom code to your theme’s functions.php file to redirect users after purchase. Here’s a basic snippet for redirection:

add_action( 'woocommerce_thankyou', 'custom_thank_you_redirection' );

function custom_thank_you_redirection( $order_id ){

 $order = wc_get_order( $order_id );

 $url = 'https://yourdomain.com/thank-you/';

 if ( ! $order->has_status( 'failed' ) ) {

 wp_safe_redirect( $url );

 exit;

 }

}

Replace ‘https://yourdomain.com/thank-you/’ with the actual URL of your thank you page.

Step 5: Test your page

After setting everything up, test to make sure that everything works as expected. Fill out forms, complete purchases, or perform other actions to ensure that they redirect to the thank you page.

Step 6: Monitor and optimize

Use tools like Google Analytics to monitor how visitors interact with your thank you page. Analyzing this data can help you optimize the page to better meet your goals, whether that’s increased customer satisfaction, more social shares, or additional newsletter sign-ups.

Building a custom thank you page in WordPress not only improves the professionalism of your website but also enhances your engagement with your audience.

Advanced tips

1. Segmentation and personalization:
   • Use customer data to segment and personalize the thank you page. For instance, you can display different messages or offers based on the customer’s purchase history, location, or the amount spent.
   • Tailor the page to first-time buyers by offering a first-time discount on their next purchase or provide VIP customers with exclusive access to new products.
2. Dynamic content:
   • Implement dynamic content that changes based on specific criteria. For example, you might show a countdown timer for a special offer available only for a limited time post-purchase or display different content based on the time of day or ongoing promotions.
   • Utilize WooCommerce hooks to insert dynamic content such as related products, customer reviews of purchased items, or even personalized thank-you videos.
3. A/B testing:
   • Regularly conduct A/B tests on different elements of the thank you page. Test variations of your calls-to-action (CTAs), offers, and even the layout of the page to determine what converts best.
   • Use tools like Google Optimize or Optimizely to manage these tests and gain insights from the results.
4. Integration with marketing campaigns:
   • Integrate the thank you page with your broader marketing campaigns. For example, encourage customers to share their purchase on social media to receive a small discount on their next order.
   • Embed social sharing buttons that are pre-populated with a message and an image of the purchased product to facilitate and encourage sharing.
5. Enhanced tracking and analytics:
   • Implement enhanced ecommerce tracking on the thank you page. This can provide detailed insights into how customers interact with the page and the subsequent impact on return visits or additional purchases.
   • Set up custom events in Google Analytics to track specific interactions, like how many customers clicked on an upsell link, subscribed to a newsletter, or followed social media profiles.
6. Post-purchase surveys:
   • Include a post-purchase survey on the thank you page to gather immediate feedback about the shopping experience. This feedback can be invaluable for identifying pain points and opportunities for improvement.
   • Offer a small incentive for completing the survey to increase participation rates, ensuring you gather a significant amount of actionable data.
7. Security enhancements:
   • Ensure that any personalization or dynamic content does not expose sensitive information or security risks. Always sanitize and validate any data displayed on the thank you page to prevent XSS attacks and other vulnerabilities.

Conclusion

Enhancing your WooCommerce thank you page is more than just a nicety—it’s a strategic tool that can significantly impact your customer’s post-purchase experience and your store’s bottom line. Whether through plugins, custom code, or sophisticated tools like page builders, the possibilities for customization are extensive. We hope this guide answered your question on how to edit WooCommerce thank you page effortlessly. Start experimenting today to find the perfect balance that fits your brand and delights your customers.