Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Adding Image Links to Departments

Add some images to your store’s home page to help visitors find the main departments, using a hook provided by WooCommerce.

Related Links

4.1 Adding Image Links to Departments

Hello. And welcome back to this Tuts+ course on WooCommerce theme development. In this part of the course, we're gonna add some extra navigation on the home page, which is the main shop page provided by WooCommerce. What I'm gonna add is some images across the top here that will link to the main product categories. And the way I'm going to do that is I'm actually going to write a function that attaches to a hook that WooCommerce provides us with, which means we don't actually crea, need to create a new template file. And then once we've done that, we'll star the results. So let's have a look at that hook. The hook that we want to use here is the WooCommerce before main content hook. Now, this hook is contained in the archive product PHP file, which is a template file provided by WooCommerce. Now, we don't need to make a copy of this template file. All we need to do is to write a function that is hooked to this action hook. So, let's start doing that in our functions file. Now I'm working on my theme here, so I'm gonna add my function to my theme functions file. So at the bottom of this function file, I'll add a new function. [BLANK_AUDIO] First I'm just gonna write some commented text to tell me what it is next time I come to it, and now this is the function itself. [BLANK_AUDIO] So that's going to contain my function here. But before I do that, I'm going to attach it to the correct action. And the action I want to attach it to is the WooCommerce before main content action. [BLANK_AUDIO] So I simply copy the name of my function in here, and that will be attached to that hook. Now I only want to do this on the main page, not on all the other product pages. So I use a template tag that's provided by WooCommerce to check if we're on the main shop page and that is, if is shop. And you can see more information on those template tags on the WooCommerce documentation. So this function is shop. Only returns true when you're looking at the main shop page. Not at your product category archives. Now that the markup that I'm gonna use inside my function. So I'll open a div I'll give it a name so that I can style it later and I'll also use my object oriented CSS to make sure the layout works properly. [BLANK_AUDIO] So that's my main div that will contain all of my images. And then within there I'm gonna want my first one. [BLANK_AUDIO] And you see what I'm doing here is I'm using my object tour in CSS to give it the correct layout. So this will be at one third of the width of the containing element and it will be left aligned. And within here I'm going to put an image. [BLANK_AUDIO] Now the image that I'm going to be using I've already uploaded to an images folder that I've created. So you can see here that I've created three images, clothing, music and posters. So I can add a reference to those images within my function. [BLANK_AUDIO] And the first image that I want to use here is the clothing one. And that's called clothing.jpg. So that will be my image. Now underneath my image I want to put the name of the category that it's linking to. I'm gonna put that in an H3 tag. Now both of these obviously need to enclosed in links. So let's add that link. [BLANK_AUDIO] Now what I'm gonna use here is a function provided by Word Press, which is get_term_link. So I get the link to that specific term. [BLANK_AUDIO] So that link will take me to the term archive for the Clothing term in the product category taxonomy. And that product cat taxonomy is provided by WooCommerce. And we need to close that link, and the image will link through to that archive. And again I'm gonna copy the same link on my text as well. So that's my function which will insert the image for the clothing taxonomy term. Now let's copy this and do the same for the other two product categories that I'm going to use. Now the first one is music. So I replace clothing with music in the relevant places. [BLANK_AUDIO] And that will give me the image of music, and also the link to the music term. And the final ones is posters. So I'll change that to posters. [BLANK_AUDIO] So again, I've got an image and I've got an H3 element and I've got links around both of those. Now the only change I need to make for this third one is to the class cuz that needs to be right aligned because that fits with my object oriented CSS. Now finally I'll save that and take a look at how it looks on the website. And here are my images with the text underneath. Now it's already looking quite good but I want to add a little bit more styling. I'd like this text to actually be overlayed over the images so that I've just got three image blocks with text on the top. So I'll change that with a little bit of styling in my CSS file. So here's the style sheet in my theme, and I love this styling in section seven of my style sheet which is in content navigation. So first I'll just add a comment so that I know what I'm doing here. And then I'll add the styling. Now you'll remember oh, just remove that little typo there. You'll remember that I used a, a, class called product cat links on my main div that contained those links, so that's there. So I'm gonna use that target my styling. [BLANK_AUDIO] At first I'm going to add a margin underneath this and I'm also going to use overflow auto, because if I don't use that the absolute positioning, in that, I'm going to use in a moment will break my layout. [BLANK_AUDIO] Then I'm gonna add some styling to the div that's contained within this one. [BLANK_AUDIO] So, that's got a relative position now. And then within that, there is a h3 element. And I'm gonna position that to have absolute positioning, and be positioned on top of the image. [BLANK_AUDIO] I'm also going to make the font size slightly larger to make it nice and obvious. [BLANK_AUDIO] So that's my styling. Now I save my CSS file. And I have a look at how it looks in my website. That looks pretty good. I've got my three images and each of them links to a product category. So if I click on Clothing that takes me through to the clothing category. And that's how you add some extra navigation to your home page to give your users some more visual clues and an extra way of finding their way around your site. In the next part of this cause we'll still be working on the front-page, but we'll add some offers and some feature products to help entice people further into the store and encourage them to buy things. Thanks for watching, see you next time.

Back to the top