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 12 – Customize Product Template

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Let’s come over and click over to the product. It would probably be nice to have the same kind of customization happen over here that we just did in the product category catalog pages. So, what I’m going to do is edit the product template and do much the same thing we just did.

Add Featured Image to Headline Area

We come over to our Headline Area and I’m going to take my featured image and put it in the Headline Area.

Remove Unwanted Elements

I’m going to take Author Avatar out, I’m going to take the Author, Date, Edit and Categories out and I’m going to shift Byline out . Then I’m going to drop this stuff in the tray to get rid of it and then get rid of Author Description, Tags and Thesis Post Image.

Add Price and “Add to Cart” Button

So we’ve got our WP Featured Image, our Headline in our Content and our WP Featured Image is going to be full size, left with text wrap, it doesn’t need to link to post in this case. Then we’re going to add those boxes. Remember I had these boxes here, the “Add to Cart” button, we’ll add that in and we’ll add in the Product Price and we’ll add in the Old price and that is going to happen down here.

Let’s save our template now and look at our product and now we have our product title, our price and our “Add to Cart” with our product description. And maybe we want to add an “Add to Cart” at the bottom of this.

So we can come back over here and create a new one of those, WP eStore Product Elements box and shift+drag it over and drop it into Post Box and then at the bottom of Post Content put it here. Then we’re just going to call this one Second Add to Cart and “Add to Cart” button, say okay to that, save the template, refresh the template.

See we’ve got an “Add to Cart” button there, I’ve got another “Add to Cart” button here. We are going to drag Post Comments out entirely, we’re actually going to drag out the Post Navigation also but then I want to add in related products.

Add Related Products Query Box

I’m going to add related products by adding a Query Box and we’re going to call this one Related Products. Say okay to that. Shift+drag Related Products into the Content Column but drop it down below.

We are going to drag Author out and Edit Link out and Excerpt out but we will add back in WP Featured Image which will go above. WP Featured Image will be the thumbnail, it’s going to be centered with no wrap. Headline is going to be link headline to article page and we’re just going to do it as a paragraph tag here instead of h tag. Then Featured Image, Headline. I think I’m going to add product price so again we’ll come down to WP eStore Product Elements and shift+drag it down and drop it into Related Products. Then say, Price and we’ll call it Related Price, okay.

We have to control the Related Products Query Box from over here in Content. Let’s come back over to Content and look at our Related Products. We want to show Products, we want to show Product Categories and the problem with this Query Box is that it requires you to choose the category, it doesn’t let you choose the current products category. Exclude the results from the main loop.

Let’s come back over now and just take a look at our product page. We now have 3 related products showing up here except that they are Genesis related products. I mean they’re Thesis plugins because we chose that product category rather than it choosing the current product category here so what we’re going to do is install one of my boxes.

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