Display Star Ratings below Woocommerce product prices – Learn WordPress from a to z

Tutorials 0 lượt xem

How to display woocommerce star rating?

The biggest obstacle with online sales websites is building trust between customers and your sales website.

The habit of consumers buying goods on the internet today is to search for information and reviews about products before deciding to buy.

Good quality, trusted, and useful products resonate with the way customers perceive you and your business. That’s why reviews in your website are a part of helping your website attract customers and increase sales, etc.

Show star rating below product price

To add a star rating to show below the price on the archive page, simply add the following code to the functions.php file:

add_action(‘woocommerce_after_shop_loop_item_title’,’change_loop_ratings_location’, 2 );
function change_loop_ratings_location(){
    remove_action(‘woocommerce_after_shop_loop_item_title’,’woocommerce_template_loop_rating’, 5 );
    add_action(‘woocommerce_after_shop_loop_item_title’,’woocommerce_template_loop_rating’, 15 );
}

Show number of ratings

To get rating metrics, you use the code below.

add_filter( ‘woocommerce_product_get_rating_html’, ‘loop_product_get_rating_html’, 20, 3 );
function loop_product_get_rating_html( $html, $rating, $count ){
    if ( 0 < $rating && ! is_product() ) {
        global $product;
        $rating_cnt = array_sum($product->get_rating_counts());
        $count_html = ‘ <div class=”count-rating”>’ . $rating_cnt .'</div>’;
        $html = ‘<div class=”container-rating”><div class=”star-rating”>’;
        $html .= wc_get_star_rating_html( $rating, $count );
        $html .= ‘</div>’ . $count_html . ‘</div>’;
    }
    return $html;
}
When adding you will probably encounter some errors about the alignment that is of Css, here is the Css code to fix that:
.woocommerce .star-rating span{
  font-family: 'star';
}
.container-rating {
    display: flex;
    align-items: center;
 }<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>

Epilogue

Below I have shared how to display woocommerce star rating, if you find it interesting, don’t forget to leave a comment below.

If you find it interesting, you can follow the  wordpress tips section  to know more new knowledge.

Follow fanpage to receive the latest posts:  Group

Wish you have interesting and interesting knowledge about wordpress!

Bài viết liên quan