Improve default Magento reviews

If you’ve ever worked on Magento framework you’re familiar with the fact that Magento provides bunch of useful features. In this article we will cover one of them – Customer Product Reviews. Maybe some will say that we don’t need to change anything regarding this feature, but when we are in custom development a lot of things can’t just work “out of box”. Especially if you willing to provide fully polished retina responsive theme, default isn’t the way we roll.

So let us improve the default Magento product reviews feature.

Default product review

Like in many other cases Magento 1x uses some outdated approaches for displaying Magento product reviews on the store’s frontend. Our changes will be focused only on frontend, we won’t go into backend or admin part of Product reviews. If you are not satisfied with this parts, we can talk about in some other time.

Basically if we don’t change something our customers have to deal with this form in order to create product review:

Sorry Magento but I’ll probably skip leaving my feedback when I see this interface. And I believe that lot of customers will behave the same.

Many studies have shown us that product reviews are a useful thing for your potential customers. Because a lot of customers check product reviews before purchasing somthing. From that our primary goal is to collect as many customer reviews as possible. In order to do that we need to improve the review in this interface to something better that has an user-friendly feel.

After we adjust submit form we will also improve customer product review sections on frontend (rating stars on product page, category page etc.). Magento handles this section by using inline style and image sprite in order to dynamically show product ratio. We will replace this outdated approach by pure CSS.

I’ll assume that we are all working on custom themes and that Magento base styles are?already removed from theme. Because I don’t plan on going?thought each step and finding out how and where to transfer files from base theme. Also, I’ll assume that you know what to do in order to enable Magento Reviews if they are disabled.

Our main goal is to remove (hide) ratio inputs from frontend and instead of them we wish to have something like this:

Basically radio buttons will be replaced with vector rating stars.

To create custom interface we need to modify base review template file (../template/review/form.phtml). Copy base file to your theme and remove all unnecessary table markup. Together with default foreach inside table markup. We’ll replace that markup with this slightly modified foreach:

