This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 4 of Lesson 16 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to modify the Thesis Filter by using a template tag so that this introduction here is different depending upon what the different product review counts on our ecommerce website are.
For example, if this has no reviews then we want it to look like one thing. If it has one review then we want it to say 1 Review and if it has more than one review than we want it to say that number and Reviews. That means we need to have three different conditions; one with no comments, one with one comment and one with multiple comments.
Comments_number Template Tag
WordPress provides us with a template tag for that purpose and is called comments_number. On the lesson page I have a reference to comments_number Template Tag although you can also just go ahead and search for comments_number template tag, and it happens right there at the top. The way this works is that when you use the tag comments_number you say what you want to happen when there are no comments, what you want to happen when there is one comment and what you want to happen when there is more than one comment. There is one element to keep in mind which is this nice percentage sign. If you use this percentage sign in this what it will do is it will insert the number of comments in that section.
We are going to copy this comments_number template tag, copy that. We’re going to come back over to our function that we’ve been working on in custom_functions.php and instead of using string replace we’re going to use that template tag. So content equals comments_number and here what we’ll say in the case where there are none is “Be the first to leave a review”. Then in the second one we want to say “1 Product Review” and then in the final one it should say that number sign Product Reviews. Let’s go ahead and save that.
So now we’ve replaced the content with either “Be the First to Leave a Review”, or “1 Product Review”, or “any number Product Reviews”, and if it’s not in categories 5 or 6 then it’s just going to say the normal thing. So let’s go ahead and save that. Let’s upload it to our website. Let’s test it.
This has one product review and so it says 1 Product Review. If we go to our book that has more than one product review, Apple Ardor, and we scroll down here you can see it says 2 Product Reviews and if we go to our Blog and we look at a regular blog post it remains entirely unrevised. Now you can tell that there’s a difference in the styling between the default and what we ended up with, with Our Products and that just means we need to add some HTML elements to style the product review on our ecommerce website.
Add some HTML Elements for Styling
If we take a look at this whole thing in Firefox for a second and we come and look at the Blog comments for a regular post, scroll down here, inspect that element and then you can see that this is inside of a div called div id=’comments_intro’. It has a class=’comments_intro’, and then there is a span class=’bracket’, span and then there is another span around the number and if we wanted to we could have another span with that same bracket.
I want the comments to look different than the product reviews. So the only thing we’re going to do is we’re going to add this comments_intro, class. If we go back over and look at our Books for a moment and look at Apple Ardor and scroll down here to Product Reviews you can see that it’s inside of div id=’comments’, but it’s not really inside any particular div. We want it inside of a class div id=’comments_intro’.