Hi,
Thank you for reaching out to us.
For the first issue, please use this CSS:
.wcpr-stars-count .wcpr-row .wcpr-col-star .star-rating{width: auto !important;}
Regarding the star rating size, it’s displayed with the normal size, it’s not too small from my end: https://nimb.ws/1grbxy
If you want to make it bigger, you can add your custom CSS for this.
About the message shows when non-logged-in users want to leave a review, there’s no option to attach the login link with the text in it.
Best regards.
Hi,
Thank you for your support and quick resolution.
The css solved the issue.
Second, I was actually referring to the star rating where the user gives the rating:
https://nimb.ws/iphAev
Also its color is different.
Thank you
We can’t check as it only allows the purchaser to comment: https://prnt.sc/KlGTY1KG31wv
Please disable the option to allow non-purchasers to comment so we can check.
Thank you.
Hi,
Thank you for checking. Yes, I have disabled now. Request you to please check now.
Additionally for
https://litepace.com/product/ornare-auctor
You may see the rating is 2.4 which is not displayed correctly in the reviews section.
https://nimb.ws/jBHvp1
You may see that it is displayed correctly on product summary description.
https://nimb.ws/BGhxQn
I would like to mention that as advised by you, below css has been used for the star rating:
.wcpr-stars-count .wcpr-row .wcpr-col-star .star-rating{width: auto !important;}
Thank you for that. Please use this custom CSS:
.wcpr-col-star .star-rating span:before, .wcpr-col-star .star-rating:before, .wcpr-overall-rating-right-star .star-rating span:before, .wcpr-overall-rating-right-star .star-rating:before{ letter-spacing: 2px!important;}
.stars.selected span:hover a::before, .stars.selected span a::before, .stars:not(.selected) span:hover a::before, .stars a:before, .stars a:hover ~ a:before, .stars a.active ~ a:before, .stars.selected:hover a:hover ~ a:before{
color: {your_color};
font-size: {your_size}px;
}
Thank you so much. I very much appreciate of your effort and help.
I am sorry but this has introduced another problem like below:
https://nimb.ws/4mUlCO
The size also has another story altogether. the start merges onto one another upon hover on setting the size anywhere around 20px.
Hi,
Please use this CSS:
.wcpr-grid .wcpr-grid-item .wcpr-content .review-content-container .star-rating, .wcpr-modal-light-box .wcpr-modal-light-box-wrapper .wcpr-modal-wrap .wcpr-modal-content .star-rating{ letter-spacing: 2px !important;}
Best regards.
Hi,
Sorry for this, not able to understand the issue. I have added the css as you have recommended, with no changes seen.
You can view here, there is now problem with overall rating, which is 4 but stars are still not aligned.
https://litepace.com/product/augue-adipiscing-euismod
Also I am able to see that the reviews are not responsive on mobile. Could you please suggest?
Thanks
Hi,
I’m sorry for this delay in reply. Thank you for kindly waiting.
I see that you’re using the normal mode, and there’s no problem. Does it happen on Grid mode only?
In that case, please enable the Grid mode and inform me. I’ll be checking shortly.
Thank you.
Best regards.
Hi,
No worries 🙂
The overall rating issue in stars is present in both grid and normal mode.
Here in this product if you see the overall rating:
https://litepace.com/product/ornare-auctor/
It is 3.4.
It is displayed correctly in product details section as below:
https://nimb.ws/hVtiMS
But if you go down to reviews section
https://litepace.com/product/ornare-auctor/#reviews
you would be able to see stars go beyond 3.4
https://nimb.ws/ZvaMcD
You can observe the same issue in this product too:
https://litepace.com/product/iphone-dock/#reviews
wherein the overall rating is 4, however the stars highlight go beyond 4.
https://nimb.ws/5pgHRx
_______________________________________________________________________
Further if you try to give rating to any product, the review section is distorted on hovering upon the stars, i have captured the video recording of same:
https://nimb.ws/4UusZf
Overall here is the css that has been added as suggested by you:
wcpr-stars-count .wcpr-row .wcpr-col-star .star-rating{width: auto !important;}
.wcpr-col-star .star-rating span:before, .wcpr-col-star .star-rating:before, .wcpr-overall-rating-right-star .star-rating span:before, .wcpr-overall-rating-right-star .star-rating:before{ letter-spacing: 2px!important;}
.stars.selected span:hover a::before, .stars.selected span a::before, .stars:not(.selected) span:hover a::before, .stars a:before, .stars a:hover ~ a:before, .stars a.active ~ a:before, .stars.selected:hover a:hover ~ a:before{
color: #feb701;
font-size: 19px;
}
.wcpr-grid .wcpr-grid-item .wcpr-content .review-content-container .star-rating, .wcpr-modal-light-box .wcpr-modal-light-box-wrapper .wcpr-modal-wrap .wcpr-modal-content .star-rating{ letter-spacing: 2px !important;}
Thank you 🙂
Please remove the CSS above and replace it with this CSS:
.wcpr-col-star .star-rating span:before, .wcpr-col-star .star-rating:before, .wcpr-overall-rating-right-star .star-rating span:before, .wcpr-overall-rating-right-star .star-rating:before {
letter-spacing: 3px!important;
}
We can’t check the star in the review form as it’s disabled now.
Hi,
The 4 start overall rating is fine. However there is some difference between the star rating that is shown with the product and the overall rating for 3.4. Now it is slightly on the lower ground.
https://litepace.com/product/ornare-auctor/
I have enabled the review now.
And most importantly I can’t switch on to the grid view because it is not mobile responsive. Could you please check? I have enabled the grid view.
https://litepace.com/product/augue-adipiscing-euismod/
Please replace the CSS above with this one:
.wcpr-overall-rating-right .wcpr-overall-rating-right-star .star-rating, .wcpr-stars-count .wcpr-row .wcpr-col-star .star-rating, .wcpr-grid .wcpr-grid-item .wcpr-content .review-content-container .star-rating, .wcpr-modal-light-box .wcpr-modal-light-box-wrapper .wcpr-modal-wrap .wcpr-modal-content .star-rating{width: auto !important;}
.wcpr-col-star .star-rating span:before, .wcpr-col-star .star-rating:before, .wcpr-overall-rating-right-star .star-rating span:before, .wcpr-overall-rating-right-star .star-rating:before, .wcpr-content .review-content-container .star-rating span:before, .wcpr-content .review-content-container .star-rating:before, .wcpr-stars-count .star-rating span:before, .wcpr-stars-count .star-rating:before {
letter-spacing: 2px!important;
}
.stars:hover a:before, .stars.selected a:before, .stars.selected:hover a:before {
font-size: 20px !important;
}
The mobile review not being responsive is because the style changing causes the conflict. Please use this:
.woocommerce-Reviews{display: block !important;}
Hi,
Thank you for your reply.
With this new css the stars problem is still there but not that noticeable.
3.44 overall rating still is not aligned but it is still manageable.
However this brings the distortion problem back again when user is giving rating.
Mobile view is sorted now with the second css. Thank you. However on the desktop view I can see the reviews are extended to entire screen, like below screenshot.
https://nimb.ws/qcnWoU
Is this expected?
Hi,
Were you able to find time to check?
Thanks
