우커머스 리뷰 별점 sssss로 나오는 오류 잡기 (woocommerce)

 

상품페이지 마다 고객들이 남기는 리뷰가 있는데 별점으로 표시된다.
상품 섬네일과 간단 설명이 있는 부분과,  아래 상품평 탭에 있다. 다음과 같이 정상적으로 나와야하는데, 

가끔 보면 나처럼 나오는 경우가 있나보다.

1) 별모양이 'sssss'로 나오는 경우!

 

서치 결과 다음과 같이 해결 할 수 있다.

추가 css에 다음과 같이 작성하면 별 모양이 나온다.

@font-face {
    font-family: 'star';
    src: url('fonts/star.eot');
    src: url('fonts/star.eot?#iefix') format('embedded-opentype'),
        url('fonts/star.woff') format('woff'),
        url('fonts/star.ttf') format('truetype'),
        url('fonts/star.svg#star') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*별점*/
.star-rating span { font-family: star !important; }

 

이렇게만 했을 때, 대부분은 잘 나오는 것 같지만  나는 또 다른 문제가 있었다.

 

 

 

2) 별점 뒤에 ssss가 같이 나오는 경우!

처음에는 php를 건드려야하나 아주 고민이 많았는데 아주 간단하게 css만 만지면 되는거였다.
다음처럼 추가로 css를 작성해주면 된다. 위 코드는 상품 섬네일 쪽, 아래 코드는 상품 리뷰 탭 쪽 별점이다.

/*별점뒤텍스트삭제*/
.woocommerce .woocommerce-product-rating .star-rating:before { display: none; }
.woocommerce .star-rating::before{ display:none;}

(처음에 위만 적용하니 아래가 적용이 되지 않아서, 아래 코드는 내가 찾아서 입력한건데 이 부분이 정확히 맞는지 모르겠다; 다행히 다른 부분에 영향을 미치진 않는것 같다.) 

 

 

 

+) 추가

리뷰 별점 색상을 변경하고 싶을 때

/*별점 색상 변경*/
.star-rating span:before, .star-rating::before,
p.stars a:hover:after, p.stars a:after {
    color: #feec24!important;
    letter-spacing: 1px; 
}

 

 

---

아 오늘도 하나 해결했다..! 
퇴근하고 싶다 퇴근~ ლ(´ڡ`ლ)