I have an issue with product reviews summary bars WooCommerce

I want to create a product review summary just like this:

And this is my try, it works like I want but the problem is not working for each product, it gives a summary of all products 🙁 And I think my way is not professional as well!

My code:

// Get stars count for each start by meta value
function get_review_star_count( $meta_value ) { 
    return get_comments(array(
        'post_id' => $product_id,
        'status'   => 'approve',
        'post_status' => 'publish',
        'post_type'   => 'product',
        'meta_key' => 'rating',
        'meta_value' => $meta_value,
        'count' => true
    ));
}

// Get total stars for average purpose
function get_total_review_star_count() { 
    return get_comments(array(
        'post_id' => $post->ID,
        'status'   => 'approve',
        'post_status' => 'publish',
        'post_type'   => 'product',
        'meta_key' => 'rating',
        'count' => true
    ));
}

// Loop
<div class="reviews_bar uk-margin-medium">

    <h5>Review summary: </h5>
    <?php for ($i = 5; $i >= 1; $i--) : ?>
        <?php $perc = (get_total_review_star_count() == '0') ? 0 : floor(get_review_star_count($i) / get_total_review_star_count() * 100); ?>
        <div class="bars">
            <div class="star_num" data-uk-leader=""><?php printf(_n('%s star', '%s stars', $i, 'text-domain'), $i); ?></div>
            <div class="star_perc" style="width: <?php $perc. '%' ?>"><?php echo get_review_star_count($i) . ' / ' . $perc . '%' ?></div>
        </div>
    <?php endfor; ?>

</div>

I just need it to work for each product, not for all products, please any help?

Answer

I have found a solution myself and may help you too :), by the way, I’ve created a new function on functions.php

function custom_woo_reviews_summary($id) {
    $get_rating_count = get_post_meta( $id, '_wc_rating_count', true );
    $get_review_count   = get_post_meta( $id, '_wc_review_count', true );
    $get_rating_text = array(
        '5' => 'Perfect',
        '4' => 'Good',
        '3' => 'Average',
        '2' => 'Not that bad',
        '1' => 'Very poor',
    ); ?>
    <div class="product-summary">
        <?php
        for ( $i = 5; $i > 0 ; $i-- ) {
            if ( !isset( $get_rating_count[$i] ) ) {
                $get_rating_count[$i] = 0;
            }
            $percentage = 0 ;
            if ( $get_rating_count[$i] > 0 ) {
                $percentage = round( ( $get_rating_count[$i] / $get_review_count ) * 100 );
            }
            ?>
            <div class="uk-flex uk-flex-between uk-flex-middle">
                <div class="rating-stars">
                    <div class="stars" title="<?php echo $get_rating_text[$i]; ?>"><?php echo wc_get_rating_html( $i ); ?></div>
                </div>
                <div class="rating-count">
                    <div class="count"><?php echo '(' . $get_rating_count[$i] . ')' ?></div>
                </div>
                <div class="rating-graph" title="<?php printf( '%s%%', $percentage ); ?>">
                    <div class="percentage" style="width: <?php echo $percentage; ?>%" class="bar"></div>
                </div>
            </div> <?php
        } ?>
    </div> <?php
}

To retrieve the output you just need to add this code inside the single-product-reviews.php you can find it on WooCommerce templates and then add this code to the place you want to display a Reviews Summary Bars.

<?php echo custom_woo_reviews_summary($product_id); ?>

And I have create a variable for product ID just like this:

$product_id = $product->get_id();

The result is just like this, but you will need to customize it as you want using CSS!

I hope that helps you 🙂