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

  • Overview
  • Transcript

2.3 Matching Your Plan to the WooCommerce Structure

Match the WooCommerce template files, hooks and functions to the plans for your store’s pages and content.

Related Links

2.3 Matching Your Plan to the WooCommerce Structure

Hello, and welcome back to this Tuts+ course on WooCommerce theme development. In this part of the course, I'm gonna give you an overview of what parts of the WooCommerce plugin we're gonna be interacting with. Which hooks we're gonna be hooking into, which functions we're gonna use, and also which template files we'll need to look at. And I'm gonna match these up to the template files and the pages in my site. Now what you can see here is the final design for the home page of my site and how it will look when everything's complete. And as you can see I've added some custom content here. Here you can see those images that linked to the main product categories. And then here in the side bar, there are some feature products, which are going to be displayed on every page. So let's start by taking a look at the template file that powers the homepage. Which is the shop. And which hooks in that template file we'll need to be using. So this is the archive product PHP page. What that drives is the main shot page and all of the product category pages. And here it is. Now, to output those images that I showed you, these ones here. We'll be hooking into this action here, WooCommerce before main content". And we'll do that in our themes function file. So we won't actually be copying this archive product template. Instead we'll be using the actions contained within it, and writing functions that are hooked to those actions. So that's how we'll achieve that. We'll also do something similar in the product category page. So this is the clothing page. Now this will be using a slightly different hook. Again, in the archive product template file. And this is the hook that we'll be hooking into here, which is WooCommerce archive description. Now what I've done, is I've worked through the WooCommerce files, and I've worked out how content is being output. And that's output in the description for the product category here, and I'm gonna also add an image up here. Moving on from a sidebar. That's actually gonna be coded straight into my theme. So looking at my theme template files, it's the sidebar P-H-P file that I might be working with. Although as my theme uses action hooks for all of the content in the sidebarI'll actually be writing a function in my functions file. I'm hooking it to this hook here. Now if your theme doesn't have hooks, it just has content in the sidebar of a php file. You'll be adding content straight into that file and I'll show you how to do it. Now let's go back to our store. The next thing we're gonna be working on is the individual product page. And here you can see how it's going to look. Now what I'll be doing in this product page is adding some styling which will be in my theme style sheet. I'll also be writing a function attached to the hook that outputs these related products. Because, I'll be changing the size of those images, and I won't just be changing the size of the images using CSS. But I'll also be changing what image is actually output in these pages. So what I'll need to look at, to help me with this, in the World Commerce template files, is the content-single-product template file. Which basically contains all of the loop and the content for each product. Now that gives me my single product, which is what I can see up here. Now the content for the product itself is output by that template file. But the content down here of these related products, is actually output by a different template file, and that template file is called content product. Now in here I'm gonna be using a function that's included within the file. And that function is the woocommerce_template_loop_product_thumb- nail function. A bit of a mouthful, I know. Now that function is actually pluggable. Which means if I make a copy of that function with the exact same name in my themes function file, that will override the function in woocommerce. So that's how I'll be, I'll be achieving that. [SOUND]. The next thing I'll be working on is the search page. Now the search page uses the same archive product template that we use for the home page and the product category pages. But the content itself is displayed using different include files depending on whether you find some results or not. So what I'll be doing is looking at the results somebody gets if they don't actually find anything from their search. And the template file used for that can also be found in the WooCommerce templates. And that's in the loop folder. It's called no products found. So, that file at the moment doesn't contain very much at all, and what we'll be doing when we get onto that is adding some more content to it. The final thing we'll be working on in this course is the checkout. As you can see here I'm gonna be adding some extra text which doesn't come after the box with WooCommerce. And here again, I won't be making a copy of a template file, but I'll be hooking in to an action that's provided by WooCommerce. I'm writing a function in my themes function file that hooks in to that. That's the form checkout template file that drives that page. And the action that I'm gonna be hooking in to is this one here. WooCommerce before checkout form. So we'll write a function in our themes functions file that'll add content there. So those are the template files that we need to make reference to while working through this course. Now its worth bearing in mind that in only one case am I gonna actually copy the template file. And that's this no products found file. Because as you can see, this doesn't have any hooks in it. Where there are hooks provided by WooCommerce. I'm gonna use functions attached to those hooks instead of making copies of the files. Because it's so much tidier way to work. And also, where there hooks are provided by my theme, I'm gonna hook into those as well. So that gives you an overview of how we're going to work as we go through this course. In the next part of this course we're gonna look at the theme that we're working with in more detail. And I'll take you through the structure of the shop theme before we add the specific WooCommerce content to it. How it works, how it's structured and how it's styled. That's all for now, thanks for watching and see you next time.

Back to the top