Prior to version 2.1, WooCommerce installed several pages with shortcodes into your site to display important pages like the cart or checkout. This let you use the WordPress content editor to add content either before or after the template was inserted. However, the issue with using so many pages is that they can accidentally get deleted or shuffled around (for example, you could accidentally change the parent page), which caused errors for some shops.

Version 2.1 cut down these errors by turning some of the templates into endpoints. This basically means that the template is loaded programmatically when a certain URL is visited rather than requiring a static WordPress page. Now only a few pages are installed with WooCommerce, and you can still edit those (such as the cart page). However, this makes it a bit more difficult for beginners to edit WooCommerce templates.

Fortunately, there are tons of hooks in these templates for us to change or add to them, and we can usually do so with a tiny bit of code. You can also override the template in your theme to make changes. We do have a quick guide on overriding templates, but this is a tactic you should only take if you need to. Using actions and filters is far more upgrade-safe and far less likely to cause conflicts than simply overriding the template.

Edit WooCommerce Templates

The checkout template is one that users sometimes have trouble changing. One of our readers, Mitch, brought up the good point that adding content to the WordPress checkout page can also add that content to the endpoints that follow checkout, such as the Order Received page (great point & thanks for asking how to avoid this!).

The checkout template has an abundance of actions that we can use to edit the template instead. Let’s go through a few ways to add notices or content to the checkout page without changing the WordPress page that contains the checkout shortcode.

If you’re not sure how to add code to your site, we have a tutorial here that I’d read first!

Before we begin, I’d recommend keeping your checkout as simple as possible so customers are more likely to complete it. However, notices, personal messages, or helpful hints on completing checkout can be warranted and help avoid issues, so these can be valuable to add.

Edit WooCommerce Checkout Template

Let’s first add a text block to the checkout page. This could be a personalized message, a simple “thanks for purchasing”, or some guidance on shipping methods. For most checkouts, you’ll want this information at the top of the page. To do so, we need to find an action that will let us inject some content into the checkout template. The checkout form template is the place to go for this. We’ll use the woocommerce_before_checkout_form action to help us out.

Let’s add a content block with that action. You could wrap that content block in a <div> with a unique class to style it with CSS if desired.

/**
 * Add a content block after all notices, such as the login and coupon notices.
 *
 * Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php
 */
add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_content', 12 );
function skyverge_add_checkout_content() {
	echo 'This content that you can use to tell customers stuff. You could make it a div class="checkout-message" and style it if you wanted.';
}

And here’s you’re example:

Edit WooCommerce Checkout template

Want something a bit more attention grabbing? We can do a couple of different things. A WooCommerce notice could be used instead, as we can add our own content to it. Use the same action to add our info, but we’ll add a WooCommerce notice with some content. You can replace the message with your own.

/**
 * Add an info notice. Let's add it after other notices with priority = 11
 *
 * Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php
 */
add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_notice', 11 );
function skyverge_add_checkout_notice() {
	wc_print_notice( __( 'A notice message instead.', 'woocommerce' ), 'notice' );
}

This will show an info notice after the other checkout notices are displayed.

Edit WooCommerce templates

You can also move this notice up, or change the notice type. Let’s do the same thing, but change the notice type and put it before other notices.

We’ll change the last part of the code to ‘success’ instead of ‘notice’ to do so, and we’ll also change the priority. The default priority for functions is a priority of 10, so we’ll want our function to go before these. We’ll set the priority at 9 to ensure that it’s displayed first.

/**
 * Add a content in a notice instead. Let's add it before other notices with a priority = 9
 *
 * Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php
 */
add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_success', 9 );
function skyverge_add_checkout_success() {
	wc_print_notice( __( 'A success message with high priority.', 'woocommerce' ), 'success' );
}

And here’s our product, with a success message first:

Edit WooCommerce Checkout template

You could also use an ‘error’ type notice, which I’ll use for fun in the last example.

Now let’s assume you want to edit the WooCommerce checkout template, but you want to add the notice or content lower in the checkout form. You may have to dig through the checkout templates to find an appropriate action (sometimes this requires some trial and error when you start 🙂 ). If you’d like to add content right before the payment form, there’s a handy action in the review order template that we can use: woocommerce_review_order_before_payment.

Let’s add our notice right before the payment form. You could add a different notice type or some content instead.

/**
 * Add add a notice before the payment form - let's use an eror notice. Could also use content, etc.
 *
 * Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/review-order.php
 */
add_action( 'woocommerce_review_order_before_payment', 'skyverge_before_paying_notice' );
function skyverge_before_paying_notice() {
	wc_print_notice( __( 'An error message.', 'woocommerce' ), 'error' );
}

