This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
In this part of the lesson we’re going to look at various ways to display Product Categories in WP eStore. Before we start doing that I just want to refresh your memory about Categories. Go to your Dashboard and scroll down here to the WP eStore and select Categories.
What are WP eStore Product Categories?
Categories are the large groupings of Products so in this example we have created an E-Book and a Books Category.
In the process of creating these video tutorials I’ve had conversations with members of the site who have a large number of different Categories and those are grouped under larger Category groupings. In a subsequent lesson we’re going to talk about how to handle that. But in this lesson we’re going to just use these two Categories.
WP eStore Category ID
The first Category is Books. It has a name, it’s got a little description, it has a Category page (when you click on it it takes you there), it has this thumbnail URL and IDs. Since we only have two Categories we have a Category ID 1 and a Category ID 2. This is going to become important to you here in the not to distant future. So that’s a Category ID.
Now let’s look at different way in which we can display these. Let’s go over here to our Pages and we’re going to open up our Catalog page. Our Catalog page, if you recall, was our Products page. We’re going to select Edit here and then we’re just going to – under the placeholder text – take a look at some of these codes.
WP eStore Display Categories in a List
If we bring up this list of WP eStore shortcodes, the first part of this list is just displaying a simple list of all Categories. If we copy that and go back to our web page and paste that there, under the placeholder text, this is going to just give a list of all of our Categories and in this case that’s two. If we hit Update and view our page there are our two different Categories, there’s Books and there’s E Books. If we select Books it takes us to our Books page, if we go back to our Products page and select E Books it takes us to our E Books Products page.
This actually might be really nice for a sidebar widget or in a text widget. If you had a whole bunch of Categories and you wanted an easy way for people to jump to those Category pages this might be a very simple way of doing that.
WP eStore Display Categories with Thumbnails and Descriptions
Let’s take a look at a more sophisticated version of that and that is the wp_eStore_list_category_fancy. If we select that and then go back over here to this and replace. We’ve placed that shortcode there. Notice that these shortcodes are not taking any attributes. This is just going to list every category we have whether we have two or a hundred. Select Update, come back over to our page and refresh it and now you can see that we have our list of books and then we have the two full descriptions of the Categories.
Remember when we did our books we gave it an image, we gave it a name and we gave it this descriptive text. If you come over and look at this one for example, I did a nicer job of descriptive text here but that’s exactly what this is, this is the link for the name, the image and the descriptive text.
Even though this stuff looks funny it is easily adjusted using CSS. You can see that the default behavior of thumbnails is for them to be square. Now there was a setting that I didn’t tell you to set in an earlier part of the lesson and maybe it was because it didn’t exist in the version of WP E-Commerce that I started teaching in.
The WP eStore does have a facility for automatically fixing the funny shaped images here besides using CSS. You can find that by coming back over here to WP eStore, going down to WP eStore, Settings and then scrolling down to the bottom and where it says Enable Smart Thumbnail Option – make sure you check that. I created these thumbnails before I had checked that and so unfortunately you don’t get to see the benefit of that here.
I’m going to show you the CSS method also for making the image look the way you want it to look. Sort of the automatic default is that WP eStore tries to make them square and so it either shrinks or expands the image in order to make it square and obviously I didn’t put square ones in.
Anyway that’s what this looks like by default. If you don’t want the border and you want them side by side it only takes a little bit of CSS to make it look like this and in a later lesson we’re going to do the CSS in depth. I just wanted you to know that it’s the same process that makes them side by side, or makes them stacked on top, gives them a border, gives them a background color or whatever. This can look like just about anything you want it to look like.
WP eStore Display a Single Category
Finally we have the third Category related shortcode and that is the one that shows only one Category. Go ahead and copy that shortcode and take it back over here to our website, go back to our Pages, our Products page and then below that we’ll just paste that. The ID here is that Category ID we looked at a moment ago. This is ID 1. I could also put in ID 2, which is what I’ll do here instead. Put ID 2 in there and hit Update and it’s going to show that same kind of box for Category 2 only. So there it is you’ve got three different ways of showing your Product Categories.
The reason why you would do something like this is if, for example, you had several Product Categories under a super Category. Maybe you have publications and office supplies. Under office supplies I might have pencils and pens as two different Product Categories and under Publications I might have books and eBooks as two different Product Categories. So I could choose which Product Categories showed up on which page rather than here. This just lists all of them.
So if you get to a larger site where you want to break them up more this facility for adding Categories simply by their Category ID is pretty useful. You could just do the next one here. Copy that, paste that and put ID 1 here, hit Update and now you’ve got essentially the backwards equivalence of this first shortcode because we’ve displayed number 2 and then we displayed number 1.