Return to previous page

Rating - by mtc - on WordPress WooCommerce support

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

mtc

Participant

August 14, 2018 at 18:32

Hi,

on item rating there are 5 star options, I want to have only one option with 5 stars and guest can select there. How to configure it?

Regards,

#198078 Copied

1 Answer

Olga Barlow

Support staff

August 15, 2018 at 15:31

Hello,

We have added the code below in the Custom CSS. Is that what you wanted?

.star-rating {
    overflow: hidden;
    position: relative;
    height: 1.618em;
    line-height: 1.618;
    font-size: 1em;
    width: 5.3em;
    font-family: star;
    font-weight: 400
}

.star-rating::before {
    content: '\53\53\53\53\53';
    opacity: .25;
    float: left;
    top: 0;
    left: 0;
    position: absolute
}

.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em
}

.star-rating span::before {
    content: '\53\53\53\53\53';
    top: 0;
    position: absolute;
    left: 0;
    color: #2c2d33
}

p.stars {
    margin: 10px 0;
}

#review_form p.stars a {
    position: relative;
    height: 1em;
    width: 1em;
    text-indent: -999em;
    display: inline-block;
    text-decoration: none;
    margin-right: 1px;
    font-weight: 400;
}

p.stars a::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-indent: 0;
    opacity: .25;
}
#review_form .stars a:before {
    font-family: star;
    content: '\53';
    color: #78C247;
    letter-spacing: 2px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
p.stars a:hover~a::before {
    content: '\53';
    color: #43454b;
    opacity: .25
}

p.stars:hover a::before {
    content: '\53';
    color: #78C247;
    opacity: 1
}

p.stars.selected a.active::before {
    content: '\53';
    color: #78C247;
    opacity: 1
}

p.stars.selected a.active~a::before {
    content: '\53';
    color: #43454b;
    opacity: .25
}

p.stars.selected a:not(.active)::before {
    content: '\53';
    color: #78C247;
    opacity: 1
}

#review_form .stars a.star-5:before, #review_form .stars a.star-4:before, 
#review_form .stars a.star-3:before, #review_form .stars a.star-2:before {
    content: '\53';
}

#review_form .stars a {
    font-size: 1.14em;
}

.comment-form-rating label {
    margin-bottom: 36px;
}

Regards

#198103 Copied