Change star icon in product rating (edit)

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

  • Avatar: misha
    misha
    Participant
    May 16, 2022 at 08:38

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

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

    С уважением,

    11 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 16, 2022 at 10:08

    Hello,

    Describe the desired result in more detail, please.

    Regards

    Avatar: misha
    misha
    Participant
    May 16, 2022 at 13:43

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

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

    С уважением

    Avatar: Olga Barlow
    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

    Avatar: misha
    misha
    Participant
    May 17, 2022 at 15:48

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

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

    С уважением,

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    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

    Avatar: misha
    misha
    Participant
    May 18, 2022 at 17:51

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

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

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

    С уважением,

    Avatar: Olga Barlow
    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

    Avatar: misha
    misha
    Participant
    May 20, 2022 at 17:27

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

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

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

    С уважением,

    Avatar: Rose Tyler
    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

    Avatar: misha
    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;
    }

    Это правильно?

    С уважением

    Avatar: Olga Barlow
    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

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.