I have a block in the product description for the product page, I need to transfer it after the tabs and redo the styles

I moved the block to xml <move element="product.info.review" destination="content" after="product.info.details"/>

the block has moved below the tabs

I added styles and it turned out that in the picture

    .product.info.detailed {
      max-width: 55%;
      float: left;

    .product-reviews-summary {
      float: left;
      border: 1px solid @product-heart-color;
      margin-left: 3%;

enter image description here

but I need to create something like this, please help


enter image description here

enter image description here

  • So the stars filled from right to left and need to display avg review right? Oct 3, 2019 at 8:58
  • @Ranganathan yes + at the bottom there is an inscription that says how many reviews are rated Oct 3, 2019 at 9:17

1 Answer 1


Override vendor/magento/module-review/view/frontend/templates/helper/summary.phtml

with below code

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

// @codingStandardsIgnoreFile

/** @var \Magento\Review\Block\Product\ReviewRenderer $block */

$url = $block->getReviewsUrl() . '#reviews';
$urlForm = $block->getReviewsUrl() . '#review-form';
<?php if ($block->isReviewEnabled() && $block->getReviewsCount()): ?>
<?php $rating = $block->getRatingSummary(); ?>
<div class="product-reviews-summary<?= !$rating ? ' no-rating' : '' ?>" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <?php if ($rating):?>
    <div class="rating-summary">
         <span class="label"><span><?= $block->escapeHtml(__('Rating')) ?>:</span></span>
         <div class="rating-result" title="<?= $block->escapeHtmlAttr($rating); ?>%">
             <span style="width:<?= $block->escapeHtmlAttr($rating); ?>%">
         <div class="rating-count-avg">
             <span itemprop="ratingValue"><?= $block->escapeHtml($rating*10/100); ?></span>
             <span itemprop="bestRating"><?= __('out of 5');?></span>
    <?php endif;?>
    <div class="reviews-actions">
        <!-- <a class="action view"
           href="<?= $block->escapeUrl($url) ?>"> -->
            <span itemprop="reviewCount"><?= __('BASED ON ') ?><?= $block->escapeHtml($block->getReviewsCount()) ?></span>&nbsp;
            <span><?= ($block->getReviewsCount() == 1) ? $block->escapeHtml(__('REVIEW')) : $block->escapeHtml(__('REVIEWS')) ?></span>
        <!-- </a> -->
        <!-- <a class="action add" href="<?= $block->escapeUrl($urlForm) ?>"><?= $block->escapeHtml(__('Add Your Review')) ?></a> -->
<?php elseif ($block->isReviewEnabled() && $block->getDisplayIfEmpty()): ?>
<div class="product-reviews-summary empty">
    <div class="reviews-actions">
        <a class="action add" href="<?= $block->escapeUrl($urlForm) ?>">
            <?= $block->escapeHtml(__('Be the first to review this product')) ?>
<?php endif; ?>

Use below style to change the rating star design

.rating-summary .rating-result > span{
    float: right;

I hope you can manage with other designs, if not pls let me know

  • Fatal error: Uncaught Error: Call to undefined function _() in /var/www/html/app/design/frontend/Qqq/qqqqq/Magento_Review/templates/helper/summary.phtml:33 Oct 3, 2019 at 9:40
  • I missed '_'...Pls check updated ans Oct 3, 2019 at 9:41
  • I understand correctly, you duplicated the block with the stars, what would the first be gray? Oct 3, 2019 at 9:47
  • and there now the rating is working a little wrong:)) 8.7 out of 5 Oct 3, 2019 at 9:51
  • oh, I fixed it, divided it not by 10, but by 5 Oct 3, 2019 at 9:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.