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 2 – Part 11 – Setup Product Category Catalog (Archive) Pages

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Note that this, our products page, is a list of all of our WP eStore products. If we click on that, it’ll take us over to a specific product. The next thing we’re going to do with our products is we’re going to add our product categories.

Add Product Categories to the Menu

We’re going to actually add our product category pages to this menu. So if we come back over to our menus, to the products menu, we are going to add product categories. And in this case, they are Consulting, Instruction and Plugins. We’re going to add those to the menu. Up into that, we’re going to put Instruction, Plugins and Consulting and then save the menu.

Let’s refresh this and go over to Instruction. Here we’ve got our SimplePress eBook and our SimplePress Video listed. If we go to Plugins, we have all 6 of our plugins listed here and it could be that what we want to do here is to have our Genesis Plugins. We could have a further drop down although I think that’s really too many dropdowns and I think it would be better to have this listed on our department page which we’ll work on here a little later. But you could theoretically have all of your Instruction areas as a sub of this Instruction and then that would take you to your product category archive page for that specific product.

Change Product Category Displays

Now, we can also display product categories over here and we’ll work on that in just a minute. But what I want to do now is change up the way the product category displays because this is on a particularly useful kind of display. Now is when we start talking about how Thesis 2 enters into this equation. Let’s come over to Thesis 2 and go to the Skin Editor and go to our Product Category Archive page first.

In our Product Category Archive page, what it shows right now is just a Headline Area with Author and Headline and Byline and a number of comments. But really, none of that is what we want to show. So I’m going to drag that out of here, I’m going to shift+drag this and this into Home Post Box and each of these into Home Post Box. For the moment I’m going to shift+drag that out, so I’m going to just drag the Edit, the Date, the Author and the Author Avatar out. I’m going to add the excerpt in and then I’m going to install a couple of boxes for this. Let’s just save this for a second and then refresh the way the page looks and now you can see, we’ve got a heading and the excerpt.

Add WP Featured Image to Product Category Archive Page

I want to put a featured image here so let’s come back over to the WP Featured Image and put that up. II think I’m going to put that at the top and then I’m going to pick thumbnail and I’m going to shift it left with text wrap and link the image to the post. Let’s say okay to that, save the template and refresh this. So now I’ve got the image that shows up here and I’ve got a title, an image and an excerpt that shows up.

Add Price

The next thing I want to do is add a price and I’m going to add an “Add to Cart” button to this. So this is where that new box comes into play because that box creates this WP eStore Product Elements box.

If you add that box and then shift+drag it into Home Post Box and down below the Headline. Then open up its options here and you can choose what you want to show up. Right now, I’m going to show price and I’m going to put it in a span and I’m going to give it the class of price and then I’m going to take another one.

Pardon me, I want to change the name of this, we’re going to call this one Product Price. We’ll take this one out and call it Old Product Price and we’ll give it a class of old-price and we’ll choose the Old price and we’re going to give it a span also.

Oh, I don’t have an old price setup for most of them. So without an old price for most of them, I’m going to need to do a little bit of monkeying with this box so it doesn’t show up if there is no old price. Bear that in mind that will be coming here shortly but for the time being, this is the price and an old price.

Add “Add to Cart” Button

Then below that, I’m going to add an “Add to Cart” button. So we will create this one more time and say “Add to Cart”, Home Post Box and below that, “Add to Cart”, I’m going to put it in a div. I’m not going to put a class around it at the moment but I am going to have “Add to Cart” button there. That’s what I’m going to choose, is the “Add to Cart” button, say okay.

I probably should point out to you that these are your choices, “Add to Cart” button, “Buy Now” button, “Subscribe” button, Price, Old price, Description, Sales Count and Available Copies. You can put any of those elements anywhere on your site.

Now that we’ve got that set up, hit Save Template and we’ll come over and refresh this. Here you’ve got an “Add to Cart” button that shows up below these. We could, if we wished, put that “Add to Cart” button as a span tag also and then style it so it floats over here to the right but I think it’s probably better off having it sit right here. And if we wished, we could have more control over how much of this excerpt shows up by actually creating an excerpt rather than letting this automatic excerpt to do its thing.

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