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 5 – How to Display Individual Products

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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 are going to look at different ways to display a specific product. We’re going to start off with Product IDs just like we looked at Category IDs. Go to your Dashboard and scroll down here to the WP eStore. Look at Manage Products and you can see that all of our products here have an ID and this is the Product ID.

Understanding WP eStore Product ID

The product ID is the thing that you want to keep track of when you’re going to do this for an individual product. We probably have to keep refreshing our memory because it’s pretty easy to put something that would be specific to Products 10 in a page that doesn’t relate to it so you need to keep track of this ID number.

There are a variety of ways for you to add something to an individual page or a post. That is not what we’re doing here in this store at all but I’m going to show you how it works in any case because you may in fact want to do that.

A Tabular List of All Products

We’re just going to go ahead and create a new page and I’m going to call it Demonstration. Add New, Demonstration. Here we demonstrate functionality we’re not actually using. Go ahead and hit Publish.

On this Demonstration page one of the first things we can do is look at a list of all of our Products. If we come over here to the shortcodes and we scroll down here to Product Display, this right here just displays a list of our products. Hit select or copy and then come back over to the site and below this paste it, hit Update and then view the page. There is a list of all of our products. This does not link us to our Product page this is just a list with a price and an Add to Cart button. Don’t be too worried about the Add to Cart button because we will be modifying the it so that it shows up properly. We’ll be changing the CSS.

It also will indicate the different variations including preferences and that sort of thing. So this can show a list of every single one of our products regardless of what category it is in.

“Stylish” List of All WP eStore Products

Rather than doing it that way let’s take a look at another way of doing this. We can look at all of our products but put them in that little stylish box. Come back over here and we change that to this shortcode. Select Update, refresh it, and now every single product that we have is in its stylish box. It comes all the way down here and lists every single one of them like that.

I don’t see that as being particularly useful for folks but whether it’s useful or not, if you only have a couple of products this might be the way to do it without using Categories at all. In any case this is a way to put a list of all your products, their images, their description and an Add to Cart with a link back to the Product page on a page.

WPeStore Product Display Style 1

The other thing you can do rather than listing all of the products is you could list individual products. So that’s next. We come down here and we scroll down here to this section here which is wp_eStore_fancy1. This displays an Add to Cart button with a stylish thumbnail image, product name description, etc. in a post or a page. Select that and go back to our site and instead of that we paste it. Select Update, come over here to our demonstration page and refresh it. Now the big list is gone and all we have left is only one product.

This could be useful for you inside of a post. If you wanted to have a product at the end of a post that you were selling this could be a way of doing that. It could be a way of tucking something into a page where you’ve got information. This can be a very useful tool. There are in fact five different configurations for this and we’ll take a look at each one of those.

WPeStore Product Display Style 2

So that was fancy1 with Product ID 1. Now we will take a look at the next one. Actually what I want to do is to show you the Buy Now version of this as well. So if we take this and we use the Buy Now version and we copy that it gives us a Buy Now button and a Buy Now functionality rather than an Add to Cart functionality. Hit Update and come over here and refresh it and take a look at it. Here we have our Add to Cart functionality and here we have Buy Now functionality.

We don’t have our cart added yet so I can’t demonstrate this but Buy Now will take you essentially take you directly to PayPal. In fact this might work because we’ve already set up the PayPal thing. Yes, see Buy Now takes you directly to PayPal whereas Add to Cart would bring up a cart. So that’s the difference between the two and we’re going to talk more about that later.

We’ve got our fancy1 and we’ve got our Buy Now fancy. Let’s take a look at the next version which is fancy2. If we come down here and take a look at fancy2 you can see that these now have the same pattern, fancy 2, fancy3, fancy4 and fancy5, so I’m not going to keep coming back to this. We’ll just change it each time. But if we come back over to our website and we’ll call it fancy2 and let’s make it Product 2, hit Update, refresh it.

WPeStore Product Display Style 3-5

So there’s our third version, it’s got the little bit of background color. Obviously the Add to Cart is thrown off but when we fix the button functionality it will still look pretty good.

Let’s do the same thing. Copy that and we’ll do a fancy3 with Product 3 and refresh it. So there’s our fancy3 and it has that sort of grid view like appearance. We can go to fancy4 and with Product 4 and that’s going to give us the dark background version of this. Then fancy5 I think looks quite nice and it’s more of a vertical orientation. We hit Update, fancy5 with Product ID 5 and refresh and now you’ve got it laid out like this. You’ve got the image, you’ve got the label; you’ve got an abbreviated amount of text, Add to Cart button, all of the details.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment