One of the things I love about WooCommerce is the ability to modify the plugin without touching the source code. WooCommerce is built with hundreds of action and filter hooks that allow you to change almost anything about WooCommerce. On a recent WooCommerce project, I need to Add a Message at Top or Bottom of WooCommerce Checkout Page.
To add a Message at the top of the WooCommerce checkout page
It’s very easy to add a message at the top or bottom of the WooCommerce checkout page. The same goes for the Cart and Account page.
Important: If you don’t want to message to appear on the Order Received page, see To add a PHP or Javascript at the top of the WooCommerce checkout page. You will need to add code to your theme’s functions.php file.
One of the things I love about WooCommerce is the ability to modify the plugin without touching the source code. WooCommerce is built with hundreds of action and filter hooks that allow you to change almost anything about WooCommerce. On a recent WooCommerce project, I need to Add a Message at Top or Bottom of WooCommerce Checkout Page.
To add a Message at the top of the WooCommerce checkout page
It’s very easy to add a message at the top or bottom of the WooCommerce checkout page. The same goes for the Cart and Account page.
- From the WordPress admin screen, click Pages in the left menu.
WordPress displays a list of pages.
- Click on the Checkout page to open it.
- On the Checkout page, you will see the following shortcode: [woocommerce_checkout] This shortcode displays the checkout page. Do Not Delete the Shortcode
- You can enter text above or below the [woocommerce_checkout] shortcode and it will appear above or below the Checkout page content.
WooCommerce Checkout Page Classic Editor 
WooCommerce checkout page Gutenberg editor. - Click Update to save our changes.
- Click View Page to view your changes. Should should see the text you entered at the top of bottom of the Checkout page.
Message at the top of the checkout page. 
Message at the bottom of the checkout page. - To add text at the top of bottom of the Cart or Account page, repeat the procedure above except open the Cart or Account page and add text above or below the page’s shortccode.
To add a PHP or Javascript at the top of the WooCommerce checkout page
In order to add PHP or Javascript at the top of bottom of the WooCommerce Checkout page, you will need to use a WooCommerce action.
Add the following code to your theme’s functions.php file.
In the code above, you can a javascript or a php function.
To add PHP or javascript the bottom of the WooCommerce checkout page, add the following code to your theme’s functions.php file.
Nate says
You are a true hero! Exactly the message I wanted to put in my Checkout page, too! LOL, I guess it’s a common solution!
taponitrof says
Glad to help.
Bill Robbins says
Thanks for sharing. For simple bits of content like text or images, you can just place them into the content area of the checkout page itself. Any content before the [woocommerce_checkout] shortcode will be above the checkout form and any after will be below it. That also works on the cart page as well.
This can be overridden by a theme, but this often works. If you need to add something more complicated like the output of a function, the hooks you use above are the way to go.
taponitrof says
Bill. Thanks for the tip. I just assumed I couldn’t mess with the cart or checkout pages. That’s a LOT easier than using the filters.
Amanda says
I am trying to add a message to the top of my checkout page, doing it exactly as you show here. The problem I have is that the message is still displaying on the “Order Received” page too – and I don’t want it to.
Our website has a lot of elderly/non-English speakers, and people keep thinking they finished their order when they never clicked the last “Place order” button. So I want a message on the top of the “checkout” page that says “Your order is NOT YET complete. Scroll down and click Place Order to finish.” Obviously, I don’t want this message to show up on the “thank you” page, since the order is complete at that point.
Any ideas?
taponitrof says
Hi Amanda. In order to show the message only on the checkout page, you will need to use the second procedure on the page. This requires that you edit your theme’s functions.php file. Click here to see how
songlyricst says
thank for sharing code
Faiz Alias says
Hello…your code displayed on multiple places… please look here >>> https://prnt.sc/Lvp6rr5iZuZb