Now this will show up in between our order details table, and the payment options at the checkout.

Edit WooCommerce Checkout template

You can use these strategies to edit WooCommerce templates throughout your shop, not just the WooCommerce checkout template. For example, you can edit the My Account page, cart templates, and other areas of your shop without adding content to WordPress pages or overriding templates, which really should be avoided if possible.

Here’s a summary gist of each of these notices / additions if you’d like to play around with them. I’d love to hear about it if you use this!

Published by Beka Rice

Beka leads product direction for SkyVerge, focusing on new features for our plugins and Jilt. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

35 Comments

  1. […] here’s a WooCommerce tutorial on editing WooCommerce templates from SkyVerge that details how to edit the checkout […]

  2. Hi Beka! Wonderfully helpful article as usual. (I don’t know how you create so many!!) I have needed the last solution you describe for a long time — some way to give shipping info on the checkout page itself, but not at the very top where it would be obtrusive.

    I do have a question! In the review order template, the existing action you reference begins like so:

    Where exactly would YOUR snippet be placed? Just after this line of code, or just before, or somewhere else altogether? Any context you can give as far as placement goes would be much appreciated!

    Thank you,
    Chloe

    • Whoops! I should know better than to paste straight code. Here is how the existing action looks in the template, without the fancy brackets and things:

      php do_action( woocommerce_review_order_before_payment )

    • Hey Chloe, happy to help! You’d want to add this as a custom plugin, in your child theme’s functions.php, or with the Code Snippets plugin. We have a tutorial on how to add code to your site that I’d recommend reading.

      • Thank you Beka! I should have noticed your link near the start of the article to that tutorial. I read that, installed the code snippets plugin, copied and pasted your code, and Boom! Works perfectly!

        I’m really excited because now I don’t have to worry about customers getting to the shipping options on my cart and just seeing names of shipping services with no detail about how quick each service is. Thanks to you I was able to add a message just below the price total with a link to my shipping info page.

        Yay!
        Chloe

  3. Hi Beka!
    Is there a way to customize a category page? I’d like to add a template’s shortcode prior to a products’ list of a specific cateogry.
    Do you think it’s possible?
    Thanks in advance!

    • Hi there! You can check to see if you’re on a category page using the is_product_category() conditional tag. For example, if I wanted to display a notice at the top of our WooCommerce extensions category, I could use this check for a specific category or an array of categories, and use an action to add content before the products. Here’s an example to add a notice to a category page that should point you in the right direction:

      function skyverge_add_extensions_notice() {
      	if ( is_product_category( 'woocommerce-extensions' ) ) {
      		wc_print_notice( __( 'A notice message.', 'woocommerce' ), 'notice' );	
      	}
      }
      add_action( 'woocommerce_before_shop_loop', 'skyverge_add_extensions_notice' );
      
      • Hi Beka!
        Previously I logged in as my ecommerce identity, Punto Bianco… 🙂
        I just wanted to say that I thought a little bit and… realized it’s possible to carefully use category description. I put some shortcodes in it and magically I got what I wanted!
        That said, or better writte, I will keep safe your useful suggestion.
        Thanks and best regards!

  4. This is exactly what I needed, thanks!

    There’s just one thing I haven’t been able to find anywhere: I need to change the text that says “Ship to a different address?” to something else, but I cannot find a filter for that. Is there a way to do this without editing woocommerce core, which I know is a really bad idea?

  5. Thanks, Beka, that works perfectly.

  6. Hello Beka nice post although i have a question please, i want to add html in the order review box, the box that contains shipping methods and total price etc ..
    how can i do that ? i see that this table comes from ajax that trigger on changing the radio button ( or select )

  7. thanks in advance for this post 🙂

  8. Thank you for this great article. I’m not a coder and terrible at PHP so I hope someone here will be kind enough to help me add a message and some styling to my order-received (thank you) page.

    I just want to add a line of text and url such as this: “Please click here (link) to download your certificate.”

    I also want to stylize the woocommerce “Thank you for your order” message as it is pretty tiny on my site and I want it to match the H3 heading of my theme (if possible).

    Would someone be so kind as to help me with this code? Thanks in advance!!!

  9. thanks for providing your article on editing templates!

    i have begun to edit my email templates and wanted to know how i can use my own short codes in the email template…. meaning i have created my own shortcode in my functions.php to show the info pulled from a database, the shortcode works fine in pages using the echo do_shortcode( ‘[display_site_name_from_database]’ );

    but when i try to use this in the email template all i get is the text [display_site_name_from_database]

    is there a way to enable the use of my own shortcodes in the email templates?

    /* code sample in admin-new-order.php*/
    A new order from:
    /* code sample*/

    • Hey Timothy, ​shortcodes won’t work in your email templates because the email isn’t hosted on your site, so you’d need a custom function to replace the “shortcode” in the email before it’s sent instead. This would be a good place to start, as WooCommerce does this with its own email shortcodes (which are more like merge tags).

  10. Hi Beka,
    Can you please tell me how i can add the Google Trusted Store java script code to the order received page?

  11. Hi, one thing to also note, which I didn’t see in the text, was to “escape” certain characters, such as apostrophes … such as

    Note: please remember not to poop on the buttercups, they’re not meant for that.

    Would break the echo’d text.

    I was actually finally choosing to add function hooks for some things which in olden days I just edited the actual woo templates. Ran across your post which helped with that, thanks! 🙂

  12. THANK YOU! i needed the info message on my checkout! now its perfect. much thanks!

  13. Hi Beka,
    I have a question regarding customizing the thankyou.php. I would like to remove all the customer and order details as well as all the payment and bank account info that is shown, so basically it should just say “Thank you for your order, we will get in tocu with you shortly.”
    I have read various tutorials on how to create a custom Thank-You page but I think it might be better to just remove those details from the default thankyou.php
    I have copied the file into mychild theme but I just don’t know how to remove the stuff…could you help me with this? I am very new to WordPress and everything code related…

    Thank you so much!

  14. Hi, Beka!
    Great post!
    I want to know why you suggest to avoid overriding templates?
    In woo themes site they suggest customization by copying woocommerce templates into your theme.
    Thanks!
    Felipe

    • Hey Felipe, it means that you now have to keep an eye on these templates, as they can be updated in the future. If you’ve overridden them and they’re updated in WooCommerce, you now have to ensure that you include those changes in your overridden version.

      Otherwise, you may end up breaking WooCommerce core functionality if you miss adding a new action that’s used by WooCommerce or plugins, etc. We’ve seen this so many times with customized checkout form templates that break payment functionality that we’ve lost count.

      It’s fine to do so long as you’re okay with a lot more responsibility in checking those overrides with every WooCommerce update, but they need to be kept up to date, and most site owners do not keep up with this (nor do most themes that override them, which is usually the biggest issue).

  15. Hey! Do you know of a way to get rid of the shipping method label in the customer’s billing email? I use only one shipping method through a plugin and I do not want customers to be confused when they see the shipping method on their bill.

    In other words I do not want, ” Shipping: $16.95 via Tree Table Rate” appearing on their bill. I want just “Shipping: $16.95” to appear on their bill.

    Thank you!

  16. Hi Beka,
    Great post. I’ve already used one of your earlier tips to use the Say What plugin to edit some of the text on the checkout page – do you know how I can actually change the “Checkout” header? We are just using the checkout to sign up for free events so I’m trying to get away from all of the “monetized” verbiage in the checkout system.

  17. Hi Beka,

    thanks for your post. I need to add a custom field on the edit address template, is there a hook or should I override the template?

    Thanks again

  18. Hi Beka, thanks for the great post. I have been trying for hours to add a short text description underneath my Delivery Address on my woocommerce checkout page but cannot figure out how to do it. I need to let people know that they don’t need to select the Delivery Address checkbox if it is being delivered to the billing address, to make it more clear for the user. Thank you for any help you can provide!

  19. Hi there,
    I was wondering if you had any pointers on how i can add some text boxes to the order received page in woocommerce. i need my customers to be able to upload photos (which they can do thanks to the Woocommerce upload plugin), but since this plugin doesnt allow for customers to name the file they uploaded, i need to be able to have them fill out text boxes.

    I have no coding experience.
    So any help would be fantastic!

  20. Is there an easy way to customize the payment options on the checkout page? I want to show Amazon Pay, PayPay, PayPal Credit, Check, and COD…

  21. How could I go about moving the ‘Your order’ section above the billing details, without moving the payment section?

  22. Hi! Custom thank you message for each payment method ?

    there is only the hook does not work (

    [code]

    add_action (‘woocommerce_thankyou’, ‘myfunction’);
    function myfunction($order_id) {
    $order = new WC_Order($order_id);
    $payment_method = get_post_meta( $order->id, ‘_payment_method’, true );
    switch ($payment_method) {
    case ‘bacs’:
    // do this
    break;
    case ‘paypal’:
    // do that

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.