[TomatoCart] – Integrate an elegant reviews list for your glass gray template

In this article, I will show an elegant review list for your glass gray template and then teach you how to integrate it into your store. An example can be seen in the image below:


Figure 1. The default layout of reviews list in product info page


Figure 2. The elegant layout for reviews list

As figure 2 shown, it looks more beautiful and professional than the default layout. If i am a guest to access your store, i prefer to have a look at the reviews shown in such kind of layout.

How to integrate it?

Step 1. Open info.php under templates > glass_gray > content > products fold to edit.

Step 2. Find following code snippet:

 <dl class="review">
                    echo '<dt>' . osc_image(DIR_WS_IMAGES . 'stars_' . $Qreviews->valueInt('reviews_rating') . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $Qreviews->valueInt('reviews_rating'))).'    '.sprintf($osC_Language->get('reviewed_by'), '  <b>' . $Qreviews->valueProtected('customers_name')) . '</b>' . '  (' . $osC_Language->get('field_posted_on').' ' . osC_DateTime::getLong($Qreviews->value('date_added')) . ')' . '</dt>';
                    echo '<dd>';
                    $ratings = osC_Reviews::getCustomersRatings($Qreviews->valueInt('reviews_id'));
                    if (sizeof($ratings) > 0) {
                      echo '<table class="ratingsResult">';
                      foreach ($ratings as $rating) {
                        echo '<tr>
                               <td class="name">' . $rating['name'] . '</td><td>' . osc_image(DIR_WS_IMAGES . 'stars_' . $rating['value'] . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $rating['value'])) . '</td>
                      echo '</table>';
                    echo '<p>' . $Qreviews->valueProtected('reviews_text') . '</p>';
                    echo '</dd>'; 

Replace it with following code:

<div class="review">
                  <div class="review-header clearfix">
                    <div class="avatar">
                        <label><?php echo substr(trim($Qreviews->valueProtected('customers_name')), 0, 1)?></label>

                    <div class="rating">
                      <div class="customer-name"><?php echo $Qreviews->valueProtected('customers_name'); ?></div>

                      <div class="rating-stars">
                        <?php echo osc_image(DIR_WS_IMAGES . 'stars_' . $Qreviews->valueInt('reviews_rating') . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $Qreviews->valueInt('reviews_rating')));?>  


                    <div class="review-date">
                      <small><?php echo osC_DateTime::getLong($Qreviews->value('date_added'));?></small>

                  <div class="review-content">
                      <p><?php echo $Qreviews->valueProtected('reviews_text');?></p>

Step 3. Open index.php under templates > glass_gray fold to edit.

Step 4. Add following code before </head> tag:

<style type="text/css">
  .review {
    padding: 15px 10px 0 10px;
    border-bottom: 1px solid #DDDDDD;

  .review p {
    margin: 0;
    padding: 10px 0;

  .review-header .avatar {
    float: left;
      position: relative;
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      background: #3F3E3E;

  .review-header .avatar label {
      background: 0 0!important;
      position: absolute;
      top: 8px;
      width: 100%;
      min-width: 100%;
      left: 1px;
      text-align: center;
      font-size: 18px;
      color: #fff;

  .review-header .rating {
    float: left;

  .review-header .rating .customer-name {

  .review-header .rating .rating-stars {
    margin-top: 5px;

  .review-header .review-date {

That’s it. Please apply it into your glass gray. I think it is useful for an online store.

Looking for quality TomatoCart hosting? Check out Arvixe Web Solutions.

Tags: , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

2 Comments on [TomatoCart] – Integrate an elegant reviews list for your glass gray template

  1. Dartco says:

    Jack, do you plan to aggregate all the fixes in some alpha/beta? All these updates are important but you kill the TC without updates. And fix the forum finally. Move it to phpbb 3.1

    • Jack Yin says:

      Hi dart,

      Lei plan to restart this project soon. Anyway, i will do utmost to continue to support this project. I will implement a new modern and professional template for TomatoCart system within this year. All of these usable features and fixes will be merged into next release.

Leave a Reply

Your email address will not be published. Required fields are marked *