[TomatoCart]Integrate an elegant reviews list into your bootstrap tempate

The default layout of customer reviews isn’t very effective and can impact the user experience within your bootstrap powered TomatoCart store. For example:


Figure 1. Default layout of reviews in product info page of bootstrap template

In this article, I will teach you how to integrate an elegant layout for reviews list into your bootstrap store as follow:


Figure 2. Elegant layout for reviews list in product info page


Figure 3. Elegant reviews layout in mobile device

How to apply it for your bootstrap store?

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

Step 2. Find following code block:

<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 the code block with following code:

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

                    <div class="rating pull-left">
                        <div class="author">
                            <strong itemprop="author"><?php echo $Qreviews->valueProtected('customers_name'); ?></strong>

                        <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="pull-right review-date hidden-xs">

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

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

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

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

      .review:last-of-type {

      .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: #569BD0;

      .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 try it for your bootstrap store. I will show you an elegant rating bar which look like the ratings bar in amazon.com in next article.



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

Leave a Reply

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