I am having trouble styling the WooCommerce rating stars on my website. I'm using the following code to color the stars and align them to the center. However, the issue I'm facing is that regardless of the product's rating (e.g., 3 stars), all 5 stars are being displayed in yellow. Could you please help me identify what's causing this issue and how I can fix it so that the correct number of stars is displayed based on the actual product rating. .woocommerce .star-rating{ margin-left: auto !important; margin-right: auto !important; span::before { display: none !important; } } body.woocommerce .star-rating::before { content: "SSSSS"; color: #e4d530; } body.woocommerce .star-rating span::before { content: "SSSSS"; color: #e0b22f; } body.woocommerce .star-rating span::before { content: "sssss"; color: #e0b22f; } Here is the HTML inspected from the browser. <div class="star-rating" role="img" aria-label="Rated 5.00 out of 5"> <span style="width:100%">Rated <strong class="rating">5.00</strong> out of 5</span></div>