How do you add the star ratings for products in woocommerce?

I have a woocommerce store and I want to add star ratings to each of the products when you see their thumbnails. I already have the stars in the big product view but I want them to display below each thumbnail like in most ecommerce stores like timberland.com. I know i can use css to disable items from view but not add them. Any thoughts?

There's actually a much more terse way to handle this. Just use the built-in functions that Woocommerce has built out:

add_action('woocommerce_after_shop_loop_item', 'get_star_rating' );
function get_star_rating()
{
global $woocommerce, $product;
$average = $product->get_average_rating();

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

I've confirmed that this works for me.

With those functions (or the shorter one below, which outputs the same HTML), you manage to output the rating in numbers, reusing Woocommerce's functions completely:

function get_star_rating() {
global $woocommerce, $product;
/*$average = $product->get_average_rating();*/
echo $product->get_rating_html();
}

Then you need to style it to show the stars. For a rating of 3 out of 5 stars, Woothemes does it like this (the trick is in the width and :before of the corresponding CSS):

HTML (output by Woocommerce):

<div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating" class="star-rating" title="Rated 3 out of 5">
<span style="width:60%"><strong itemprop="ratingValue">3</strong> out of 5</span>
</div>

And the CSS (there may be some redundant lines in here):

#reviews .comment .star-rating {
float: none;
font-size: 1em;
margin: 0;
position: absolute;
top: 2px;
right: 20px;
}
.star-rating {
overflow: hidden;
height: 1em;
line-height: 1em;
width: 5.1em;
font-family: "fontawesome";
}

.star-rating:before {
content: "\f006\f006\f006\f006\f006";
float: left;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.1em;
letter-spacing: 0\9;
color: #fbfeff;
}

.star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}

.star-rating span:before {
content: "\f005\f005\f005\f005\f005";
top: 0;
position: absolute;
left: 0;
letter-spacing: 0.1em;
letter-spacing: 0\9;
color: #f36557;
}

.star-rating {
line-height: 1em;
font-size: 1em;
font-family: "fontawesome";
}


Hope that helps!

As of WooCommerce 3.0+ this is the correct code:

$product = wc_get_product( $id );
echo wc_get_rating_html( $product->get_average_rating() );

The get_rating_html() method on the product object has been deprecated.


More information here:

[To see links please register here]

You can put this into your themes functions.php file:

add_action('woocommerce_after_shop_loop_item', 'my_print_stars' );


function my_print_stars(){
global $wpdb;
global $post;
$count = $wpdb->get_var("
SELECT COUNT(meta_value) FROM $wpdb->commentmeta
LEFT JOIN $wpdb->comments ON $wpdb->commentmeta.comment_id = $wpdb->comments.comment_ID
WHERE meta_key = 'rating'
AND comment_post_ID = $post->ID
AND comment_approved = '1'
AND meta_value > 0
");

$rating = $wpdb->get_var("
SELECT SUM(meta_value) FROM $wpdb->commentmeta
LEFT JOIN $wpdb->comments ON $wpdb->commentmeta.comment_id = $wpdb->comments.comment_ID
WHERE meta_key = 'rating'
AND comment_post_ID = $post->ID
AND comment_approved = '1'
");

if ( $count > 0 ) {

$average = number_format($rating / $count, 2);

echo '<div class="starwrapper" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">';

echo '<span class="star-rating" title="'.sprintf(__('Rated %s out of 5', 'woocommerce'), $average).'"><span style="width:'.($average*16).'px"><span itemprop="ratingValue" class="rating">'.$average.'</span> </span></span>';

echo '</div>';
}

}



Note that you may need to change `woocommerce_after_shop_loop_item` to a different hook depending on your design and where exactly you want the stars to show up.

This page lists **WooCommerce** action hooks:

[To see links please register here]

. I don't see any hooks associated with the thumbnail specifically, but you may try `woocommerce_after_shop_loop_item_title` or `woocommerce_after_shop_loop_item`.

(This function is essentially copied from WooCommerce's single-product-reviews.php)