Show ratings with the use of stars

assets/css/admin.scss

@@ -455,11 +455,23 @@
 					margin-top: 4px;
 
 					.product-rating-star {
-						background: url(../images/icons/star.svg) no-repeat;
+						background-repeat: no-repeat;
 						background-size: contain;
 						height: 16px;
 						margin: 4px 4px 4px 0;
 						width: 17px;
+
+						&__fill {
+							background-image: url(../images/icons/star-golden.svg);
+						}
+
+						&__half-fill {
+							background-image: url(../images/icons/star-half-filled.svg);
+						}
+
+						&__no-fill {
+							background-image: url(../images/icons/star-gray.svg);
+						}
 					}
 
 					.product-reviews-count {

assets/images/icons/star-gray.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+	width="16.27"
+	height="15.39"
+	viewBox="0 0 16.270002 15.39"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:svg="http://www.w3.org/2000/svg"
+>
+	<path
+		d="m 8.1376662,11.759108 5.0199998,3.6 -1.9214,-5.8133003 5.02,-3.52 h -6.1566 L 8.1376662,0.02580769 6.1757662,6.0258077 H 0.01919622 l 5.01994998,3.52 -1.92139,5.8133003 z"
+		fill="#a7aaad" />
+</svg>

assets/images/icons/star-half-filled.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+	width="16.27"
+	height="15.39"
+	viewBox="0 0 16.270002 15.39"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:svg="http://www.w3.org/2000/svg"
+>
+	<linearGradient id="gradient">
+		<stop offset="50%" stop-color="#f0c930"/>
+		<stop offset="50%" stop-color="#a7aaad" stop-opacity="1"/>
+	</linearGradient>
+	<path
+		d="m 8.1376662,11.759108 5.0199998,3.6 -1.9214,-5.8133003 5.02,-3.52 h -6.1566 L 8.1376662,0.02580769 6.1757662,6.0258077 H 0.01919622 l 5.01994998,3.52 -1.92139,5.8133003 z"
+		fill="url(#gradient)"
+	/>
+</svg>

includes/admin/views/html-admin-page-addons.php

@@ -13,6 +13,40 @@ if ( ! defined( 'ABSPATH' ) ) {
 
 $current_section_name = __( 'Browse Categories', 'woocommerce' );
 
+/**
+ * Determine which class should be used for a rating star:
+ * - golden
+ * - half-filled (50/50 golden and gray)
+ * - gray
+ *
+ * Consider ratings from 3.0 to 4.0 as an example
+ * 3.0 will produce 3 stars
+ * 3.1 to 3.5 will produce 3 stars and a half star
+ * 3.6 to 4.0 will product 4 stars
+ *
+ * @param float $rating Rating of a product.
+ * @param int   $index  Index of a star in a row.
+ *
+ * @return string CSS class to use.
+ */
+function wccom_get_star_class( $rating, $index ) {
+	if ( $rating >= $index ) {
+		// Rating more that current star to show.
+		return 'fill';
+	} else if (
+		abs( $index - 1 - floor( $rating ) ) < 0.0000001 &&
+		0 < ( $rating - floor( $rating ) )
+	) {
+		// For rating more than x.0 and less than x.5 or equal it will show a half star.
+		return 50 >= floor( ( $rating - floor( $rating ) ) * 100 )
+			? 'half-fill'
+			: 'fill';
+	}
+
+	// Don't show a golden star otherwise.
+	return 'no-fill';
+}
+
 ?>
 <div class="woocommerce wc-addons-wrap">
 	<h1 class="screen-reader-text"><?php esc_html_e( 'Marketplace', 'woocommerce' ); ?></h1>
@@ -152,11 +186,12 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );
 											<span class="price-suffix"><?php esc_html_e( 'per year', 'woocommerce' ); ?></span>
 										<?php endif; ?>
 									</div>
-									<?php if ( null !== $addon->reviews_count ) : ?>
+									<?php if ( ! empty( $addon->reviews_count ) && ! empty( $addon->rating ) ) : ?>
+										<?php /* Show rating and the number of reviews */ ?>
 										<div class="product-reviews-block">
-											<?php /* TODO: Show proper rating, including half stars */ ?>
+											<?php for ( $index = 1; $index <= 5; ++$index ) : ?>
-											<?php for ( $i = 1; $i <= 5; ++$i ) : ?>
+												<?php $rating_star_class = 'product-rating-star product-rating-star__' . wccom_get_star_class( $addon->rating, $index ); ?>
-												<div class="product-rating-star"></div>
+												<div class="<?php echo esc_attr( $rating_star_class ); ?>"></div>
 											<?php endfor; ?>
 											<span class="product-reviews-count">(<?php echo wp_kses_post( $addon->reviews_count ); ?>)</span>
 										</div>