woocommerce – change product rating in loop from textual format to star display format

2 comments

1. Your star-rating span is set to a text font. Change that in the following file: plugins/woocommerce/assets/css/woocommerce.css:

   .star-rating span {
       font-family: "star";
   }
   

2. The class .star-rating is wrapped inside the class .woocommerce. That being said, in order for you to display the stars instead of the actual average in text, you need to add the class .woocommerce to any of the parents of your .star-rating.

   You can see the css in plugins/woocommerce/assets/css/woocommerce.scss

   Add this code to get the rating in your loop and wrap the loop with the class .woocommerce.

   <?php woocommerce_get_template( 'single-product/rating.php' ); ?>
   

   Example

   <ul class="woocommerce">
   
       <?php  
   
           $args = array(
               'post_type' => 'product',
               'order_by'  => 'post_id',
               'order'     => 'ASC'
           );
   
   
           $loop = new WP_Query($args);
   
       ?>
   
       <?php  while ($loop -> have_posts()) : $loop -> the_post(); ?>
           
           <li>
               <?php the_post_thumbnail(); ?>
               <?php woocommerce_get_template( 'loop/price.php' ); ?>
               <?php woocommerce_get_template( 'single-product/rating.php' ); ?>
               <?php woocommerce_get_template( 'loop/add-to-cart.php' ); ?>
           </li>
   
       <?php endwhile; ?>
   </ul>
   

Comments are closed.