How To Styles Woocommerce Order-Received Page

Mastering the WooCommerce Order Received Page: Customization for a Better Customer Experience

The “Order Received” page in WooCommerce is a crucial touchpoint in the customer journey. It’s the final confirmation that their order has been successfully placed and provides vital information like order number, payment details, and shipping address. However, the default WooCommerce order-received page can be a bit bland and doesn’t always reflect your brand’s personality. In this article, we’ll delve into how to style and customize the WooCommerce order-received page, transforming it from a mere confirmation screen into a powerful tool for boosting customer satisfaction and driving repeat business. We’ll explore various methods, from simple CSS tweaks to more advanced PHP customizations.

Why Customize Your WooCommerce Order Received Page?

Before diving into the “how,” let’s quickly understand the “why.” Customizing your order-received page offers several benefits:

• Reinforce Brand Identity: Make the page visually consistent with your overall website design, reinforcing your brand’s look and feel.
• Improve User Experience: Present order information clearly and concisely, reducing customer confusion and anxiety.
• Reduce Support Queries: Anticipate common questions by proactively providing helpful information, such as expected delivery dates or tracking links.
• Promote Further Engagement: Encourage repeat purchases by displaying related products, offering discounts, or directing customers to your social media channels.
• Enhanced Trust and Confidence: A polished and well-designed order-received page instills confidence in your customers that they’ve made the right choice.

Methods to Style the WooCommerce Order Received Page

Now, let’s explore the different techniques you can use to customize your WooCommerce order-received page.

#### 1. Simple CSS Customization:

This is the easiest and most non-intrusive method. You can use custom CSS to alter the appearance of existing elements on the page.

How to implement:

• Using the WordPress Customizer: Navigate to *Appearance > Customize > Additional CSS* in your WordPress dashboard.
• Via your theme’s Learn more about How To Download Product Images From External Url Woocommerce stylesheet: (Not recommended for direct editing to avoid loss during updates. Consider using a child theme.)

Example CSS modifications:

/* Change the background color */

.woocommerce-order {

background-color: #f9f9f9;

padding: 20px;

}

/* Style the order number */

.woocommerce-order h2 {

font-size: 24px;

color: #333;

margin-bottom: 15px;

}

/* Style the order details table */

.woocommerce-order table.woocommerce-table–order-details {

width: 100%;

border-collapse: collapse;

}

.woocommerce-order table.woocommerce-table–order-details th,

.woocommerce-order table.woocommerce-table–order-details td {

border: 1px solid #ddd;

padding: 8px;

Explore this article on How To Add Weight Based Shipping In Woocommerce

text-align: left;

}

This CSS snippet provides a basic example of how to change the background color, style Discover insights on How To Woocommerce Multisite the order number heading, and format the order details table. Remember to adjust the colors and styles to match your brand.

#### 2. Template Overrides:

This method offers greater flexibility, allowing you to modify the structure and content of the order-received page. This method requires some knowledge of PHP.

How to implement:

• Create a Child Theme: This is crucial to prevent losing your changes when your theme updates.
• Copy the Template: Copy the `thankyou.php` file from the `woocommerce/templates/checkout/` directory in the WooCommerce plugin to the corresponding directory in your child theme: `your-child-theme/woocommerce/checkout/thankyou.php`.
• Edit the Template: Modify the copied `thankyou.php` file in your child theme.

Example PHP customization:

 <?php /** 
Checkout Thank You page template
 
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php.
 
* HOWEVER, on occasion WooCommerce will need to update template files and you
 
(the theme developer) will need to copy the new files to your theme to
 
maintain compatibility. We try to do this as little as possible, but it does
 
happen. When this occurs the version of the template file will be bumped and
 
the readme will list any important changes.
 
* @see https://docs.woocommerce.com/document/template-structure/
 
@package WooCommerceTemplates
 
@version 3.7.0
 */ 

defined( Discover insights on How To Change Woocommerce Colors ‘ABSPATH’ ) || exit;

?>

<?php

if ( $order ) :

do_action( ‘woocommerce_before_thankyou’, $order->get_id() );

?>

has_status( ‘failed’ ) ) : ?>

<a href="get_checkout_payment_url() ); ?>” class=”button pay”>

<a href="” class=”button wc-forward”>

• get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

• get_date_created() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

get_user_id() === get_current_user_id() && $order->get_billing_email() ) : ?>

• get_billing_email(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

• get_formatted_order_total(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

get_payment_method_title() ) : ?>

• get_payment_method_title() ); ?>

get_payment_method(), $order->get_id() ); ?>

get_id() ); ?>

This is the default content of the `thankyou.php` file. You can add custom text, display related products, or modify the existing elements within this file. For example, to add a message about estimated delivery, you could insert code like this:

 
Your order is estimated to arrive within 3-5 business days.
 

before the closing `