<?php foreach ($this->getRatings() as$_rating): ?>
<dl>
<dt class="label"><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></dt>
<dd class="rating-input value">
<?php foreach ($_rating->getOptions() as$_option): ?>
<label class="icon-star-empty" for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"> <input class="no-display radio" type="radio" name="ratings[<?php echo$_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo$_option->getId() ?>" class="radio" />
</label>
<?php endforeach; ?>
</dd>
</dl>
<?php endforeach; ?>

As you?can see, we have adjusted markup by adding label elements which will be used like “mask” for hidden radio inputs. And they will be also used for displaying stars in form of vector (retina) icons.

Now that?we have a new markup we also need CSS, which will provide fully functional rating functionality. Before going on CSS code please set up web fonts or some kind of SVG graphics that can be use for rating stars. In this article we are using empty star, half star and full star icons from Font Awesome collection but feel free to use what ever you wish.

In order to better understand what we have done please check provided CSS code:

// Rating star input
.rating-input {
white-space: nowrap;
}
.rating-input > label {
display: inline-block;
position: relative;
width: 1.1em;
height: 17px;
color: #d0a658;
font-size: 20px;
font-size: 2rem;
}
.rating-input:hover > label:before {
content: "\e80a";
position: absolute;
left: 0;
color: #d0a658;
}
.rating-input:hover > label:hover ~ label:before {
content: '\e800';
}
.rating-input .full-star:before {
content: "\e80a";
}

Note: This approach will not work on older web browsers (lt IE8). If support for older browsers is required then we need to think about some type of fallback. One of suggestion will be to use Javascript, but I’ll not cover that in this article.

Next thing to do is to improve rating view on category page, product page etc.

First of all go to Magento base theme and find where and how Magento displays product reviews. For example go to base review view phtml template file. Find the "rating-box" markup and spot inline style="width:...%;" inside it. We don’t need it any more if we planing to use rating stars in vector shape. Instead of inline style we will use html5 data- attribute. We will call that attribute data-rating.

In order to show different reviews (number of stars) for different product we need range of numbers which can be declared differently in our CSS code. The easiest option is to go straightforward and adjust current Magneto percent range in PHTML to range of numbers that we need. Especially if we don’t really need a super precise range of ratings.

This option doesn’t require any type of extending Magento default Review block or some other wizardry. In this?case you?just need to have a range of numbers from 0 to 10 so we can hook our CSS on that numbers. By using native php round function and simple mathematical division by 10 we can get that range of numbers from the getPercent() Magento function.

In short, this is code which we need to use for showing rating stars:

Note: If that’s not good enough for you, then you need to consider extend of default Magento Review block and play it with range of numbers which Magento provide in order to get right data range for data-rating attribute that you can use.

And at last we need CSS code which will be responsible for dynamically displayed stars for each review ratio. By using data-range attribute and CSS content property we can show correct number of stars for each case. If the received range on data-range attribute is between 0 and 10 we can use that numbers in the way that value of 0 representing products without reviews (all empty stars), value of 1 will show half rating star on product. Value 2 will be one full star, value 3 will be one and half star etc. To cut to the chase, please check CSS code:

.rating {
width: 100%;
text-align: left;
}
.rating .rating-count {
}
.rating .icon-fallback {
display: none;
}
.rating i {
font-size: 2em;
}
.rating i:before {
margin-left: 0;
min-width: 130px;
text-align: left;
}
// half star rating
.rating i[data-rating="1"]:before {
content: "\e822 \ \e800 \ \e800 \ \e800 \ \e800";
}
// one star rating
.rating i[data-rating="2"]:before {
content: "\e80a \ \e800 \ \e800 \ \e800 \ \e800";
}
// one and half star rating
.rating i[data-rating="3"]:before {
content: "\e80a \ \e822 \ \e800 \ \e800 \ \e800";
}
// two star rating
.rating i[data-rating="4"]:before {
content: "\e80a \ \e80a \ \ee800 \ \e800 \ \e800";
}
// two and half star rating
.rating i[data-rating="5"]:before {
content: "\e80a \ \e80a \ \e822 \ \e800 \ \e800";
}
// three star rating
.rating i[data-rating="6"]:before {
content: "\e80a \ \e80a \ \e80a \ \e800 \ \e800";
}
// three and half star rating
.rating i[data-rating="7"]:before {
content: "\e80a \ \e80a \ \e80a \ \e822 \ \e800";
}
// four star rating
.rating i[data-rating="8"]:before {
content: "\e80a \ \e80a \ \e80a \ \e80a \ \e800";
}
// four and half star rating
.rating i[data-rating="9"]:before {
content: "\e80a \ \e80a \ \e80a \ \e80a \ \e822";
}
// five star rating
.rating i[data-rating="10"]:before {
content: "\e80a \ \e80a \ \e80a \ \e80a \ \e80a";
}

Also, you will need this small jQuery code in order to keep stars selected after click/touch on them.

jQuery(document).ready(function(){
jQuery('.rating-input input').click(
function () {
jQuery(this).parent().nextAll().removeClass('full-star');
}
);
});

That is all guys.

As I’ve already mention if this isn’t good enough for your case, then consider to use Magento default 0 to 100 range and create your CSS on that concept. Or, extend Magento Review block in order to create array of numbers for further manipulation of data-range attributes.

Cheers.

, | 2

How to programmatically create customers in Magento 2.3.x

, | 2

Damir Korpar, | 5

Magento Switchable Install Script Setup Class

1. Nice one Mladen, great guide as always.

For those interested, this is also easily achievable with just some CSS:

Just use one “foreach” for the input and another “foreach” for the label (so that all inputs and labels are separate) .
Then use the “:nth-of-type” property on the labels/stars for the :hover and :checked stuff.

A very nice and clean CSS based star rating system!
(In case you can’t get it to work hit me up)

In ‘Adjust Product rating view’ point, you mention:
‘In short, this is code which we need to use for showing rating stars:’
It seems that code is missing, would be possible obtain this code?
Regards

3. Don says:

Is there a way to make the rating stars a required field, as I want reviews to ALWAYS select at least one star before the input form is submitted?

4. Pedro Santos says:

Great post.
In case of not showing the stars and you are using font awesome change the class of label to:
class=”fa fa-star-o” aria-hidden=”true”

5. Eduardo says:

.rating-input {
white-space: nowrap;
}

.rating-input > label {
display: inline-block;
font-family: ‘FontAwesome’;
position: relative;
width: 1.1em;
color: #f8d800;
font-size: @font-size-base + 5px;

&:before {
content: ‘\f006’;
cursor:pointer;
line-height: 28px;
width: 1.2em;
}
}
.rating-input:hover > label:before {
content: “\f005”;
position: absolute;
left: 0;
color: #f8d800;
}

.rating-input:hover > label:hover ~ label:before {
content: ‘\f006’;
}
.rating-input .full-star:before {
content: “\f005”;
}

1. Hi, improvement isn’t related to version of Magento. If your Magento have Customer Reviews feature, it will work.

What version of Font Awesome are you using? Here I have the latest version and nothing happens.
The codes you used on your CSS are redering different symbols here.

I’m using Ubuntu but theses symbols are still rendering different on my Android Chrome.

Can i change icon-star-empty for fa fa-star-o ?

I’m not familiar with character encondings and I’m struggling to sort it.

6. Hi, Do you know if you could ask a customer for their email address by adding a field?

1. Yes, it is possible to add email address input in customer review form. But that adjustment is more backend adjustment then frontend work.
Regards.

7. Nice post I will definitely apply these codes!

8. Niels says:

Hey, nice tutorial so far. I try to apply the changes to my code and I have some problems. Stars will only be displayed if I hover the stars and I cant click to set them, did I miss something or is the code not complete?

1. Hi Niels,
I’m sorry for waiting on my reply.

You are definitely right. Unfortunately, I’ve missed to add small jQuery code for controlling click/touch on rating stars. Sorry about that.

Code snippet is added to article.

Kind regards,

9. vaibhav says:

HI, How to set the default rating on all products. Instead of showing “Be the first to review this product ” Message.

1. Hi,
I’m sorry for waiting on reply.

As far I know is not possible to perform that type of action in Magento by default. You will need to create some type of script which will alter Magento database with predefined (fake) product rating data, user name and user comment.

Cheers!