modifying the product ratings block

Hello ckwang,

Thank you for contacting Woo support.

You’re correct that the WooCommerce Blocks are built using React.js, so PHP snippets won’t influence their behavior. That’s likely why you’re not seeing changes when disabling or modifying your custom code.

Regarding your current issue, as per our forum guidelines, we’re unable to provide support for custom code. However, I recommend you consult a WooCommerce developer for further assistance. You can find one at WooExperts and Codeable.

You may also ask for advice at Woo Community Slack or the Woo Community Facebook group.

Let us know if you need any more information.

Best regards.

Which block are you using? You can use CSS to remove the star rating.

Hi guys thanks for reply. I am using stackable blocks and kadence blocks. Really it doesn’t affect this because the Star rating block is from woocommerce. I would like to remove only one set of stars since it’s repeated as you see. My primary concern is also how to rearrange the elements as stacked rather than side by side. And also it doesn’t conform to the box. When adjusting the left right margins it moves it only as much as to the middle, as if there is an invisible wall, but which squishes the text into a single narrow column. Is very weird since it is a single block not two columns. If you can advise any css short codes I would really appreciate it thanks!

Install a child theme and use CSS grid to control the columns at different screen widths.

@media (max-width: 800px) {

    .your-selector {
        display: grid;
        grid-template-columns: 1fr;
    }

}

Hi @ckwang,

I see the stars showing three times, and they come from this CSS rule as shown in the screenshot:

You’ll want to reach out to your third-party developer <span style=”box-sizing: border-box; margin: 0px; padding: 0px;”>for help with the CSS to fix this issue. I see you’re using Kadence’s?Product Rating Block.?Here</span> is their support link: https://www.kadencewp.com/help-center/.

I wish I could do more, but I trust this points you in the right direction!
-OP

Hi Omar. Thanks for your suggestion but the kadence rating block you refer to is from paid version of kadence blocks for woo called shop kit which I don’t have. I’ve already disabled kadence blocks as I’m using another block plugin which I’m 100 percent sure is not causing this as it doesn’t come with such a block. This block is strictly from woocommerce blocks which I’ve already disabled as it now is merged with woocommerce. Which file does the ccs you highlighted appear in? I cannot find them in code editor for front page, or customizer additional css, or code snippets. Also Brad the short code you mentioned didn’t work unfortunately.

I never provided any working code. The CSS rule i posted is an example which needs to be modified to include the class you want to target. You’ll also need to use the same rule to target the same class for elements on desktops as well as mobile devices and change the value for grid-template-columns: from 1fr on mobiles to another value on desktops.

I’ve used this method dozens of times.