customize_stars_color.php

<?php
/*
 * Plugin Name: Otter - customize the stars color within the Product Review block
 * Description: Customize the stars color within the Product Review block based on the value of the rating
 * Version: 1.0
 * Author: Themeisle
 * Author URI: https://themeisle.com
 */

function customize_stars_color() { ?>
        <script type="text/JavaScript">
		var roots = document.querySelectorAll('.wp-block-themeisle-blocks-review');
			
		Array.from(roots).forEach( root => {
			var stars = root.querySelectorAll(".o-review__header_ratings svg");
			var filledStars = root.querySelectorAll(".o-review__header_ratings .filled").length;
				
			stars.forEach( star => {
				if(filledStars < 5) {
					star.style.fill = 'red';
				} else if(filledStars >= 5 && filledStars < 8) {
					star.style.fill = 'orange';
				} else {
					star.style.fill = 'green';
				}
			})
				
			var containers = root.querySelectorAll('.o-review__left_feature');
				
			Array.from( containers ).forEach( container => {
				var stars = container.querySelectorAll('.o-review__left_feature_ratings svg');
				var filledFeatureStars = container.querySelectorAll(".o-review__left_feature_ratings .filled").length;
				stars.forEach( star => {
					if(filledFeatureStars < 5) {
						star.style.fill = 'red';
					} else if(filledFeatureStars >= 5 && filledFeatureStars < 8) {
						star.style.fill = 'orange';
					} else {
						star.style.fill = 'green';
					}
				})
			})
		  })
        </script> <?php
}
add_action('wp_footer', 'customize_stars_color', 10, 1);
?>