Add Better Comments to Woocommerce Product Single

Preview Comment Design

1. Find woocommerce folder or create woocommerce folder to overwrite "WooCommerce product single"

2. You can show comments(reviews) in your product single page.

3. Add below codes to your theme's woocommerce folder and require it in "content-single-product.php"

4. This template can be overridden by copying it to yourtheme(or child)/woocommerce/content-single-product.php.

a. Create a new file called "better-comments.php" and put it to yourtheme(or child)/woocommerce folder

<?php
function better_comments( $comment, $args, $depth ) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    } ?>
    <<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>">
    <?php
    switch ( $comment->comment_type ) :
        case 'pingback' :
        case 'trackback' : ?>
            <div class="pingback-entry"><span class="pingback-heading"><?php esc_html_e( 'Pingback:', 'textdomain' ); ?></span> <?php comment_author_link(); ?></div>
            <?php
            break;
        default :
            if ( 'div' != $args['style'] ) { ?>
                <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
            <?php } ?>
            <div class="comment-details">
                <div class="comment-meta commentmetadata">
                    <span><?php edit_comment_link( __( '(Edit)', 'textdomain' ), '  ', '' ); ?></span>
                </div>
                <div class="comment-text"><?php comment_text(); ?></div>
                <?php
                if ( $comment->comment_approved == '0' ) { ?>
                    <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'textdomain' ); ?></em><br/><?php
                } ?>

            </div>
            <div class="comment-author vcard">
                <?php
                if ( $args['avatar_size'] != 0 ) {
                    $avatar_size = ! empty( $args['avatar_size'] ) ? $args['avatar_size'] : 70;
                    echo get_avatar( $comment, $avatar_size );
                }
                printf( __( '<cite class="fn">%s</cite>', 'textdomain' ), get_comment_author_link() ); ?>
            </div>
            <?php
            if ( 'div' != $args['style'] ) { ?>
                </div>
            <?php }
            break;
    endswitch;
}

b. Require in "content-single-product.php"

defined( 'ABSPATH' ) || exit;
global $product;

require_once get_stylesheet_directory() . '/woocommerce/better-comments.php';

c. Add code to your comments section in "content-single-product.php" "

<?php if ( have_comments() ) : ?>
    <ol class="commentlist">
        <?php wp_list_comments( apply_filters( 'woocommerce_product_review_list_args', array( 'callback' => 'better_comments' ) ) ); ?>
    </ol>
    <?php if ( have_comments() ) : ?>
        <div class="btn-comment">
            <i class="fas fa-chevron-left prev-comment"></i>
            <i class="fas fa-chevron-right next-comment"></i>
        </div>
    <?php endif; ?>
<?php else : ?>
    <p class="woocommerce-noreviews"></p>
<?php endif; ?>

d. Add css to your theme(.single-product .main-section-product .left-side -> you should change with your class or id)

.single-product .main-section-product .left-side .commentlist {
    margin: 0;
    padding: 0;
}

.single-product .main-section-product .left-side .commentlist li {
    display: none;
}

.single-product .main-section-product .left-side .commentlist .comment-text p {
    margin-bottom: 30px;
    padding-right: 80px;
}

.single-product .main-section-product .left-side .commentlist .comment-author img {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.single-product .main-section-product .left-side .commentlist .comment-author .fn {
    font-family: "Manrope", Sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    color: #A3A5A8 !important;
    font-style: normal;
}

.single-product .main-section-product .left-side .commentlist .comment-author a {
    font-family: "Manrope", Sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    color: #A3A5A8 !important;
    font-style: normal;
}

.single-product .main-section-product .left-side .btn-comment {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    margin-right: 100px;
    position: relative;
    top: -50px;
}

.single-product .main-section-product .left-side .btn-comment i {
    border: 2px solid #A3A5A8;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size: 25px;
    padding: 10px 15px;
    color: #A3A5A8;
    margin-right: 30px;
    cursor: pointer;
}

e. Add JS file to your footer

var first = jQuery(".single-product .main-section-product .left-side .commentlist li:first-child");
jQuery(first).addClass("active").slideDown();

jQuery(".prev-comment").on("click",function (){
    var active = jQuery(".single-product .main-section-product .left-side .commentlist li.active");
    removeActive();
    if(jQuery(active).is(":first-child")){
        jQuery(".single-product .main-section-product .left-side .commentlist li:last-child").addClass("active").show();
    }else{
        jQuery(active).prev().addClass("active").show();
    }
});
jQuery(".next-comment").on("click",function (){
    var active = jQuery(".single-product .main-section-product .left-side .commentlist li.active");
    removeActive();
    if(jQuery(active).is(":last-child")){
        jQuery(".single-product .main-section-product .left-side .commentlist li:last-child").addClass("active").show();
    }else{
        jQuery(active).next().addClass("active").show();
    }
});