This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 3 of Lesson 13 of the Build Your Own E-Commerce Website tutorial series. In the third part of this lesson we are going to use the Advanced Recent Posts widget to create a related posts list that will go on each product of your ecommerce website.
If you’ve got an e-book product that you’re looking at then it will display posts that are related to that e-book and if you’ve got a book product it will display products that are related to that book product. But it won’t display all the products like the widget that we’ve already created.
Add the Advanced Recent Posts Widget
We’re going to leave that widget open because we’re going to copy from it but we will take another one, Advanced Recent Posts, and we’re just going to put it right there. Instead of Recent Posts we’re going to call this Related Products. We’ll leave the number of posts that show at 10 and make the Excerpt length 100.
Specify Thumbnail and Excerpt
The Thumbnail Custom Field we’re going to steal from here – thesis_thumb, remember? This is why I left that other widget open. Remember the Width was 50 and the Height was 96, and this time rather than specifying Categories we will specify Get posts from current category. So if we select that what’s going to happen is everywhere that this widget exists it will get the posts that are in the same category as the post that you’re looking at. We don’t have to specify the Books category for books and the E-Books category for e-books because the e-book is in the E-Books category and this will automatically draw out all of the products that are in that category when you’re on an e-book product.
We’ll hit Save and I want you to see how that works. We’re going to come back over here to our ecommerce website and refresh. If we go to Home this shows every post in our site or the first 10 in our site because the Home page doesn’t actually have a category. This is not a widget that we’ll want to display on a home page but we’ll want to display it on product pages. So you can see what that looks like here, it doesn’t really matter what category it is since there is no category specified.
Specify Current Category
But if we come over to our Products and we go to Books you’ll see that this still is not showing what you would expect it to show. You would think that because you’re on the Books page that this page is somehow related to the Books category. But remember that WordPress doesn’t know that. You can’t add a category to a page and so this also doesn’t work on a page. This really is only going to work on a post.
So if we come back over here to Banana Lust and look at this product, you can see that the Related Products only refers to books or the products inside the category Books. There’s not an e-book that shows up in this list. Now if you go to E-Books instead and go to Orange Passion E-Book, you can see that the same widget is only applying itself to e-books and not books. So that’s the part of it that’s automatic. One widget does two different things or displays differently depending on what category of post is being displayed here. Obviously this is really only going to work on our products pages so that when we go to decide which pages to put that on that’s what we’re going to do here.
Edit the CSS of Advanced Recent Posts
Now we want to do the same kind of editing to our CSS that we have done to our products. If we flip back over and refresh our screen in Firefox we can inspect the element of one of the examples and and you can see that this is now related to advancedrecentposts-6. So we had an advancedrecentposts-4 down below here. All we need to do is apply this to advancedrecentposts-6 and we’ll get the same appearance.
Let’s go back to Web Developer and then custom.css, scroll down here to the Advanced Recent Posts and if we copy this, put a comma after it, space and paste and replace the 4 with a 6 that will apply this to both sets of widgets. We’ll do the same thing with the li, copy, comma, insert and then change that to a 6. Now you can see that the Related Products looks exactly the way that the entire products list looks and all we had to do was make that one little change.
Go back to our CSS file and let’s make that little change, copy that, comma, space, paste and make that a 6 and then copy this, comma, space, paste and make that a 6. We’ll save the custom.css. We will open up Filezilla, refresh the custom.css file, come back over to our website and refresh the view. Now you can see that our Related Products widget is displaying these Related Products correctly.
That wraps up part 3 of Lesson 13, use the Advanced Recent Posts widget to create a related posts list, of the Build Your Own E-Commerce Website tutorial series.