How to Create Custom Order Received Page WooCommerce

WooCommerce Custom Order Received Page
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:order received

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 &lt;strong&gt; WELCOME15&lt;/strong&gt; 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>

This is the outcome:section

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.

Similar Articles

  1. WooCommerce Redirect After Checkout: Redirect to Custom Thank You Page