Return to previous page

Problem with how the star rating looks on product archive

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

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.

#367159 Copied Theme version: 9.1.11 WooCommerce version: Latest

6 Answers

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

#367189 Copied

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

#367193 Copied

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

#367195 Copied
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; ?>
```
#367319 Copied
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
#367356 Copied
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.

#367495 Copied
Tagged: product archive problem, rating display troubleshoot, star rating issue, woocommerce star rating, wordpress product rating, wordpress woocommerce themes
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

Problem with how the star rating looks on product archive

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection