Do you want to add a custom thank you page in your WooCommerce store? The thank you page is one of the most important pages in any WooCommerce store. it is also called the order received page.
WooCommerce shows the contents of the Thank You page from the thankyou.php template. This template is found in woocommerce/templates/checkout/ folder.
For illustration purposes, we will be using the Storefront theme. The thankyou.php should be copied to: the wp-content/plugins/woocommerce/checkout/ folder.
In this post, we’ll show you how you can your own template by copying the thankyou.php file to your theme’s folder in a similar folder structure.
You need to have some coding knowledge if you want to use this method to customize your order received page.
Let’s have a look at how you can customize the order received page.
WooCommerce Custom Order Received Page
First, you have to create the 2 folders, “woocommerce” & “checkout”. We recommend that you change the data shown in the Order details table & the customer details (when logged in).
If you do not see the file, WooCommerce uses a function woocommerce_order_details_table() that is attached to the woocommerce_thankyou hook. The function woocommerce_order_details_table() is defined in includes/wc-template-functions.php file.
Customizing the Order Received Page By Overwriting WooCommerce Templates
The Thank You page is actually a collection of 4 different template files:
- templates/checkout/thankyou.php
- templates/order/order-details.php
- templates/order/order-details-item.php
- templates/order/order-details-customer.php
This is how the order received page is displayed:
We want to add a coupon code to the customer for their next purchase & remove the Payment Method from the top section.
We want to add it above the order details section.
Therefore, we will add the following code to the thank you page template:
<?php Since this is your first order, we are happy to extend a 15% discount on your next purchase. Use the coupon code <strong> WELCOME15</strong> to avail of the discount
Below is the thankyou.php template from my theme:
<!--?php defined( 'ABSPATH' ) || exit; ?--> <div class="woocommerce-order"> <!--?php if ( $order ) : do_action( 'woocommerce_before_thankyou', $order->get_id() );</p> <p> ?--> <!--?php if ( $order->has_status( 'failed' ) ) : ?--> <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', 'woocommerce' ); ?></a> <?php if ( is_user_logged_in() ) : ?> <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My account', 'woocommerce' ); ?></a> <?php endif; ?> </p> <?php else : ?> <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 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details"> <li class="woocommerce-order-overview__order order"> <?php esc_html_e( 'Order number:', 'woocommerce' ); ?> <strong><?php echo $order->get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong> </li> <li class="woocommerce-order-overview__date date"> <?php esc_html_e( 'Date:', 'woocommerce' ); ?> <strong><?php echo wc_format_datetime( $order->get_date_created() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong> </li> <?php if ( is_user_logged_in() && $order->get_user_id() === get_current_user_id() && $order->get_billing_email() ) : ?> <li class="woocommerce-order-overview__email email"> <?php esc_html_e( 'Email:', 'woocommerce' ); ?> <strong><?php echo $order->get_billing_email(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong> </li> <?php endif; ?> <li class="woocommerce-order-overview__total total"> <?php esc_html_e( 'Total:', 'woocommerce' ); ?> <strong><?php echo $order->get_formatted_order_total(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong> </li> <?php if ( $order->get_payment_method_title() ) : ?> <li class="woocommerce-order-overview__payment-method method"> <?php esc_html_e( 'Payment method:', 'woocommerce' ); ?> <strong><?php echo wp_kses_post( $order->get_payment_method_title() ); ?></strong> </li> <?php endif; ?> </ul> <?php endif; ?> <p>Since this is your first order, we are happy to extend a 15% discount on your next purchase. Use the coupon code <strong>WELCOME15</strong> to avail the discount.</p> <?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?> <?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?> <?php else : ?> <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' ), null ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <?php endif; ?> </div>
It is important to note that once you know what data is coming from which template, you just need to copy the right template to your plugin’s folder.
Conclusion
In this post, you have learned how to overwrite the order received template. You can use the same method to customize the other templates. If you have any problems, please consult a qualified WordPress developer.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
Similar Articles
- WooCommerce Redirect After Logout [Ultimate Guide]
- 100+ Tips, Tricks & Snippets Ultimate WooCommerce Hide Guide
- WooCommerce Redirect After Checkout: Redirect to Custom Thank You Page
- How to Remove Product Category Title WooCommerce
- How to Redirect a WordPress Page Without Plugins?
- How to Move Primary Menu Storefront WooCommerce
- How to Auto Approve Orders in WooCommerce
- How to Remove Email Footer Text ‘Built With WooCommerce’
- How to Hide Shipping Methods for Certain Conditions
- How to Clear Cart on Logout In WooCommerce
- How to Edit WooCommerce Checkout Page Template
- How to Get Order ID on Checkout Page WooCommerce
- How to Create Custom Widget Area in WordPress Step by Step
- How to Check if a User is Logged In to WordPress
- WooCommerce Checkout Optimization Quick Guide
- How to Get Current Product Category Name in WooCommerce
- How to Get Payment Methods in WooCommerce » Code Example
- How to Force Secure Checkout In WooCommerce
- How to Create Coupon In WooCommerce
- How to Change WooCommerce Checkout Page Title