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.2 How WooCommerce Works

Learn how WooCommerce is structured and the template files, hooks and functions in its API.

Related Links

2.2 How WooCommerce Works

Hello! Welcome back to this TuxPlus course on creating a WooCommerce store theme. In this part of the course, I'll be showing you the WooCommerce files, how they're structured, and which template files in WooCommerce you'll need to copy into your theme and edit, to create your WooCommerce theme. Now, what I've done to get started is created a store, and here you'll see I've created a store using the dummy data that's provided with WooCommerce. So there's t-shirts, there's music, there's a whole load of products on here which I can have a look at, see how the screens look, and then use to edit my theme. But first, let's have a look at the template files in WooCommerce. [SOUND] So, here are the files provided by the WooCommerce plugin, which we had a quick look at in the introduction. Now, the first that you're gonna be looking at are templates, and as you can see, there's a whole bunch of them. So let's open those here in Coda. Now, the first file that we're gonna be looking at is the product file. Now, there is a file called single-product.php which is the template file for an individual product. And as you can see, it tells you here how to override it by copying it to your theme in a WooCommerce folder. But as you can also see, it consists of lots of actions instead of actually having any content, and that's because this template file includes a whole lot of include files rather then having all the code in this file. So going back to our files, you can see here that there is a folder for single product, and in there, are all the include files that will be included in your product. So for example, we have product image, and here you have the code that outputs the product image in your WooCommerce store. Now let's have a quick look at how that looks in the store. So here's a happy ninja t-shirt, and that's the page for that t-shirt. And as you can see, there are two images I put here, and the size and the positioning is as, as dictated partly by the template and partly by the styling. Now, there'll be some stuff that we can change just using CSS, and we'll be doing a bit of that. But as well as making styling changes, there'll also be times when we want to actually change what's output and add new content. And there'll be two ways we'll be doing that. The first is to be writing functions that are attached into some of those hooks that are provided by WooCommerce, and the second will be to make a copy of a template. Copy it into our theme in the correct structure, and I did that. Now let's go back to these files. So the other files we'll be looking at are archive files, and here, you've got all kind of product.php. It just uses the standard naming convention used by any WordPress theme. Product is the post type and archive is the type of file. So, the archive product file, again, includes some actions as well as some actual content. And here, you can see the loop. The loop, again, consists of some functions. And also here, its using get template part to get the include file for the product, and if we have a look here we'll see content product. So that's the actual loop that will be output. Again, you can see there are more actions in here. So it makes sense to take some time looking at the files that you're going to be editing and working out what the actions are, and finding the functions that attached to those actions because those functions are what you might need to change. So that runs the loop for an individual product and displays product information. Let's go back again. So, in the archive product page, this template is also used for the main shop page. Now, let's have a quick look at that on the site. So I've set that as my homepage, and as you can see here, we've got a store page with all of my products displayed. Now instead of copying this template file and creating a duplicate of it in our theme, what we'll do here is we'll hook into these actions. So this WooCommerce before main content action here, we can use on the homepage, and we can also use it on the archive pages if we want to. Because this template powers both the main shop page and the product archive pages. We'll also be using this WooCommerce archive description hook when we come to work on the archive pages. So again, let's look at the shop, and have a look at the example. So here in clothing, it's using the same archive, and displaying our clothes in the same way. So we'll be copying these files into our theme and making edits to them as we work through this course. And what I want to do in the homepage is add a nice big banner above the shop and the cart so that it looks a little bit special, it looks more like a homepage than just any old archive page. So that's how the template files work in WooCommerce. Each page in your store has a template file which defines how it outputs content. And as we've seen, there are also include files which are used for the specific elements of the page. Now what we'll be doing is copying some of those into our theme, editing them so they look exactly how we want to. So that's it. So that's how template files work in WooCommerce. Each page on your site has a template file that corresponds to it. And within that template file, as we've seen, there are a number of action hooks, and there are also a number of include files. In the next part of this course, what we'll do is have a look at the plan for the site and match up these template files to the pages we want to edit. And that will give us the details of what we actually need to do to create, of this sort, WooCommerce store theme. See you next time, and thanks for watching

Back to the top