Displaying Empty Stars on Category Pages (Legacy)

This article explains how to customize a Yotpo feature using external code. The code is generic and provided as is. Implementation or modification of this code is not supported by Yotpo. We recommend using the services of a developer for the purpose of integrating this customization into you website.

By default, Yotpo does not display empty stars on category pages if that product does not have at least one review. This guide is for overriding the default behavior to display five empty stars when there are no reviews for a particular product.

Shopify

For Shopify stores:

1. From your Yotpo Reviews main menu, go to Meta & Google > Google Rich Snippets.
2. Activate the feature.
   
3. Place the following code in the category template file at the location you would otherwise have the Star Rating code:

{% if product.metafields.yotpo.reviews_count and product.metafields.yotpo.reviews_count != "0" %}
 <div class="yotpo bottomLine"
 data-product-id="{{ product.id }}"
 data-name="{{ product.title }}">
 </div>
     
     {% else %}
       <div class="yotpo bottomline">
<div class="yotpo-bottomline pull-left  star-clickable">  
       <span class="yotpo-stars"> 
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span> </span>      
 <div class="yotpo-clr"></div> </div></div>

     {% endif %}

Adobe Commerce 1

For Adobe Commerce 1 stores:

1. From your Yotpo Reviews main menu, go to Meta & Google > Google Rich Snippets.
2. Activate the feature.
   
3. Place the following code in the category template file at the location you would otherwise have the Star Ratings code:

<?php 
    $array = $this->helper('yotpo/richSnippets')->getRichSnippet($this); 
    $productYotpo = Mage::registry('current_product');
?>
<?php if ($array["reviews_count"] != 0 ): ?>
 <div class="yotpo bottomLine bottomline-position"
        data-product-id="<?php echo $productYotpo->getId(); ?>"
        data-url="<?php echo $productYotpo->getProductUrl(); ?>">
    </div>    
<?php else: ?>
<div class="yotpo bottomline">
<div class="yotpo-bottomline pull-left star-clickable">  
    <span class="yotpo-stars"> 
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span> </span>      
 <div class="yotpo-clr"></div> </div></div>

<?php endif; ?>

2. Activate the feature

   

Adobe Commerce 2

For Adobe Commerce 2 stores:

1. From your Yotpo Reviews main menu, go to Meta & Google > Google Rich Snippets.
2. Activate the feature.
3. Place the following code in the category template file at the location you would otherwise have the Star Ratings code:

<!-- Yotpo's Star Rating with no Reviews Widget START -->
<?php 
    $rs_helper = $this->helper('Yotpo\Yotpo\Helper\RichSnippets');
    $array = $rs_helper->getRichSnippet($this); 
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $productYotpo = $objectManager->get('Magento\Framework\Registry')->registry('current_product');//get current product
?>
<?php if (isset($array["reviews_count"]) && $array["reviews_count"] != 0 ): ?>
    <div class="yotpo bottomLine bottomline-position"
        data-product-id="<?php echo $productYotpo->getId(); ?>"
        data-url="<?php echo $productYotpo->getProductUrl(); ?>">
    </div>    
<?php else: ?>
<div class="yotpo bottomline">
<div class="yotpo-bottomline pull-left star-clickable">  
    <span class="yotpo-stars"> 
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
     <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span> </span>      
 <div class="yotpo-clr"></div> </div></div>

<?php endif; ?>
<!-- Yotpo's Star Rating with no Reviews Widget END -->

Generic installations

If your site uses a generic integration, there will need to be an API call made to check whether or not the product has reviews. The API call can either be per product as it displays on the product page or it can be an API call for all products.

The logic should be that if there are reviews present, then the standard Yotpo Star Rating should be displayed. If not, then it should display the HTML for the empty stars.

The flow is listed below:

{API CALL CHECKING FOR REVIEWS}
{IF REVIEWS EXIST}
 <div class="yotpo bottomLine"
 data-product-id="PRODUCT_ID"
 data-name="PRODUCT_NAME">
 </div>
    
     {ELSE}
       <div class="yotpo bottomline">
<div class="yotpo-bottomline pull-left  star-clickable">  
       <span class="yotpo-stars">
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span>
         <span class="yotpo-icon yotpo-icon-empty-star pull-left"></span> </span>      
 <div class="yotpo-clr"></div> </div></div>

     {END IF}