CODEWITHSUNDEEP
phpwordpresswoocommerce
krishna89
krishna89

Reputation: 846

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

I am trying to display woocommerce products in loop, while doing this I noticed that the product review is displayed in textual format like "4.5 out of 5", but I am looking for a star type display enter image description here

And I am not sure if this is due to my theme, I googled but could not get proper suggesstions on this.

Upvotes: 3

Views: 3401

Answers (2)

epicrato
epicrato

Reputation: 8408

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>

Upvotes: 0

amespower
amespower

Reputation: 917

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";
}

Upvotes: 1

Related Questions