How to Override WooCommerce Templates – with examples!

Customizing your store experience is one of the main advantages of WooCommerce over competing e-commerce platforms. Need a custom After Order page? No problem! Want to change how your emails look or what they say? Absolutely! You can do it all.

In this post, I want to go over some basics as well as give you an example of how you can customize the WooCommerce “After Order” page template. This is the template that shows up after someone has successfully placed an order on your store. This page is also known as the “Thank You” or “Order Received” page.

Before we do that, let’s dig in to some basics!

What is a template?

A template, in the WordPress world, is a .php file that is used to display a portion of your website. WordPress has a lot of templates, and a single page on your site will load anywhere from 2 to 10+ templates depending on how your theme is built! An example of the theme Twenty Twenty:

For a homepage displaying latest posts, we can see the Twenty Twenty theme loads the index.php which then calls several different templates in template-parts. The index.php template also calls get_header and get_footer which will get the header.php and footer.php template files from the theme.

WooCommerce-specific templates

Like your theme, WooCommerce also has a set of templates, which you can see inside the woocommerce/templates folder (source). Let’s take a look in that folder:

Each of those templates is used for a specific part of your store. For example, content-single-product.php will be used to display the content for a single product.

How to override WooCommerce templates

First, you need to make sure WooCommerce knows your theme supports WooCommerce, so that it will look in your theme and use your custom files. You can do that by adding this to your theme’s functions.php file:

function discocowdev_add_woocommerce_support() {
	add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'discocowdev_add_woocommerce_support' );

Next, in order to override a WooCommerce template, you’ll need to copy the template you want to override into a specific folder in your theme. Here’s an example:

If I want to override the template located in:
/plugins/woocommerce/templates/checkout/thankyou.php
I would copy that file and place it into:
/themes/MY_THEME/woocommerce/checkout/thankyou.php

WooCommerce first looks at your theme for templates, and if it doesn’t find any, it will load the default ones. If it does find a template in your theme, it will load that one instead!

What if my theme is already overriding the template I want to change?

You might have a theme you bought or downloaded that already includes this woocommerce folder. If that’s the case, you have two options:

1. (Recommended) Make a Child Theme and add your overrides to the child theme.
2. You can edit the file you want in your theme. However, if you update your theme at any time, your customizations will be gone!

Customizing the Thank You Page

Ok, now that I’ve copied over the thankyou.php file into my theme here: woocommerce/checkout/thankyou.php – I can now make some changes!

Here’s what the default looks like on the Twenty Seventeen theme:

Let’s break that up into where everything is coming from:

The top part is coming from thankyou.php

The Order Details section is coming from order/order-details.php

The bottom Customer Details section is coming from order/order-details-customer.php

The “Order Received” title of the page is coming from the woocommerce_endpoint_order-received_title hook.

Let’s change the “Thank you. Your order has been received” text. To do that, we’ll edit this line in the template:

https://github.com/woocommerce/woocommerce/blob/4.5.2/templates/checkout/thankyou.php#L42

Note: You can also edit this through a filter, but for this tutorial we’re just going over how to do it by editing a template 🙂

So this line:

<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>

Will become this:

<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'You\'re the best!', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

And now we have the new text: “Thank you! You’re the best!” on your Thank You page.

Hope this was helpful!