Woocommerce reviews styling

Support
#1

hi there, I have implemented reviews on my woocommerce product pages and want to adjust the styling.

There are currently large empty squares to the left of each review which I want removed (marked with blue crosses on the attached screenshot). Im not sure what they are there for?

Please can you advise how I remove them and have the actual reviews completely left alligned without the empty squares

Thanks

#2

Hello @zoepayne42,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#3

Sorry i completely forgot that!.

Www.sandandseagulls.co.uk

Thanks

#4

Hi There,

Try adding this custom CSS:

.woocommerce #comments .x-comments-list article.comment { /* Move the review to the left*/
    margin-left: 0;
}
.x-comment-img { /* Hide the space on the left which is reserved for the profile image*/
  display: none;
}

Hope this helps.

#5

Hi, this hasn’t worked, it looks exactly the same. See attached screenshot.

Please note that I have cleared caches etc…

Please can you advise.

Thanks

#6

Hello There,

Please remove previous code and add following code:

.woocommerce #comments article.comment:before{
display: none;
}

.woocommerce #comments .x-comment-wrap {
    margin-left: 0;
}

After adding the code the output should look something like this:

Thanks.

#7

I also have this problem.

You can see it here >>https://got2jot.co.uk/product/set-50-motivational-quotes-postcards/

I tried the code you provided but it didn’t work for me. Can you advise?

#8

Hi @Lorenmn,

Please also add this custom CSS:

#reviews  .x-comment-img {
    display: none;
}
#reviews  article.comment {
    margin-left: 0;
}

Hope it helps :slight_smile:

#9

Brilliant! That worked. Thanks

1 Like
#10

You’re welcome.