css 将星级评定添加到Woocommerce中的各个产品

Posted 2021-05-13

<?php 
/*-----Source: http://stackoverflow.com/questions/14227121/how-do-you-add-the-star-ratings-for-products-in-woocommerce---*/

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>';
}

?>

/** Source http://www.pootlepress.com/2014/04/100-woocommerce-tips-tricks/
Change the Woocommerce star ratings to show stars rather than theme ratings

**/


.star-rating{float:right;width:80px;height:16px;background:url(images/star.png) repeat-x left 0} 
.star-rating span{background:url(images/star.png) repeat-x left -32px;height:0;padding-top:16px;overflow:hidden;float:left} 
.hreview-aggregate .star-rating{margin:10px 0 0 0} 
#review_form #respond{position:static;margin:0;width:auto;padding:0 0 0;background:transparent none;border:0} 
#review_form #respond:after{content:"";display:block;clear:both} 
#review_form #respond p{margin:0 0 10px} 
#review_form #respond .form-submit input{left:auto} 
#review_form #respond textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%} 
p.stars:after{content:"";display:block;clear:both} 
p.stars span{width:80px;height:16px;position:relative;float:left;background:url(images/star.png) repeat-x left 0} 
p.stars span a{float:left;position:absolute;left:0;top:0;width:16px;height:0;padding-top:16px;overflow:hidden} 
p.stars span a:hover,p.stars span a:focus{background:url(images/star.png) repeat-x left -16px} 
p.stars span a.active{background:url(images/star.png) repeat-x left -32px} 
p.stars span a.star-1{width:16px;z-index:10} 
p.stars span a.star-2{width:32px;z-index:9} 
p.stars span a.star-3{width:48px;z-index:8} 
p.stars span a.star-4{width:64px;z-index:7} 
p.stars span a.star-5{width:80px;z-index:6}