How To Show Text After Star Rating Summary?

Elements with a screen-reader-text class are meant to be visually hidden. They exist for screen readers which are used by people who are visually impaired.

The CSS that Site Reviews uses to visually hide this is:

.glsr-summary-wrap .screen-reader-text,
.glsr-reviews-wrap .screen-reader-text {
  position: absolute;
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
  padding: 0;
  margin: -1px;
}

If you are trying to display the screen reader text in the star rating, you can also use a custom rating/stars.php template in a child theme. Please see the Site Reviews > Help > FAQ page for help with using custom templates.

Thanks for the swift reply! I spotted that extract from your CSS file, but if I remove or amend this info, nothing happens. Perhaps I will need to create a custom rating/stars.php as you suggest. Thanks!

*Ignore this ?? I made a silly mistake and replaced reviews.php with review.php

• This reply was modified 4 years, 1 month ago by King Ding.

How is it possible to change the content of the screen-reader-text? I know that I’m able to do this with translations, but I would actually like to change the number to remove the decimal within review summaries.

I have set the screen-reader-text to show “n.n rating” (%s rating), but how do I change the value of %s to exclude the decimal?

If it’s possible for you to point me in the right direction that would be great, thanks!

The rating/stars.php template is used for each review and for the summary. This is why the rating has a decimal point as the summary displays the average rating which may have a decimal point.

After seeing this: https://imgur.com/QTFE8P9 I understand now what you are trying to do.

You can accomplish this in a different way using a custom review.php template which has access to the current $review PHP object. In other words, you can do this:

<div class="glsr-review">
    {{ title }}
    {{ rating }} <?= $review->rating; ?>/5
    {{ date }}
    {{ assigned_to }}
    {{ content }}
    {{ avatar }}
    {{ author }}
    {{ response }}
</div>

By the way, if you are using custom templates, you may wish to use the development version of Site Reviews v5.0 as some of the templates have been updated (v4.0 templates will still work of course).

You can download it here: https://github.com/pryley/site-reviews/archive/develop.zip

Excellent, <?= $review->rating; ?>/5 seems to do the trick! However, it’ll only work in review.php? I’d like to include it in stars.php so that it is inside .glsr-review-rating, otherwise it comes after .glsr-review-rating and is therefore within .glsr-review-box .glsr-review. Consequently, it’s not in ideal circumstances to inline the stars and the text.

Thanks for the development link, I’ll check it out ??

• This reply was modified 4 years, 1 month ago by King Ding.
• This reply was modified 4 years, 1 month ago by King Ding.

V5.0 is officially released so you should update to that instead of using the development version.

I’ve enclosed what I want within .stars, and also done a similar thing with .author. This will allow me to easily inline the enclosed elements. I feel like it creates unnecessary depth to the DOM, but it does work. If you do have a better suggestion then let me know:

review.php

<?php defined('WPINC') || die; ?>
<div class="glsr-review-box">
<div class="glsr-review">
    {{ title }}
    {{ content }}
   <div class="stars"> 
     {{ rating }} 
     <div class= "reviews-number-review">
       <?= $review->rating; ?>/5
     </div>
  </div>
  <div class="author">
    {{ avatar }}
    {{ author }}
  </div>
    {{ response }}
    {{ assigned_to }}
    {{ date }}
</div>
</div>

I’ll be sure to update!

You could also do this:

add_filter('site-reviews/review/value/rating', function ($value, $tag) {
    return sprintf('%s<div class="reviews-number-review">%s/5</div>', $value, $tag->review->rating);
}, 10, 2);

For a complete list of hooks, see: https://github.com/pryley/site-reviews/blob/master/HOOKS.md

Good suggestion, thanks. This plugin is packed with customisation potential and features. I’ll be sure to leave a great review. Thanks!