How to Add Custom Content to the Top of WooCommerce Cart and Checkout Pages
In part 1 of our WooCommerce Cart and Checkout Pages series, we’re going to look at a really simple hook that’s going to give us the ability to add whatever we want to the top of the WooCommerce Cart and Checkout pages.
For today, we’re just going to put a little message on top of our WooCommerce cart page. And then we’re going to play around with that hook for a little bit and move it around the page.
Let’s get started!
///
Step 1 – Open functions.php
We’ll start with our functions file, and please note that I’m definitely in a child theme.
(We’re not going to cover child themes here, but there are loads of sites out there talking about the “how” and “why” of child themes. Perhaps that will be a post for another day!)
—
Step 2 – Add a WooCommerce hook.
The first place I always go for adding any WooCommerce hooks is businessbloomer.com. Rodolfo Melogli, who authors this website, is a great teacher, and his visual hook series is just amazing.
Pro tip: I used Rodolfo’s website to help me build my WooCommerce Hooks Customizer plugin. If you’re new to hooks, please check out my post about the first version of the plugin I built. It will give you a pretty decent base from which to work.
—
Step 3 – Review the code.
I like to show the code visually since VSCode (Visual Studio Code) looks so much better than just plain text.
If you click on the image above, it will bring you to the gist where you can copy it, if you’d like. Or you can view the cart/checkout code from the video.
—
Step 4 – Tie in your first hook.
- Line 7 – The first hook we’re tying into is on line 7. (Again, you can find where these hooks appear on the Cart page with the visual hook guide noted above).
- This hook appears at the very top of the cart page.
- The function we are adding to that hook is “madcow_above_cart_and_checkout_message”.
- Pro tip: I always like to add a namespace to the front of my functions. This ensures that I won’t be stepping on anyone else’s functions — or have my function being stepped on.
- Lines 9-11 – My function on lines 9-11 is super simple. We’re simply echoing out (line 10) a div and an h2.
- Just remember that anything you can do in your functions file (PHP, JS, HTML, CSS), you can add to your function.
- But what about line 8? – I’m glad you asked!
- Since we want our cool message to show up on the cart and the checkout pages, we can add the exact same function to any number of action hooks.
- In this case, we’re adding this cool message after the order notes on the checkout page.
—
Step 5 – Add div to other pages.
If you ‘re following along, you now have a div on top of your cart page. But what if you want that awesome div to show up somewhere else?
- By looking at the Visual Hook Guide for the WooCommerce Cart page, you can see where all of the hooks are placed on the page.
- All you need to do is swap out the hook that you want to tie onto. (In our case above, it’s the action hook on line 7.)
- Then, if you were to refresh your page, you would see your awesome div down below the cart table.
For example, if you want your function to run after the cart table but before the subtotals and shipping section, you would change line 7 to look like this:
The only thing I changed was the initial hook.
Voilà!
Pro tip: You could do the same thing we did above with the checkout hook on line 8. As long as there’s an action hook on that page, you can move your content around to your heart’s content.
///
Watch the training video ► How to Add Custom Content to the Top of WooCommerce Cart and Checkout Pages
In case you’re more of a watch-er than a read-er, I put all of the stuff above into the video below!
Want to only show your custom function if there are certain product categories in the cart?
Check out part 2 of our series!
. . .
