Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 10 – Add Featured Products to Any Template in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The final thing in this Customize the Appearance of your Store lesson that we’re going to do is add featured products to our Thesis 2 eStore and the way we’re going to do that is by creating a new taxonomy called Products Status.

Add Featured Products Using Custom Taxonomy

Let’s come over here to Add New and it’s going to be a Taxonomy and we’ll pick Status and it’ll be Product Status. And the same thing is Product Status and it’ll attach itself to products only and then let’s look at our Advanced Options for a second. It doesn’t need to be hierarchical and that is all fine.

So we’ll create our Custom Taxonomy and then we’ll come over to our products now and look at Products Status. We’re going to create a couple of them. We’re going to create Featured Products and we’ll add Sale Products. Now there may be other things you want to do as well but we’re going to do that with these. Then we’re going to come over to our Products and we’re going to pick a handful of them and make them featured.

We’ll make the WordPress eBook under products Status. We’ll choose featured and then update that one. Then again, we’ll choose the First Thesis eBook and we’ll make that one featured and I will do one more. We’ll come down here to this SimplePress eBook and we’ll make it featured.

Add Featured Products to a Sidebar

Now with that done, I think what we’ll do is come over to our homepage and I’m going to put Featured Products in the sidebar. So we’ll go to our Front page and then we’re going to select the box to add and in this case, we are going to use a query box. Add that and we’re going to call the query box Featured Products and we’ll give it a class of featured_products.

Under our options, we’re going to choose Products as our post type. The query type we’re going to choose is this Product Status and the product status that we’re going to choose is Featured Products. Then we’ll choose 3 and we’ll arrange them in Ascending order by Title and that’s good.

Then what we’ll do is look down in our Sidebar and we’re going to drag our Featured Products into our Sidebar and below the Sidebar Text Box. We’ve got that set up the way we want it so now what we have to do is choose the elements that we want to display. We definitely don’t want either of these in any case and in fact, what I want to do here is I want to use a smaller image for this. I don’t want to use the great big image or even the thumbnail size image so what we’re going to do is install a plugin and custom image sizes.

The Simple Image Sizes Plugin

This is the one we’re going to use, Simple Image Sizes. So we’ll install that now and activate the plugin. Then come over to Settings. This is where I believe this lies, go to Media and we are going to add a new size. The thumbnail name is going to be small thumb and it’s going to be 75×75. We’ll call it small thumbnail.

In terms of crop…I thought something was going to come up here. Okay, Show in post insertion, that’s fine, it works as it is. So we now have a small thumb that’s 75×75 and let’s just regenerate our thumbnails here so that we make sure we get all of the images in this size.

Now again, this isn’t something that’s specific to setting up a product store, right? You could be using this in any kind of a Magazine Style site where you want to create essentially teasers for posts or something like that but you want to make a smaller version of them for the sidebar. So what this does is it creates a smaller image.

We have a bunch of images on the site so each of those images needs to be re-cropped and what it does is it recrops them all, I mean essentially takes the main one and recreates all of those sizes again.

Re-Set Featured Products Options

Well in fact, while that’s happening let’s come back over to our sidebar. Actually, I’m going to refresh this. So on our Front page and in our Sidebar, I guess I didn’t put that, it’s a query box that were our Featured Products. It’s this one here, it just didn’t get saved. So Featured Products and we’ll call it featured_products. Come over to options, it’s going to be Products and Product Status and Featured Products. We’ll show 3 posts and then the query options were in Ascending order by Title.

Configure the Layout

Say okay to that, save the template and then we’re just going to drag this down into the Sidebar and put it below the Text Box. Save the template again then we’re going to open it up and we’re going to not show the excerpt, not the author, not the edit. But we are going to go back to the WP Featured Image here and the one we’re going to choose is the small thumb and it’s going to left with text wrap. Say okay to that, actually we’ll move that up, Headline here, we’ll go to a p, link it to the article and we’ll just call it headline and then again, we’re going to grab Price.

Add a Featured Product Price

So we’ll do WP eStore Product Elements and it’ll be Featured Product Price and it’s not going to be “Add to Cart”, it’s going to be the “Price” button. Say okay to that and we’re going to shift+drag that down into our Featured Products and put that below Headline. Let’s just see how that looks.

Well, let’s add a Featured Products Title too so we’re going to add a text box and we’ll call it Featured Products Title and featured_products and then this would be an h3, disable the automatic p tags. Say okay to that and then we’ll shift+drag this down into the Sidebar above the Featured Products there. Refresh it.

Now let’s go over to Appearance and Widgets and let’s take the Text Widget and drop it into there. Then let’s take our product to search and so this is p class=”widget_title” and it’s .sidebar .widget_title. What we really want to do with this thing here, is call it Widget Title instead of Featured Products so we’ll come back over here to this class and call it widget_title. Now it’ll borrow the same style as the regular widget title has.

Using the Custom Taxonomy

The takeaway from this is that you can use a Custom Taxonomy to create a featured product or for product status. Then you can have featured products and sale products, close out products or whatever and you can use the regular query box then for displaying those and you can use the Simple Image Size plugin to create additional sizes of images for those kinds of uses.

Benefits of Using Thesis 2 and WordPress Tools

Anyway, that’s just one of the things that make Thesis 2.1 so amazingly versatile, is that you have so many tools that you can use to display this kind of stuff anyway you want. The good news about this is that you are not compelled to use the ordinary WP eStore display for products or prices or anything.

All you have to do is use WordPress to display everything and use a WP eStore to process the transaction and to operate the cart and so I think that’s the incredible power of Thesis in this context, is its ability to do that.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment