Problem with how the star rating looks on product archive

This topic has 7 replies, 2 voices, and was last updated 1 years, 2 months ago ago by IP

  • Avatar: Lovelyfashioncompany
    IP
    Participant
    September 11, 2023 at 04:09

    Hello
    On product archive/shop page, the product stars/reviews looks like this (https://prnt.sc/_B0XSpd5iCnO) the problem is not the colour of the stars, the problem is the grey stars in the background

    I am using this demo (https://xstore.8theme.com/elementor2/sport/shop/)
    As you can see in the demo the stars are plain black, there is no problem of the grey stars in the background

    Also, on Single Product page (link in PV) the stars in the reviews section looks normal (and how I would like it) – https://prnt.sc/NuQp-mZLOWRh

    Please note: I know there is a grey background, what I mean is the actual grey stars behind the yellow stars

    Thanks

    Please, contact administrator
    for this information.
    6 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    September 11, 2023 at 10:01

    Hello, @IP,

    We have identified the problem you are experiencing with your site. It appears to be due to the Custom CSS that you have implemented. We kindly ask you to refer to the following screenshot for more details: https://postimg.cc/233xYs0f

    We recommend locating and removing the padding from this CSS, which should rectify the issue. You should be able to find the CSS under the following path: Xstore >> Theme Options >> Theme Custom CSS >> Global CSS.

    Best Regards,
    8Theme’s Team

    Avatar: Lovelyfashioncompany
    IP
    Participant
    September 11, 2023 at 11:22

    Hello, thanks for your response

    This has worked perfectly, can’t believe I didn’t see that. Thanks

    I would also like to know if something like this is possible? https://prnt.sc/AOqW2VP1xQmD
    Where it shows the numbers of reviews in the brackets?

    Thanks

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    September 11, 2023 at 11:45

    Hello, @IP,

    Thank you for your response.

    Please check this topic – https://www.8theme.com/topic/reviews-number-next-to-stars-on-every-product-shop-page/

    Additionally, We regret to inform you that it is not possible to achieve your desired outcome with the current version of the theme. Item support does not include services to modify or extend the item beyond the original features, style, and functionality described on the item page.

    If you would like to pursue paid customization services, we recommend submitting a customization request to the Codeable team via their website: https://www.codeable.io/?ref=qGTdX

    Alternatively, you can post your request on our Taskboard at https://www.8theme.com/taskboard/. If it receives enough votes from other customers, our development team will consider adding it in one of the upcoming updates.

    Best Regards,
    8Theme’s Team

    Avatar: Lovelyfashioncompany
    IP
    Participant
    September 12, 2023 at 16:44

    Hello, thank you for your response. This has actually worked and was extremely easy. https://prnt.sc/cElfUNW9eDwd

    I would like to know if there is away to put the star rating and number count together? so they are side by side? like this https://prnt.sc/AOqW2VP1xQmD

    Thanks

    *For anyone reading this who also wants review count like this https://prnt.sc/cElfUNW9eDwd simply locate your hosting files/dreictory and locate public_html > wp-content > themes > x-store > woocommerce > loop

    make a new file in the loop folder and name it rating.php
    then copy the code from https://stackoverflow.com/questions/46383613/display-woocommerce-review-count-next-to-star-rating (the code is also below)

    and paste it in that file then save

    Please Backup before doing any of this (I recommend All-in-one WP migration)

    CODE:

    <?php
    /**
     * Loop Rating
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/loop/rating.php.
     *
     * HOWEVER, on occasion WooCommerce will need to update template files and you
     * (the theme developer) will need to copy the new files to your theme to
     * maintain compatibility. We try to do this as little as possible, but it does
     * happen. When this occurs the version of the template file will be bumped and
     * the readme will list any important changes.
     *
     * @see         https://docs.woocommerce.com/document/template-structure/
     * @author      WooThemes
     * @package     WooCommerce/Templates
     * @version     3.0.0
     */
    
    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; ?>
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    September 13, 2023 at 06:38

    Hello, @IP,

    To consolidate the star rating and number count, kindly follow the instructions below:

    1. Copy the CSS code provided below:

    .content-product .star-rating {
        display: inline-block !important;
    }

    2. Navigate to Xstore >> Theme Options >> Theme Custom CSS >> Global CSS on your site.

    3. Paste the copied CSS code into the Global CSS section.

    4. Clear your browser cache and revisit your site to see the changes.

    It should resolve your issue.

    And we are glad to hear the custom code worked for you and that you found it easy to implement. Your instructions are clear and helpful for anyone looking to achieve the same result. It’s always a good practice to recommend making backups before making changes to website files. Thank you for sharing the code and providing a link to the source for reference.

    Should you have any further queries or require additional assistance, please do not hesitate to contact us.

    Best Regards,
    8Theme’s Team

    Avatar: Lovelyfashioncompany
    IP
    Participant
    September 14, 2023 at 14:43

    Hello Tony, thanks for your response. This has worked perfectly!
    Best support for the best theme.
    Have a nice day, thanks.

  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Problem with how the star rating looks on product archive’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.