The next thing that we are going to do in this Customize the Appearance of Your WP eStore lesson is to add related products to the individual product display. We’re going to do that in Thesis 2.
Add Related Products to the Individual Product Display using BYOB Box
I have created a brand new box for that purpose that you can find over here under Member Benefits Thesis 2.1 Boxes and that box is called the BYOB Related Posts Query Box.
The BYOB Related Posts Query Box
Now, this box can be used in lots of different contexts. It’s not just for showing related products. It can be used to generate related product lists because what it does is it gives you the chance the choose the post type the taxonomy that you want to compare. So let’s take the product category for example, If you choose product categories it’ll take the product category that this product is in and it will display other posts of the same product category.
Install the Box
That’s what we are going to do next. First we’ll install the box. So let’s come over here and go to Boxes, Manage Boxes and then upload the box. Actually, that’s not where I want to upload it from, byob-related-posts-query, add the box.
So we’ve saved the box and now what we can do is come back over to our Skin Editor and come over to a product page and then say at the bottom of our columns here…what just happened? I thought I had installed that. I installed it and activated it.
Add a Class
Let’s come back to the Editor, go to the Single and then BYOB Related Posts Query Box. We’re going to call this Related Products. Now, if we take a look at this, I’ve given this the class of product_display. It comes without a class at first but I chose product_display for its class and then the post type that we have choices of are the Posts or Products and obviously we want Products.
Choose Product Categories Taxonomy
Products only has a single taxonomy which is Product Categories so we would choose Product Categories and call it good at that. If we were using Posts, you’d have the choice of Categories, Tags or Format. Now, obviously we’re not using Posts so it doesn’t matter but if you’re using this as a related post widget as opposed to a related products widget, you might pick Categories or Tags as a way of establishing the relationship. In this case, we only have one taxonomy and that’s Product Categories so we’re good to go there.
Customize Advance Query Options
Now, in terms of our advance query options, we can order Ascending or Descending, by Date or by ID or Title. We can also use Menu Order if the text of the post type has menu order associated with it or we can just choose Random. I’m going to choose Title.
Offset means how many of these things would you like to offset before you start displaying. So if it comes up with 10, do you want to start with the first one or do you want to offset a couple before you start.In this context, it’s probably not particularly important to have an offset but nevertheless, to the extent that you want to have an offset, you have the opportunity there.
So now we just hit okay to this and then we have to drag it down here and drop it into our Content Column down below the Loop. Actually, I’d like to add a title here so I’m going to add a text box and call it Related Posts Title. We will wrap in a div tag and we’ll call it again related_posts_title and I think what we’re going to do is put that in an h2 tag and we’ll just say Related Products and disable automatic p tags.
Dev Tools Box
Now, I have my Dev Tools Box opened and configured so I can see the options here. If you don’t have the Dev Tools Box installed and configured then this options, you would have to set this text from the Skin Content section. I don’t have to do that because I have the Dev Tools Box which gives me that added ability. It’s quite nice.
Related Products Box
So Related Products Title and then if we open up Related Products, you can see it’s just like any other query box or post box for that matter. It has all the same options that you can choose here, right?
We are not going to have an excerpt but we are going to have the featured image and we’ll put the featured image above the headline. Then I think the other thing we’re going to do is Related Product Price which is something we created last time.
We’ll shift+drag that down here and drop that into Related Products and drop that below. I think I’d give it a class of price and in this case, we’ll go ahead and let it be a div. It’s a single WP eStore product element and the element is Price so we can just okay to that and save the template. Then if we refresh the template, we should have a couple of products down here.
Review the Related Product Display
Now, we said that they should show 3 but we only have 3 products in this category and one of them is this one and so the related products are not going to show the current product. So we have this essentially laid out like that then the featured image here, I intended to choose the thumbnail version. I could choose the medium size version and I could choose left with text wrap. Let’s save the template and refresh the template.
Add “Add to Cart” Button to the Display
Then maybe I’ll just have the “Add to Cart” button added to that. So we’ll come back down to eStore Product Elements and this one is going to be the Related Product Add to Cart. We’ll go ahead and leave it as a div except we’re adding “Add to Cart” button there instead. Say okay and then we’re going to drag that down to Related Products. Then “Add to Cart”, save the template, refresh it, okay there we go.
It looks pretty good but we should just take a look and see what happens to this when it gets smaller. You know, that’s pretty close to working the way we would want it to work.