Show Ratings even if Product Hadn't Been Reviewed Yet

Also, I updated the code by swapping the title to show “Not Rated Yet” when a Review hasn’t been left yet on a Product. Again I would like to move this to my child theme functions.php but thats where I get lost a bit.

/**
	 * Returns the product rating in html format.
	 *
	 * @param string $rating (default: '')
	 *
	 * @return string
	 */
	public function get_rating_html( $rating = null ) {
		$rating_html = '';

		if ( ! is_numeric( $rating ) ) {
			$rating = $this->get_average_rating();
		}

		if ( $rating > 0 ) {
			$title = sprintf( __( 'Rated %s out of 5', 'woocommerce' ), $rating );
		} else {
			$title = 'Not yet rated';
		}

		if ( $rating > -1 ) {

			$rating_html  = '<div class="star-rating" title="' . $title . '">';

			$rating_html .= '<span style="width:' . ( ( $rating / 5 ) * 100 ) . '%"><strong class="rating">' . $rating . '</strong> ' . __( 'out of 5', 'woocommerce' ) . '</span>';

			$rating_html .= '</div>';
		}

		return apply_filters( 'woocommerce_product_get_rating_html', $rating_html, $rating );
	}

Thanks

You can use add_filter function. Add the code below to your function.php

add_filter('woocommerce_product_get_rating_html', 'your_get_rating_html', 10, 2);

function your_get_rating_html($rating_html, $rating) {
  if ( $rating > 0 ) {
    $title = sprintf( __( 'Rated %s out of 5', 'woocommerce' ), $rating );
  } else {
    $title = 'Not yet rated';
    $rating = 0;
  }

  $rating_html  = '<div class="star-rating" title="' . $title . '">';
  $rating_html .= '<span style="width:' . ( ( $rating / 5 ) * 100 ) . '%"><strong class="rating">' . $rating . '</strong> ' . __( 'out of 5', 'woocommerce' ) . '</span>';
  $rating_html .= '</div>';

  return $rating_html;
}

@sivinnguyen –

Worked like a charm! Thank you very much. Apparently I should read up on the add_filter function ??

@viablethought

You’re welcome ^^

Hi, it looks like the above code is very close to what I am looking for, but instead of displaying “Not yet rated” I would like to display five gray stars.

So all products would show the five grayed out stars when unrated then when a product gets rated the appropriate stars go in place of the grey stars. This keeps the look of the products on the category pages uniform. I am not sure how to replace “Not yet rated” with the image of five gray stars or star outlines. I can create the image though if needed.

Site is about to go live so any help would be greatly appreciated!

Could I just replace this line of code:

$title = ‘Not yet rated’;

With:

$title = ‘<img src=”‘.’/images/graystars.png”>’ . $title;

Would that work? I probably have a syntax error in there somewhere?

@johnston347

With the above code, it hooks into woocommerce’s rating system and shows “empty” stars when a product has not been reviewed yet:

Screenshot

The $title var acts just like the title attribute for an image or URI, refer to the screenshot.

Hi Viablethought, I just added the code to my website and it is perfect! This is exactly what I was looking for. Thank you so much for the quick response!!!

Thanks!!

What if I only want these grey stars to be shown on the single product page and not on the thumbnails?

@berry807 –

Since you only want to display it in some areas, you can just use CSS to hide the ratings wherever you want.

This is also dependent on your theme, but you could do something like this:

.woocommerce .products .product .star-rating { display: none; }

Just have to figure out what the class of the product thumbnail is and include that in the above code.

@viablethought

Thanks, that worked.
But the code that sivinnguyen posted doesn’t show the grey stars on the ‘single product page’ if there is no rating yet. It only shows the stars in the thumbnails.

So how do I get these grey stars to appear on the single product page if the product hasn’t been reviewed yet?