7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.4 Adding Content to the Checkout Page

Use a hook provided by WooCommerce to add additional content to your store’s checkout page.

Related Links

5.4 Adding Content to the Checkout Page

Hello, and welcome back this Tuts+ course on WooCommerce theme development. In this part of the course, we're going to look at the Checkout, and make some minor customizations to the Checkout screen. Now first, here's the Cart screen. I've added some products to my cart that I want to buy, and this is what I can see. Now I'm quite pleased with this screen as it is, so I'm not gonna make any customizations here. But let's proceed to the checkout. Now, I'd like to add some text up here on my Checkout screen just to give people a bit more information. So let's work out how to do that. Now, once again, I'm looking for an action hook that I'm going to attach a function to. And I'll find that action hook inside the checkout template files. So if I have a look at the checkout folder inside the WooCommerce templates folder, you'll see that there's one here called form checkout, which I've already got open here. And the action that I want to use here is WooCommerce before checkout form. And what that does it it outputs this text here, and I'm going to add a little bit more. So in my themes functions file, I'm going to add a new function, which I'll hook to that action hook we just saw. [NOISE] First I'll name my function. [NOISE] Which will include some markup that I'll be using to output the text. [NOISE] This is just some really simple text, but you could add more if you wanted to. And then finally, I need to attach it to my action hook. [NOISE] Now the name of my function here is tutsplus_checkout_text, so that's what goes in here. And then the hook I want to attach it to is woocommerce_before_checkout_form, so I'll copy that in my adduction function. Now I also want to add a priority here, because I want this text to display above the content that's already there. So here you can see there's this text here asking if somebody's got a coupon. I want my text to appear above that. So I'm giving it a priority of 5, because the default is 10 and that coupon will be having a priority of 10. So I'll save my functions file and take a look at my site. And there we have it. My paragraph's been added with some helpful text encouraging people to continue. And you could add whatever you wanted to here, images or banners or maybe even a coupon or a voucher. So that's how you customize the Checkout page, and that's the end of all the work that we're doing on our WooCommerce theme. In the next and final part of this course, we'll wrap things up and have a recap on what we've done and what screens and templates we've created. See you next time, and thanks for watching.

Back to the top