• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

WooCommerce Add Message to top of the checkout page.

Add a Message at Top or Bottom of WooCommerce Checkout Page

December 14, 2018 by Pat Fortino

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.

  1. From the WordPress admin screen, click Pages in the left menu.
    WordPress displays a list of pages.
    WordPress Page List
  2. Click on the Checkout page to open it.
  3. On the Checkout page, you will see the following shortcode: [woocommerce_checkout] This shortcode displays the checkout page. Do Not Delete the Shortcode
  4. 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.
  5. Click Update to save our changes.
  6. Click View Page to view your changes. Should should see the text you entered at the top of bottom of the Checkout page.
    WooCommerce message at top of checkout page
    Message at the top of the checkout page.
    WooCommerce message at the bottom of the checkout page.
    Message at the bottom of the checkout page.
  7. 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.

Filed Under: Ecommerce, WooCommerce 8 Comments

Previous Post: « How to Link to a PDF in WordPress
Next Post: Use the Classic Editor with Gutenberg Block Editor »

Reader Interactions

Comments

  1. Nate says

    November 27, 2018 at 12:37 pm

    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!

    Reply
    • taponitrof says

      November 27, 2018 at 12:39 pm

      Glad to help.

      Reply
  2. Bill Robbins says

    December 7, 2018 at 12:59 pm

    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.

    Reply
    • taponitrof says

      December 7, 2018 at 4:43 pm

      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.

      Reply
  3. Amanda says

    January 29, 2019 at 1:27 pm

    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?

    Reply
    • taponitrof says

      January 29, 2019 at 4:40 pm

      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

      Reply
  4. songlyricst says

    October 9, 2020 at 11:22 pm

    thank for sharing code

    Reply
  5. Faiz Alias says

    June 20, 2022 at 5:11 pm

    Hello…your code displayed on multiple places… please look here >>> https://prnt.sc/Lvp6rr5iZuZb

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...