This topic has 12 replies, 3 voices, and was last updated 2 years, 7 months ago ago by Olga Barlow
Здраствуйте,
Подскажите, пожалуйста, как можно изменить иконку звезды в рейтинге продукта? https://prnt.sc/PPF-5lb98Gsd
С уважением,
Hello,
Describe the desired result in more detail, please.
Regards
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
Здраствуйте,
Спасибо за Ваш ответ! Я не совсем понял как это можно сделать.
С уважением,
Hello,
What font for the start do you plan to use? Provide us with a link to that font.
Regards
Здраствуйте,
Спасибо за Ваш ответ!
Я не совсем понимаю как это делать. Я хотел бы поменять вид “звезды” (если это возможно), на похожую https://prnt.sc/PsX95pvrXI7K (с более острыми углами). Я посмотрел в интернете, возможно тут https://fontawesome.com/icons/star-sharp?s=solid или тут https://fontello.com/
Ну я не хотел бы из-за этого жертвовать скоростью сайта или безопасностью, если замена звезды будет на это влиять.
Спасибо.
С уважением,
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
Здраствуйте,
Спасибо за Ваш ответ! Все получилось. Почему-то только звезды заходят на текст https://prnt.sc/MPT2UnMzvU7w и в разделе добавить отзыв, звезда не поменялась https://prnt.sc/fcOvKZxygbIK
И подскажите, пожалуйста, как можно увеличить размер и убрать надпись – “отзыва клиента” (зачеркнуто на скриншоте), оставить только количество.
С уважением,
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
Здраствуйте,
Спасибо за Ваш ответ! Ваше решение помогло.
Подскажите, как можно не полностью убрать, а оставить только цифры отзывов (как в фильтрах) https://prnt.sc/ixGJkttTTd6V вместо как сейчас https://prnt.sc/t6J8kRNQwcxe.
Также, этот код:
.single-product .commentlist .star-rating {
margin-right: 10px;
}
мне не помог, я поменял его на этот:
.star-rating {
width: auto;
}
Это правильно?
С уважением
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
You must be logged in to reply to this topic.Log in/Sign up