This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
In the fourth part of this lesson we’re going to look at the various ways to display a list of Products in WP eStore in a specific Category. The first thing we want to do is open up one of our Product pages. We come over to Pages and we’ve got two different Product pages. We’ve got a Books product type and we’ve got an E Books product type. Select Edit for our Books type and this is where we’re going to put our shortcode.
Three WP eStore Shortcodes for Displaying All Products within a Category
Come over here to our WP eStore Shortcodes PDF file and down to our Category display. There are really only three different WP eStore shortcodes for displaying all of the Products within a Category.
First WP eStore Shortcode Product Display
The first one is this one here. This was the original WP eStore product display shortcode. This is actually the one I still favor. Copy that, come back over to our website and paste that in. This is going to show all of the Products in Category 1 on this Books page. Hit Update, come over here and hit Books and so now you can see the whole Product description and everything else showing up for this particular Product type which is a Book.
This has some things that we’re going to want to format with CSS but you can see here that it’s got the image. Now notice how the image is not squished. I figured out in the middle of developing this set of lessons why my original thing wasn’t working. It’s not something that you’re likely to encounter because it had to do with me copying this website from the previous website. However, you can see what it did with the thumbnail. Then I have the nice tall thumbnail that I want to use. It took that tall thumbnail and cut off the top and the bottom so that it looks square. So we’re still going to go in there and change it with CSS so the whole thumbnail shows up.
Anyway you can see the thumbnail, the title, the available quantity, the price, the options that we set, a place for your preferences and an Add to Cart button. We’re going to talk about how to reformat this Add to Cart button so that it doesn’t look funny and all the rest of that stuff in a little while.
But if you click on this then it should take us over to the Book or the Product page itself which we’ll also look at formatting here shortly.
That was this style of displaying our Products. You can see an example of how I formatted that here if we look at the Books version. Here I’ve got it formatted so that the entire thumbnail shows up properly and then I’ve changed my Add to Cart button. It stacks each one of the different products on top of each other. That’s what this can look like when it’s properly formatted; it can turn out looking the way you want it to look.
Second WP eStore Shortcode Product Display
Let’s look at the next version of this. That was the regular one, now we’re going to look at fancy3. Copy that, come back over and we’re going to change this out for fancy3 and hit Update then come back over here and refresh this. Now you can see it lays it out in sort of grid view. The long title and then the different kinds of options cause some problems and the way Thesis formats things like this Add to Cart button is also kind of problematic. I’m going to show you at the end of this lesson how to solve all that.
You don’t have to limit this just to two displays. Actually if this were reconfigured you could end up with three or four or five different of these grids in a line and if you add nice short titles and price and an Add to Cart button without options as some of you probably will have. You would end up with a nice looking grid view of your Products. Then when clicking on that it takes you over to that Product page.
Third WP eStore Shortcode Product Display
Let’s look at the third and final version and that is fancy4. This works pretty nicely if you’ve got a really dark background on your site. It’s not going to be particularly attractive here. But if we just take this out and do fancy4 there and hit Update then come back over here and refresh you can see that it gives it a dark background with a light border and again this is something that we will want to edit in CSS. If you select the View Details it takes you over to the page.
Those are the three different methods of displaying your Products. I’m going to go ahead and go back to the first one for this. Hit Update and then we’ll just add this to the E Books as well, go back to Pages, go back to E Books, hit Edit, paste that and then we’ll just change the number 1 to a number 2. Update that. Then you can see that if we go to Our Products and we look at our E Books, here’s all of our e-books in this list and if we go back to Our Products, we could go to our Books and our books are all down in this list.