Return to previous page

Change star icon in product rating (edit)

This topic has 12 replies, 3 voices, and was last updated 2 years, 3 months ago ago by Olga Barlow

misha

Participant

May 16, 2022 at 08:38

Здраствуйте,

Подскажите, пожалуйста, как можно изменить иконку звезды в рейтинге продукта? https://prnt.sc/PPF-5lb98Gsd

С уважением,

#323968 Copied Theme version: 8.1.5

11 Answers

Rose Tyler

Support staff

May 16, 2022 at 10:08

Hello,

Describe the desired result in more detail, please.

Regards

#323974 Copied

misha

Participant

May 16, 2022 at 13:43

Здраствуйте,

Хотелось, сделать такие звезды https://prnt.sc/PsX95pvrXI7K

С уважением

#324001 Copied
Olga Barlow

Support staff

May 16, 2022 at 17:50
Hello,

Our icons use the xstore-icon font. If you want to use icon of any other font you can call the font using font-face https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp and then change the stars to what you need using below custom CSS
```
.star-rating span:before, .star-rating:before {
    font-family: xstore-icons; /* Replace by your font-family here */
    content: '\e930d \e930d \e930d \e930d \e930d'; /* Replace by your icon code here */
}
```
Regards
#324021 Copied
misha

Participant

May 17, 2022 at 15:48

Здраствуйте,

Спасибо за Ваш ответ! Я не совсем понял как это можно сделать.

С уважением,

Please contact administrator
for this information.

#324093 Copied

Olga Barlow

Support staff

May 18, 2022 at 16:37

Hello,

What font for the start do you plan to use? Provide us with a link to that font.

Regards

#324164 Copied

misha

Participant

May 18, 2022 at 17:51

Здраствуйте,

Спасибо за Ваш ответ!
Я не совсем понимаю как это делать. Я хотел бы поменять вид “звезды” (если это возможно), на похожую https://prnt.sc/PsX95pvrXI7K (с более острыми углами). Я посмотрел в интернете, возможно тут https://fontawesome.com/icons/star-sharp?s=solid или тут https://fontello.com/

Ну я не хотел бы из-за этого жертвовать скоростью сайта или безопасностью, если замена звезды будет на это влиять.
Спасибо.

С уважением,

#324170 Copied
Olga Barlow

Support staff

May 20, 2022 at 10:40
Hello,

Add the below code to your Theme Options > Custom CSS to replace existing icons with the FontAwesome icons for example
```
.star-rating span:before, .star-rating:before {
    content: '\f005 \f005 \f005 \f005 \f005';
    font-family: "Font Awesome 5 Free";
}
```
Or I have uploaded Iconic font to XStore > Custom font. And you can use below code to show the iconic icon
```
.star-rating span:before, .star-rating:before {
    content: '\e800 \e800 \e800 \e800 \e800';
    font-family: "fontello";
    font-size: 1.2rem;
}
```
Regards
#324276 Copied
misha

Participant

May 20, 2022 at 17:27

Здраствуйте,

Спасибо за Ваш ответ! Все получилось. Почему-то только звезды заходят на текст https://prnt.sc/MPT2UnMzvU7w и в разделе добавить отзыв, звезда не поменялась https://prnt.sc/fcOvKZxygbIK

И подскажите, пожалуйста, как можно увеличить размер и убрать надпись – “отзыва клиента” (зачеркнуто на скриншоте), оставить только количество.

С уважением,

#324317 Copied
Rose Tyler

Support staff

May 22, 2022 at 09:58
Hello,

Add the next code also:
```
.single-product .woocommerce-review-link {
    display:none;
}
.single-product .commentlist .star-rating {
    margin-right: 10px;
}
```
```
#review_form .stars .star-1:before {
    content: '\e800';
    font-family: "fontello";
    font-size: 1.2rem;
}
#review_form .stars .star-2:before {
    content: '\e800 \e800' !important;
    font-family: "fontello";
    font-size: 1.2rem;
}
#review_form .stars .star-3:before {
    content: '\e800 \e800 \e800' !important;
    font-family: "fontello";
    font-size: 1.2rem;
}
#review_form .stars .star-4:before {
    content: '\e800 \e800 \e800 \e800' !important;
    font-family: "fontello";
    font-size: 1.2rem;
}
#review_form .stars .star-5:before {
    content: '\e800 \e800 \e800 \e800 \e800' !important;
    font-family: "fontello";
    font-size: 1.2rem;
}
```
Regards
#324385 Copied
misha

Participant

May 22, 2022 at 18:34
Здраствуйте,

Спасибо за Ваш ответ! Ваше решение помогло.
Подскажите, как можно не полностью убрать, а оставить только цифры отзывов (как в фильтрах) https://prnt.sc/ixGJkttTTd6V вместо как сейчас https://prnt.sc/t6J8kRNQwcxe.

Также, этот код:
```
.single-product .commentlist .star-rating {
    margin-right: 10px;
}
```
мне не помог, я поменял его на этот:
```
.star-rating {
     width: auto;
}
```
Это правильно?

С уважением
#324393 Copied
Olga Barlow

Support staff

May 23, 2022 at 14:33
Hello,

Yes, your code is also ok.
Add the below code to change the single product review appearance
```
.woocommerce-product-rating a.woocommerce-review-link {font-size: 0;}
.woocommerce-product-rating a.woocommerce-review-link .count {font-size: 14px;}
.woocommerce-product-rating a.woocommerce-review-link .count:before {content: '(';}
.woocommerce-product-rating a.woocommerce-review-link .count:after {content: ')';}
```
Regards
#324416 Copied
Tagged: change, edit, icon, rating, star, themes, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)