[Resolved] Rating count next to star reviews on product archives

Home Forums Support [Resolved] Rating count next to star reviews on product archives

Home Forums Support Rating count next to star reviews on product archives

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2186636
    Georgi

    Hello,

    Since I migrated to GP I noticed that now the rating count for products in archive pages isn’t aligned next to the star reviews but it’s below them: https://prnt.sc/fMD2EWot4x8n

    I tried different kinds of CSS solutions on the web but none worked with GP :/

    Can you help?

    Kind regards!

    #2186657
    Ying
    Staff
    Customer Support

    Hi Georgi,

    GP doesn’t have the review number added by default, how did you add it?

    Based on the current html structure, there isn’t a good way to position the number and stars.

    #2186702
    Georgi

    Hi Ying,

    I’m using the following php code:

    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }
    
    global $product;
    
    if ( get_option( 'woocommerce_enable_review_rating' ) === 'no' ) {
        return;
    }
    
    $rating_count = $product->get_rating_count();
    $review_count = $product->get_review_count();
    $average      = $product->get_average_rating();
    
    if ( $rating_count >= 0 ) : ?>
    
                <?php echo wc_get_rating_html($average, $rating_count); ?>
            <?php if ( comments_open() ): ?><a href="<?php echo get_permalink() ?>#reviews" class="woocommerce-review-link" rel="nofollow">(<?php printf( _n( '%s',$review_count,'woocommerce' ), '<span class="count">' . esc_html( $review_count ) . '</span>' ); ?>)</a><?php endif ?>
       
    
    <?php endif; ?>

    Nothing can be done :/ ?

    #2186724
    Ying
    Staff
    Customer Support

    How did you add the code?

    #2186754
    Georgi

    Created a rating.php file with the code and added it to /public_html/wp-content/themes/YOUR-THEME/woocommerce/loop

    #2186877
    Ying
    Staff
    Customer Support

    Do you mean you edited GP’s theme file?

    If so, it’s not a good idea, the change will lose when you update GP.

    And I don’t recall there’s a Woocommerce folder under GP’s theme folder, are you sure?

    I would recommend do this:

    1. Go to appearance > elements, create a Hook element, add this code and check the Execute PHP box.

    <?php global $product;
    
    if ( get_option( 'woocommerce_enable_review_rating' ) === 'no' ) {
        return;
    }
    
    $rating_count = $product->get_rating_count();
    $review_count = $product->get_review_count();
    $average      = $product->get_average_rating();
    
    if ( $rating_count >= 0 ) : ?>
    
                <?php echo '<div class="raiting-and-review-count">'.wc_get_rating_html($average, $rating_count); ?>
            <?php if ( comments_open() ): ?><a href="<?php echo get_permalink() ?>#reviews" class="woocommerce-review-link" rel="nofollow">(<?php printf( _n( '%s',$review_count,'woocommerce' ), '<span class="count">' . esc_html( $review_count ) . '</span>' ); ?>)</a></div><?php endif ?>
       
    
    <?php endif; ?>

    2. Select woocommerce_after_shop_loop_item_title as the hook, set product archive as location.

    3. Add this CSS to align the star and the number:

    .raiting-and-review-count {
        display: flex;
        justify-content: center;
    }
    #2187893
    Georgi

    Hello,

    Thanks for the suggestion.

    I tried it but it put the stars under the price https://prnt.sc/0SxX16tXaXr8
    The CSS does a great job at aligning the number to the stars, but the problem is the location of the stars now πŸ˜€

    #2187927
    Ying
    Staff
    Customer Support

    but the problem is the location of the stars now

    Try set the element’s priority to 2 instead of10.

    Let me know πŸ™‚

    #2187930
    Georgi

    Yay, it moved it πŸ™‚

    But it’s a little too close to the title, can there be a little space between the stars and the title like there is between the price? https://prnt.sc/hRZ-cdRFLXTQ

    #2187941
    Ying
    Staff
    Customer Support

    Add one line to the CSS:

    .raiting-and-review-count {
        display: flex;
        justify-content: center;
        padding-top:15px;
    }
    #2187974
    Georgi

    Awesome! Thank you, Ying!

    #2187979
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

    #2192977
    Georgi

    Hello,

    Sorry to bother, I thought everything was working but just now I noticed that I get ratings score even for products without reviews – https://prnt.sc/lPjwORwFY-qA

    Any idea how to hide them?

    #2192986
    Fernando
    Customer Support

    Hi Georgi,

    Can you kindly modify the code provided by Ying in step 1 above to this:

    <?php global $product;
    
    if ( get_option( 'woocommerce_enable_review_rating' ) === 'no' ) {
        return;
    }
    
    $rating_count = $product->get_rating_count();
    $review_count = $product->get_review_count();
    $average      = $product->get_average_rating();
    
    if ( $rating_count > 0 ) : ?>
    
                <?php echo '<div class="raiting-and-review-count">'.wc_get_rating_html($average, $rating_count); ?>
            <?php if ( comments_open() ): ?><a href="<?php echo get_permalink() ?>#reviews" class="woocommerce-review-link" rel="nofollow">(<?php printf( _n( '%s',$review_count,'woocommerce' ), '<span class="count">' . esc_html( $review_count ) . '</span>' ); ?>)</a></div><?php endif ?>
       
    
    <?php endif; ?>

    Kindly let us know how it goes. πŸ™‚

    #2193792
    Georgi

    Worked like a charm, thanks Fernando! πŸ™‚

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.