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 6 Creating the Product Detail Pages

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 create product posts in our e-commerce website. To give you an idea of what that’s going to look like go back to our demonstration site. Let’s look at one of our products, say Banana Lust. This is our product post and it has its page heading, some meta information, some information that we will be extracting from our plugin, a couple of purchase buttons and then detailed information.

Upload Media Files

Let’s go back over here to our e-commerce website and we begin by uploading all of our media. Go to the Media Library and select Add New. I have collected all of my thumbnail images and my main product images in one place. We’ll go there and we’re going to select the appropriate images. In this case these images are all going to be uploaded. These are all the book images, both large and small. Then we say Open to that and let the media library just upload these.

Now that everything has downloaded for us, that is we have the standard book, the e-book, the standard book thumbnail and the e-book thumbnail for each of our products, we can start creating our product posts for our e-commerce website.

Create Product Posts with Images

I’m going to start off with Add New, Posts and the first post is going to be our product Banana Lust – Confessions of a WordPress Trainer. Instead of Uncategorized it’s going to be categorized under Books and I’m going to add some text to this. Scroll down here. We don’t need a Custom Title Tag in this case but I do want a Meta Description so in this case it’s going to be “An example of a product page in an e-commerce website”. That’s its Meta Description. In your case you would have a meta description that described the actual product for your e-commerce website.

Come down here to Post Image and in order to access that I’m going to right click on the Library, open up the links in a new menu. Because we are doing Banana Lust we’ll scroll down here until we find it and we’ll edit the Banana Lust book. We need to pick up this file URL, come back over to our post, down to Post Image and let’s  paste that there. Then let’s give it an alt tag. The alt tag should be descriptive of the image, “Banana Lust book available at Thesis eStore”. And we want that to be flushed left with text wrap and above the heading.

Come here to our Thumbnail Image and we’ll do the same thing. So we go back to Edit Media and now we want to pick up our thumbnail which is here, pick up our URL, come back over, place that URL there and give that Thumbnail Image the same alt text.

Add an Excerpt for the Teasers

There’s one last thing we need to do and that is to add an Excerpt. This is going to show up in our teasers. You can just let it automatically take the first 100 or so characters or you can decide to craft a good summary description of your product for the teaser excerpt which is what I would recommend doing. In this case I’m just going to copy some Lorem ipsum text and I’m going to paste it down here under Excerpt, right there. This is a way for you to control what the excerpt is that’s displayed when you see a teaser and we’re going to take full advantage of that in the not too distant future. Now go ahead and say Update and take a look at the result. It looks just like a typical blog post and there are a bunch of things we’re going to do to this in the course of this tutorial series. For the time being go ahead and create one of these for each of your products.

We have now entered all of these different product posts for our e-commerce website. In this case I have entered 12 products, six regular books and six e-books. You can see if we go over to the Blog each product post that shows up and then you can see the teaser version of the remaining product posts. In subsequent lessons we will be editing these teasers so that they display the same sort of thing that these teasers do. Here’s the revised teaser which has the price and the shipping and all the rest of this information. So these teasers that we have created here using default Thesis functionality are going to be altered so that they can contain the rest of that information.

And that wraps up Lesson 2, create product posts, of the Build Your Own E-Commerce Website tutorial series.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
5 Comments… add one
5 comments… add one
  • sam bright June 11, 2010, 1:42 am

    I really really love your work and often wonder who taught you? Please keep it coming. I’m still a newbie, but I’m starting to pick up the material pretty easily from your style of teaching.
    Thank you very much!
    Sammy Bright

  • dina ralt July 26, 2010, 3:16 pm

    Hi Rick
    I only noticed now as I watch your videos that actually do not have a home page in my dashboard pages options it is kind of weird cause i do have a home page which is the first page that opens when you arrive at my blog.
    How do I configure my home page in retrospect? is it possible at all?
    Thanks for any help

    • Rick Anderson July 26, 2010, 5:26 pm

      Josef, you do HAVE a home page even if it isn’t CALLED “home”. If you have a static front page as your home page then it will be called whatever you’ve named it. The home page of this site is called “Anyone can learn to how to get their business online effectively” and I’ve changed that for navigation purposes to “HOME”. On the other hand, if your home page is the typical blog page (which it is by default) then it doesn’t show up in any list of pages (because it’s not actually a page).

      What kind of configuring are you wanting to do that you don’t see a way to do?

      Rather than posting that here in the comments section, why not post it in the forum.

  • Rebekah Jones October 15, 2010, 10:43 am

    Thanks for the tip about “monthnum” — did not know that helped WP index posts in a better way. I’ve always just used “postname” in my custom structures, but that’s probably ’cause my background has been HTML sites. I’ll be adding “monthnum” to my main blog. Thanks! ~R

    • Rick Anderson October 16, 2010, 7:25 am

      You’re welcome Rebekah, adding one date number reduces the amount of work WordPress has to do to resolve the URL and display the appropriate content.

Leave a Comment