As a WooCommerce store owner, you may want to customize the order received page to match the look and feel of your site. There are a few ways to do this, but we’ll focus on two methods: using the Customizer and editing your theme’s template files.
To customize the order received page using the Customizer, go to WooCommerce > Settings > Advanced > Order Processing and check the Enable custom order received page box. Then, click Save Changes.
Now, go to Appearance > Customize, and you’ll see a new WooCommerce Order Received section. From here, you can customize the page’s title, content, and background image.
If you want more control over your order received page, you can edit your theme’s template files. First, you’ll need to create a order-received.php file in your theme’s folder. You can do this using a text editor like Notepad++ or Sublime Text.
Once you’ve created the file, copy and paste the following code into it:
<?php
/**
* Order Received template
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.1.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<p><?php _e( 'Thank you. Your order has been received.', 'woocommerce' ); ?></p>
<ul class="order_details">
<li class="order">
<?php _e( 'Order Number:', 'woocommerce' ); ?>
<strong><?php echo $order->get_order_number(); ?></strong>
</li>
<li class="date">
<?php _e( 'Date:', 'woocommerce' ); ?>
<strong><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></strong>
</li>
<li class="total">
<?php _e( 'Total:', 'woocommerce' ); ?>
<strong><?php echo $order->get_formatted_order_total(); ?></strong>
</li>
<?php if ( $order->payment_method_title ) : ?>
<li class="method">
<?php _e( 'Payment Method:', 'woocommerce' ); ?>
<strong><?php echo $order->payment_method_title; ?></strong>
</li>
<?php endif; ?>
</ul>
<div class="clear"></div>
<?php do_action( 'woocommerce_thankyou_' . $order->payment_method, $order->id ); ?>
<?php do_action( 'woocommerce_thankyou', $order->id ); ?>This is a basic template code for the order received page. You can customize it as per your requirement. This template file should be placed in the root directory of your active theme.
After that, you can use the WooCommerce template tags and WordPress template tags to customize the order received page further.
Please note that the code above is for reference only and you should test it on a development environment before uploading it to your live site.
