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

4.2 Adding Featured Products to the Sidebar

Create a custom query to display images and links to featured products in your store’s sidebar.

Related Links

4.2 Adding Featured Products to the Sidebar

Hello and welcome back to this tuts+ course on WooCommerce theme development. In this part of the course, we're going to add some featured products to our store and we're going to display them in the sidebar. But it won't just be a list, it'll be using images specifically using the featured image for the product. Now the way that we'll do that is firstly we'll tag some products with featured as a tag. And then we'll develop a custom query which we'll place in the sidebar. Now I'm gonna use a hook that's in my theme to attach it to the sidebar but if your theme hasn't got a hook like that you can place this code in your sidebar.php file. And then finally we'll style it so that it looks great. So let's get started by having a look at the sidebar. So the sidebar file in my theme has an action called tutsplus_sidebar and that's the hook that I'm gonna attach my function to. Now if your sidebar doesn't have hooks. It's very straightforward, just take the code that I'll be putting inside my function and code that directly into your sidebar. Note that this isn't a WooCommerce template file, this is a template file provided by my fame, my sidebar template. WooCommerce doesn't provide you with a sidebar template. So if you're adding anything to the sidebar just do it in your theme. So here we are in the functions file. And this is where I'm gonna write the function that will attach that hook in my sidebar. >> [SOUND] So first, I'm gonna name my function. [SOUND] And then before I actually complete my function, I'm gonna hook it to the relevant action hook. [SOUND]. >> So the callback function here is tutsplus_sidebar_products that I've just created, and the action hook that I want to attach it to is called tutsplus_sidebar. I'm gonna be writing a custom query here using the WP query class, so the first thing I'll do is set up my arguments. [SOUND] So the post_type will be product. [SOUND] And the product_tag will be featured. [SOUND] Note this is using a taxonomy that's provided by WooCommerce which is the product_tag taxonomy. It's not a normal tag as you'd see in a blog. [BLANK_AUDIO] So those are my arguments. Next thing to do is to run the loop. [SOUND] So if my query returns any posts I'll be opening in a side and putting a heading in. [SOUND] And I'm using this feature products class here, so that I can style it later on. [SOUND] The next stage is to open a ul element, so that I can place my list items inside. And then I'll make sure I've got that closed further down. So now I need to create a loop. [NOISE] And for each item in my loop, I'll open a list item. [SOUND] And here you can see I've used my object oriented CSS to add an additional class to each post. Now the next step is to add a post thumbnail if the post has one. [SOUND] I'm going to enclose the thumbnail. In a link to the permalink. [NOISE] And now I output the thumbnail itself, using the function provided by WordPress called the_post_thumbnail. [NOISE] And I'll use an array here to give my thumbnail some parameters, including class. [SOUND] And I've also added an older ascription which mentions the metadata for the attachment. Next, underneath the featured image I'm going to add the text for the feature product. [SOUND] And, again, I'm using a class here for styling later on. [SOUND] Now that's gonna be enclosed in a link to the permalink again, and here's where the feature product text gets output. [SOUND] It's simply the title of the product. So finally, after my unordered list, I need to close the aside element, and then I need to use rewind posts to reset the query. [SOUND] And that's my function. All I need to do now is save my functions file and check my site. So here we are, I've got my images and my titles, but it doesn't look fantastic at the moment because I've used less items, there's bullets in there. And also the text is above the images and I'd like to have it overlaying the images like I've done here. So let's fix that with some styling. Here's my style sheet for my theme. And I'm going to add some styles to this. I'm going to add this in the section of my style sheet which relates to widget areas. Now, I know this isn't a widget area, but it's in the sidebar, which is where my widget area is placed. So, I'm going to add a comment first, so I know what I'm doing. [NOISE] And then I'm going to add some styling to the feature products class. Now what you'll remember is that here I used featured products as a class for my aside, which will help me target my styling. [SOUND] Firstly, I'm going to add a margin. Because if you look at this, it's bumped up right up against the cart, which doesn't look very good. So I'm gonna give it a margin at the top. And then I'll add some styling from my list. To get rid of the bullets and to get rid of the padding that you get with lists. [SOUND] And I'm also adding relative positioning here and a bit of padding at the top. The padding at the top will space it out, make it look better. And the relative positioning will allow me to use absolute positioning for the text, which I'm going to add now. [NOISE] Now what I'm gonna do here is use a class called featured-product-text which I need to add to my function. So I'm gonna add this to the link here. >> [NOISE] And now I'll style that. [NOISE] And that will position my text over my image. Now finally, I'll save what I've done. And take a look at my site. And here's how it looks. So you can see my text is overlaid over my images. The links are working fine. The bullets have gone. And using my object-oriented CSS, the images are taking up half the width of the sidebar. So it laid out nicely and the thumbnails fit really well. So that's how you add some featured products to your sidebar in your store. Now these featured products will display on every single page, as you can see. So that means that wherever people are in my store. I'll be encouraging them to buy those products that I tag as featured. Now if you wanted to you could use more than one tag or you could repeat this with products on offer using an additional query using WP query. In the next part of this course. We'll move on to the category screens. Such as this music screen that we are looking at here and what we'll do is we'll add a banner at the top of those screens with a nice image and some information about music. That's it, thanks for watching and see you next time.

Back to the top