你如何添加星级评定产品在woocommerce？(How do you add the star r

我有一个woocommerce店，我想星级评定添加到每个产品的，当你看到他们的缩略图。我已经在大的产品视图中的星星，但我希望他们能在大多数的电子商务商店像timberland.com显示每个缩略图下方等。我知道我可以使用CSS来禁止从视图中的项目，但不能添加。有什么想法吗？

Answer 1:

你可以把这个到您的主题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>';
    }

}

请注意，您可能需要更改woocommerce_after_shop_loop_item取决于你的设计，并在那里正是你要天上的星星，显示了不同的挂钩。

此页面列出WooCommerce行动挂钩： http://wcdocs.woothemes.com/codex/extending/hooks/ 。我没有看到缩略图明确相关的任何钩子，但是你可能尝试woocommerce_after_shop_loop_item_title或woocommerce_after_shop_loop_item 。

（此功能是基本上由WooCommerce的单品-reviews.php复制）

Answer 2:

实际上，有一个更简洁的方式来处理这个问题。只需使用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>';
}

我已经确认这对我的作品。

Answer 3:

有了这些功能（或一个较短的下方，其输出相同的HTML），你设法输出的数字评级，完全重用Woocommerce的功能：

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

然后，你需要它的样式来显示恒星。对于一个评价为3，满分5星，Woothemes确实像这样（诀窍是在宽度和：前相应的CSS的）：

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>

和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\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";
}

希望帮助！

Answer 4:

作为WooCommerce的3.0+这是正确的代码：

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

产品对象上的get_rating_html（）方法已被弃用。

这里更多信息： https://docs.woocommerce.com/wc-apidocs/function-wc_get_rating_html.html

文章来源: How do you add the star ratings for products in woocommerce?