Change Product Review star color in Product Grid, Featured Collection

[lowowl]

I have already managed to edit the color of product rating stars in the main product page, but unable to change the color in Collections. The theme I’m using is Crave (i believe is Online Store 2.0).

Can anyone help me change the color to yellow in Collection?

[suyash1]

@lowowl - can you please share this page link?

[Denishamakwana]

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

[lowowl]

https://www.plantcultureph.com/products/osmocote-controlled-release-fertilizer-14-14-14-40g?keyword=osmocote

[lowowl]

https://www.plantcultureph.com/products/osmocote-controlled-release-fertilizer-14-14-14-40g?keyword=osmocote

https://www.plantcultureph.com/collections/fertilizers

[suyash1]

@lowowl - please add this css to the very end of your component-rating.css file and check, should look like screenshot below

.rating-star:before {
    -webkit-text-fill-color: rgb(255, 164, 28);}

[lowowl]

Awesome, that worked. But now there’s a 5.0/5.0 text that popped up. How can i remove this?

[Denishamakwana]

Please add below css code in bottom of assets/component-rating.css file

.rating-star::before {
background: #FFA41C;

}

Thank you.

[suyash1]

@lowowl - not able to see that text 5.0/5.0

did you remove it?

[lowowl]

Can you refresh now, was trying a different code.

[suyash1]

@lowowl - try this css, same file as before

p.rating-text.caption {display: none;}

[lowowl]

Works!

But now the rating count is dropped one line

[suyash1]

@lowowl - please try this

p.rating-count.caption {display: inline-block;}

[lowowl]

Implemented, problem persists

[suyash1]

@lowowl - where did you add it? can not see it in code file

[lowowl]

.rating {
  display: inline-block;
  margin: 0;
}

.product .rating-star {
  --letter-spacing: 0.8;
  --font-size: 1.7;
}

.card-wrapper .rating-star {
  --letter-spacing: 0.7;
  --font-size: 1.4;
}

.rating-star {
  --percent: calc(
    (
        var(--rating) / var(--rating-max) + var(--rating-decimal) *
          var(--font-size) /
          (var(--rating-max) * (var(--letter-spacing) + var(--font-size)))
      ) * 100%
  );
  letter-spacing: calc(var(--letter-spacing) * 1rem);
  font-size: calc(var(--font-size) * 1rem);
  line-height: 1;
  display: inline-block;
  font-family: Times;
  margin: 0;
} 

.rating-star::before {
  content: '★★★★★';
  background: linear-gradient(
    90deg,
    var(--color-icon) var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(255, 164, 28);}
}
.rating-count.caption {display: inline-block;}   
}
.rating-text {
  display: none;
}

.rating-text.caption {display: none;}
}
@media (forced-colors: active) {
  .rating {
    display: none;
  }

  .rating-text {
    display: block;
  }
}

Here’s the entire file

[suyash1]

@lowowl - this code, it has 2 end brackets “}”, remove one of them and everything will work fine.

.rating-star::before {
  content: '★★★★★';
  background: linear-gradient(
    90deg,
    var(--color-icon) var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(255, 164, 28);}
}

[lowowl]

Hi, would like to ask for help again. I want to remove the stars if there are 0 reviews available for the product. What can I do?

[suyash1]

@lowowl - there is no unique class or id to this image, if we add any css to hide it, then it will hide existing reviews too

[vibrantbodymind]

Worked like magic on my website: vibrantbodymind.co.uk - also love the muted golden color. Thank you!