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

5.1 Editing the Product Category Pages

Add a description and featured image to each of the product category pages, using functionality provided by WooCommerce and a hook.

Related Links

5.1 Editing the Product Category Pages

Hello, and welcome back to this tutsplus course on WooCommerce theme development. On this part of the course, we're gonna be working on the product category archives, jazzing them up a bit, adding an image, and adding some styling as well as description. This is what they look like at the moment. There's nothing here at the top, so we're gonna add something. First off we need to add the actual information. So I do this by editing the product category in the WooCommerce admin. So here you can see I've clicked on the categories page, and I've gone through this particular product category. I'm adding a description and I've also uploaded an image. So I'll update this, and then that will be reflected in my product category screen. So as you can see here, clothing has got an image and a description. Now if you're doing this, you'll also need to add some images and description for all of your other product categories, too. So let's see how this looks once I've saved it. So at the moment, the description is displayed here but the image isn't. So I need to add that into my theme. Now we do that once again, by hooking into an action hook, that's provided by WooCommerce, and let's take a look at that. So, in the archive product PHP, which is the template file that's being used for this page as well. There's a hook here called WooCommerce archive description and that's currently outputting the description. Now, what I want to do is add in an image as well. So, I'll add a function to my theme functions file, which will attach to that hook. [SOUND] Let's start by doing this. Firstly I'll add a comment so I'll know what I'm doing. [SOUND] And then I'll name my function. [SOUND] And then before I start actually writing my function I'm going to attach it to the hook. [BLANK_AUDIO] Now the hook I want to use is the hook that I just showed you, which is WooCommerce archive description. So I put that in here, and then I'll also put the name of my function, as the callback function that's gonna be attached to that hook. So that's my basic function. Now I need to populate it. Now what I'm gonna do here, is use a technique that's actually provided on the WooCommerce documentation, which I'll show you here. And that's the function that I'm gonna use to fetch and display the image for each of my product categories. Now, as you can see, what it's doing first is checking that we're on a product category page, using the 'is product category' tack. Now, we've already used that in the previous example. And here, is getting the queried object, which is currently being queried on this page, which is the current product category. It's then using a function provided by WooCommerce called get WooCommerce to meta. And that's fetching the ID of the image that is attached to that particular product category as its featured image. And then finally, it's using a WordPress function, wp_get_attachment_url, to identify the URL for this particular image. Now, if the image exists, it's then outputting the image using echo, and I'll also add an alt description as well. So, let's add this function to our functions file. [BLANK_AUDIO] First there's the check for if we're on a product category archive, and then if so. [BLANK_AUDIO] We're identifying the current queried object. [SOUND] So now we have a variable core cat which we can then use to identify the thumbnail image. So next I need to get the id for the thumbnail image. [SOUND] And here I'm using a function that's provided by WooCommerce. [NOISE] And then next, I define a variable for the image based on that thumbnail ID. [NOISE] Using the WP get in touch with URL function provided by WordPress. And then having done that, I need to check if there is an image. [SOUND] And if there is an image, I output that image. [SOUND]. [NOISE] I'm going to copy the same code I used above for the alt description for the image. [SOUND] I'm also giving it a class here, so I can style it later on. So, having done that, I need to save this file, and check my site again. And here it is. Here's the image that I've uploaded and the description that's automatically being output by WooCommerce. But at the moment it looks a bit dull, so let's add some styling. So I'll open my theme style sheet. I'm gonna put this in the section that I've got for content, and I'll add some styles using the classes that I've already created. So firstly, I'm going to style the image itself. And then second, I'm going to style the description because at the moment it's a bit boring. Now the class I'm using here is one that's already provided by WooCommerce which it automatically wraps that term description in. [NOISE] Now the font family I'm using here, I'm using that Google font that I've all ready used for all my headings. Now if you're using a different font on your site, you'll obviously need to change this. [NOISE]. [NOISE] And I'm using one of the colors that I'm using in my design. [NOISE] I'll also change the line height to give it a bit of spacing. [NOISE] So that's my styling, I'll save that and then take a look at how it looks on my site. And here it is. As you can see I've got the image for this product category, and I've got description underneath that's in nice prominent text in a color that goes with my design. So that's how you add some extra content to your product category pages. In the next part of this course we'll move on to the individual product pages, and start customizing those. Thanks for watching and see you next time.

Back to the top