wordpress 你如何在woocommerce中为产品添加星级？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14227121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you add the star ratings for products in woocommerce?
提问by kbsas14
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?
我有一个 woocommerce 商店，当您看到它们的缩略图时，我想为每个产品添加星级评分。我已经在大产品视图中添加了星星，但我希望它们像在大多数电子商务商店（如timberland.com）中一样显示在每个缩略图下方。我知道我可以使用 css 从视图中禁用项目，但不能添加它们。有什么想法吗？
回答by root
You can put this into your themes functions.php file:
你可以把它放到你的主题functions.php文件中：
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_itemto a different hook depending on your design and where exactly you want the stars to show up.
请注意，您可能需要woocommerce_after_shop_loop_item根据您的设计以及您希望星星出现的确切位置更改为不同的挂钩。
This page lists WooCommerceaction hooks: http://wcdocs.woothemes.com/codex/extending/hooks/. I don't see any hooks associated with the thumbnail specifically, but you may try woocommerce_after_shop_loop_item_titleor woocommerce_after_shop_loop_item.
此页面列出了WooCommerce操作挂钩：http: //wcdocs.woothemes.com/codex/extending/hooks/。我没有看到任何与缩略图相关的挂钩，但您可以尝试woocommerce_after_shop_loop_item_title或woocommerce_after_shop_loop_item。
(This function is essentially copied from WooCommerce's single-product-reviews.php)
（这个功能本质上是从WooCommerce的single-product-reviews.php复制过来的）
回答by Martyn Chamberlin
There's actually a much more terse way to handle this. Just use the built-in functions that Woocommerce has built out:
实际上有一种更简洁的方法来处理这个问题。只需使用 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>';
}
I've confirmed that this works for me.
我已经确认这对我有用。
回答by ryanka
As of WooCommerce 3.0+ this is the correct code:
从 WooCommerce 3.0+ 开始，这是正确的代码：
$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.
产品对象上的 get_rating_html() 方法已被弃用。
More information here: https://docs.woocommerce.com/wc-apidocs/function-wc_get_rating_html.html
更多信息在这里：https: //docs.woocommerce.com/wc-apidocs/function-wc_get_rating_html.html
回答by Jacobo Polavieja
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:
使用这些函数（或下面较短的函数，输出相同的 HTML），您可以设法以数字输出评级，完全重用 Woocommerce 的函数：
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):
然后你需要设计它以显示星星。对于 5 颗星中的 3 颗星，Woothemes 是这样做的（诀窍在于相应 CSS 的宽度和 :before）：
HTML (output by Woocommerce):
HTML（由 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):
和 CSS（这里可能有一些多余的行）：
#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;
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;
color: #f36557;
}
.star-rating {
line-height: 1em;
font-size: 1em;
font-family: "fontawesome";
}
Hope that helps!
希望有帮助！
