Clickable star ratings in Magento

So you are setting up Magento and you think a clickable 5 stars rating in your product page would be cool? It’s pretty easy!

First you want to enable the ratings in the Admin panel in Magento. So go to Catalog > Reviews and ratings  > Manage ratings and choose and/or add those that you want to appear in your product page. Just click on each one and select in which shop you want to it to be displayed.

Yay! Done! Now if you are using the rwd-theme and go to your product page, you see that we just added a review… table.

I don’t know about you, but I don’t like it that much. I just want 5 pretty stars that I can click. If you are using the rwd-theme as a base, we just have to slightly modify a template file and add some css. Let’s say, your theme is called “mytheme”. Go grab the

app/design/frontend/rwd/default/template/review/product/form.phtml

and copy it in your

app/design/frontend/mytheme/default/template/review/product folder.

The table where the starts rating are is the one with the “product-review-table” id, between lines 41 and 93. We don’t want the stars on the head of the table, so go ahead and comment or delete the head and the columns, since we don’t really need them.

Now if you refresh the page, you will just see 5 radio inputs. Not exactly there yet, but not long to go.

We don’t want each radio in its own cell anymore, so let’s just move the foreach inside the <td>. And to make our lifes easier, instead of the labels wrapping the inputs, let’s put the inputs first and the labels later and add some css classes, so the table until now should look like:

Now, let’s style it! To make it short, let’s say you have two images, a star_empty.png and a star_full.png in your images folder, each one of them 20px. In your css file add:

Magento
Tags: ,