Center Ratings/Stars on Product Pages

[GTS75]

I’d like to center the stars that appear for products with reviews to align with the rest of the product data/cart options on my product pages. Is there css to do this? Or another easy way?

Please see the screenshot to see what I’m talking about.

Thanks in advance for the help.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

.woocommerce .star-rating {
  width: 100%;
  text-align: center;
}
.woocommerce .star-rating span::before {
  left: auto;
}
.woocommerce .star-rating::before {
  display: none;
}

– Kyle

[GTS75]

Hey Kyle – That worked on my actual product pages, but now on the category pages the star ratings are right-aligned. Is there a way for them to be centered on both? See attached pic. If not, is there a way to hide star ratings from appearing on the product category pages?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hmm fine for me? http://d.pr/i/1lyZF/1tO5e2SP

– Kyle

[GTS75]

Yes because I removed the css you gave me after seeing it didn’t work correctly. If you go to the actual product page right now you’ll see the stars aren’t centered.

[Kyle – SUPPORT]

Use:

.single-product .woocommerce .star-rating {
  width: 100%;
  text-align: center;
}
.single-product .woocommerce .star-rating span::before {
  left: auto;
}
.single-product .woocommerce .star-rating::before {
  display: none;
}

– Kyle

[GTS75]

haha crap! now the product category star ratings are centered, but not the actual product pages star ratings. They’re left aligned on product pages.

[Kyle – SUPPORT]

Sorry that was wrong, should be:

.single-product .star-rating {
  width: 100%;
  text-align: center;
}
.single-product .star-rating span::before {
  left: auto;
}
.single-product .star-rating::before {
  display: none;
}

– Kyle

[GTS75]

Thanks Kyle – that one worked.

[Kyle – SUPPORT]

Great 🙂 No problem