Write Review Star Using Font Awesome

This is more of a tip, too small to me a mod.. while modifying my tpl_product_reviews_write_default.php for responsive form design, I solved two issues I had and thought why not pass them along!

This tip is for anyone using Font Awesome on there site or wish to install it.

First of all, I have a testing server setup so I can create and test than upload to my live site. One of the pain was Font Awesome would not always work if I loaded locally form my site so I had to have the link to Font Awesome when live and link to my local copy when working off-line on design. Got the idea off the net and modified it to work for me.

Replace or add the script below the link to Font Awesome as below on your YOUR_TEMPLATE/common/html_header.php page just above the closing head tag;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">  
        var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
            // Fallback Link
            $('head').append(<?php echo '\'<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'font-awesome.css' . '" />\''; ?>);

Now that you have it installed, now what! Why I’ve started down this patch… I finally got around to redesigning the layout of my Add Review page. It was the standard mess and not responsive at all. In making it responsive as with my other forms, I hated the old radio button rating of 1 – 5 input buttons with a 5 star image. Really an antic method that I was stuck with… But wait! looking at other sites, like Amazon, they was using a cool 5 star set of stars, not a old style radio input button! must be something I could do!

Was looking at coding something in jQuary to do it. Then looking at Font Awesome, they was displaying the same set of star’s as amazon was using… turns out the coding wasn’t a jQuary answer after all…

Turns out adding cool star’s was as easy as adding font awesome to your site. And to top it off, stars are not the only thing you can use.. like jets, apples, bells, cars…. get the idea, any icon within the font can be used..

First you need some CSS to handle the stars create or add to YOUR_TEMPLATE/css/product_reviews_write.css page;

.masterdog {position:relative;} 
.rating { float:left;} 
.rating:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);} 
.rating:not(:checked) > label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:4em;line-height:1.2;color:#e0e0e0;} 
.rating:not(:checked) > label:before {font-family: FontAwesome;content: "\f005";} 
.rating > input:checked ~ label {color: #ef2929;} 
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #f57900;} 
.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {color: #729fcf;} 
[id^="tooltip-"] {-webkit-transition: .4s;transition: .4s;} 
[id^="show_me-"] {opacity: 0;} 
#remove_me {opacity: 1;} 
#tooltip-1:hover ~ #show_me-1 {opacity: 1;} 
#tooltip-1:hover ~ #remove_me {opacity: 0;} 
#tooltip-2:hover ~ #show_me-2 {opacity: 1;} 
#tooltip-2:hover ~ #remove_me {opacity: 0;} 
#tooltip-3:hover ~ #show_me-3 {opacity: 1;} 
#tooltip-3:hover ~ #remove_me {opacity: 0;} 
#tooltip-4:hover ~ #show_me-4 {opacity: 1;} 
#tooltip-4:hover ~ #remove_me {opacity: 0;} 
#tooltip-5:hover ~ #show_me-5 {opacity: 1;}  
#tooltip-5:hover ~ #remove_me {opacity: 0;} 
.rating span {transition: opacity 1s;position:absolute;top:50px;left:10px;width:300px;height:20px;font-size:3.5em;line-height:1;color:black;}  
@media (max-width:480px){.rating span {font-size:2.5em;}.rating:not(:checked) > label {font-size:3.5em;}}

Now all that’s left is to replace the old input with the new, in YOUR_TEMPLATE/template/tpl_product_reviews_write_default.php page;


<div class="ratingRow"> 
<?php echo zen_draw_radio_field('rating', '1', '', 'id="rating-1"'); ?> 
<?php echo '<label class="" for="rating-1">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_ONE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_ONE, OTHER_REVIEWS_RATING_STARS_ONE_ALT) . '</label> '; ?> 
<?php echo zen_draw_radio_field('rating', '2', '', 'id="rating-2"'); ?> 
<?php echo '<label class="" for="rating-2">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_TWO, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_TWO, OTHER_REVIEWS_RATING_STARS_TWO_ALT) . '</label>'; ?> 
<?php echo zen_draw_radio_field('rating', '3', '', 'id="rating-3"'); ?> 
<?php echo '<label class="" for="rating-3">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_THREE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_THREE, OTHER_REVIEWS_RATING_STARS_THREE_ALT) . '</label>'; ?> 
<?php echo zen_draw_radio_field('rating', '4', '', 'id="rating-4"'); ?> 
<?php echo '<label class="" for="rating-4">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_FOUR, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_FOUR, OTHER_REVIEWS_RATING_STARS_FOUR_ALT) . '</label>'; ?> 
<?php echo zen_draw_radio_field('rating', '5', '', 'id="rating-5"'); ?> 
<?php echo '<label class="" for="rating-5">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_FIVE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_FIVE, OTHER_REVIEWS_RATING_STARS_FIVE_ALT) . '</label>'; ?> 

And replace all of it with the following;

<div class="masterdog">
<div class="rating">
<?php echo zen_draw_radio_field('rating', '5', '', 'id="tooltip-5" '); ?><label for="tooltip-5"> 5 stars</label>
<?php echo zen_draw_radio_field('rating', '4', '', 'id="tooltip-4" '); ?><label for="tooltip-4"> 4 stars</label>
<?php echo zen_draw_radio_field('rating', '3', '', 'id="tooltip-3" '); ?><label for="tooltip-3"> 3 stars</label>
<?php echo zen_draw_radio_field('rating', '2', '', 'id="tooltip-2" '); ?><label for="tooltip-2"> 2 stars</label>
<?php echo zen_draw_radio_field('rating', '1', '', 'id="tooltip-1" '); ?><label for="tooltip-1"> 1 stars</label>
<span id="show_me-5">Very Best</span><span id="show_me-4">Best</span><span id="show_me-3">Good</span><span id="show_me-2">Bad</span><span id="show_me-1">Pretty Bad</span><span id="remove_me"></span>

FontAwesome Stars
The stars are radio inputs so the back end code stays the same, the only thing changing is the input radio buttons. The change in order and labels are needed for text readers and touch which makes things work for touch screens like phones..

Now all you need to do is redesign that boring review page, you have lots of space now! You can checkout how I did my page, I have guest checkouts so guest reviews are allowed.


I found that just having stars was a bit boring… I added words too. On hover the words change to match the star, on selection, the 1 of 5 Stars is displayed! The whole thing is responsive too…

rating3 rating4

You need a bit of script to get the 1 of 5 to respond to the star clicks..

in includes/modules/pages/produst_reviews_write/jscript_main.php add this bit of jQuary code somewhere.

var radVal = $("input[name='rating']:checked").val();
$('#remove_me').html(radVal + ' of 5 Stars!');

If your like me and try different things, maybe 1 of 5 is not what you want and what was selected stays visible. Then the code below would work for you too.

    var radVal = $("input[name='rating']:checked").val();
    switch (radVal) {
    case '1':
        $('#remove_me').html('<?php echo STAR_1;?>');
    case '2':
        $('#remove_me').html('<?php echo STAR_2;?>');
    case '3':
        $('#remove_me').html('<?php echo STAR_3;?>');
    case '4':
        $('#remove_me').html('<?php echo STAR_4;?>');
    case '5':
        $('#remove_me').html('<?php echo STAR_5;?>');

Leave a Reply