Do you want to Add Your Customer reviews in Home or other page ? Yes you can add it. Essentially there has some plugin But those are not free.

Sometimes Your customer gets Encouraged to see your customer reviews.And it will boost up if customers sees the all reviews together.  In this article, we’ll tell you the best way to create a carousel of customer reviews. To make it work you have to add some custom code/function in your wordpress site. First we will make a function . second we will emplement the code so we can see all reviews . third we will add owl carousel for all reviews .

Step 1: Eplement the function in Functions.php

Be careful if you are a beginner level. You have to find out function.php file in your themes file. Paste the Below code to the last and dont place it within any of  “brackets {}” of  function.php .

 

//Display all product reviews  
 if (!function_exists('display_all_reviews')) {  
 function display_all_reviews(){  
   $args = array(  
     'status' => 'approve',  
     'type' => 'review'  
   );  
   // The Query  
   $comments_query = new WP_Comment_Query;  
   $comments = $comments_query->query( $args );  
 echo '<div class="woocommerce" style="width:100%" ><div class="client_review_slider owl-carousel owl-theme">';  
   // Comment Loop  
   if ( $comments ) {  
     $i = 0;  
     foreach ( $comments as $comment ): ?>  
       <div itemprop="reviews" itemscope itemtype="http://schema.org/Review" class="item" id="li-review-<?php echo $comment->comment_ID; ?>">  
         <div id="review-<?php echo $comment->comment_ID; ?>" class="review_container" style="border: 1px solid #b1b1b1;background-color: #fff;padding: 30px;text-align: center;">  
           <div class="review-text">  
             <div itemprop="description" class="description" style="margin-bottom: 15px;font-size: 18px;" >  
               <?php echo $comment->comment_content; ?>  
             </div>  
             <div class="clear"></div>  
           </div>  
           <div class="review-avatar">  
              <style>.review-avatar img {border-radius: 50%;margin: auto;width: 70px !important;}</style>  
             <?php echo get_avatar( $comment->comment_author_email ); ?>  
           </div>  
           <div class="review-author">  
             <div class="review-author-name" style="margin-top: 15px;" itemprop="author"><?php echo $comment->comment_author; ?></div>  
             <div class='star-rating-container'>  
               <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating" class="star-rating" style="color: #e4bb24;float: none !important;margin: auto;margin-top: 5px;display: block;" title="<?php echo esc_attr( get_comment_meta( $comment->comment_ID, 'rating', true ) ); ?>">  
                 <span style="width:<?php echo get_comment_meta( $comment->comment_ID, 'rating', true )*20; ?>%"><span itemprop="ratingValue"><?php echo get_comment_meta( $comment->comment_ID, 'rating', true ); ?></span> <?php _e('out of 5', 'woocommerce'); ?></span>  
               </div>  
             </div>  
           </div>  
           <div class="clear"></div>  
         <div class="clear"></div>        
       </div>  
     </div>  
     <?php   
     if (++$i == 12) break;  
     endforeach;  
   }   
   echo '</div></div>';  
 }  
 }  

Ok now you can place below function name anywhere on the site. You will see Your all reviews without carousel.

 <?php display_all_reviews(); ?>  

Step 2: Making Slider for Customer reviews

So we are gather woocommerce customers reviews. Now we have to make a slider. For slider we will use slider framwork called OwlCarousel. Some of theme has owl carousel included and some of hasnt. so you have to integrate it mannually. Place below code in function.php . For making it easy I have generated the code for you.

 

function devweb24_com_register_scripts() {

	wp_enqueue_style( 'owl-css', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css', array(), true );
	wp_enqueue_style( 'owl-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css', array(), true );
	wp_enqueue_script( 'owl-js', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array( 'jquery' ), true );

}
add_action( 'wp_enqueue_scripts', 'devweb24_com_register_scripts' );

Ok your site has owlcarousel integrated. Now you have to initialize owl carousel on a script. you can place the below code before </body> tag . or you can use this plugin (simple custom css js) to add custom js.

 

jQuery(document).ready(function( $ ){
    
  $('.client_review_slider').owlCarousel({
		loop:true,
		margin:20,
		nav:true,
		responsive:{
			0:{items:1},
			600:{items:3},
			1000:{items:3}
		}
   })
});

There have some arguments to change carousel settings. You will get a better idea from Owl Carousel’s official website.

The Output ↓

About Sohan Yusuf

I’m an expert in WordPress including site-builders. I can code in HTML, CSS, PHP, JS & SQL. I helped more than 100 businesses to succeed online and improve their web presence. .

Leave a Comment

Your email address will not be published. Required fields are marked *