How to display woocommerce product reviews with form in custom single product page template

Article

How to display woocommerce product reviews with form in custom single product page template

Customer reviews are vital in creating trust and credibility for your WooCommerce online store. However, the built-in WooCommerce reviews widget is often not what you have in mind for your site. In this tutorial, I’ll teach you how to make a custom reviews section with the form on your WooCommerce single product pages with a simple PHP function.

Why Customize the WooCommerce Review Section?

By default, WooCommerce provides a review section with a form submission function, but it may not be flexible enough for your requirements. Customizing the review section allows you to:

Improve the user experience with better design and functionality
Control where and how reviews are displayed
Add extra features like required star ratings

Implementing the Custom Reviews Section

To create a custom reviews section with a review submission form, you need to add the following code to your website:

function custom_reviews_section() {
    ob_start();
    
    global $product;
    if (!is_product()) {
        return ''; // Only show on product pages
    }
    
    echo '<h3>Customer Reviews</h3>';
    
    // Fetch and display existing reviews
    $args = array(
        'post_id' => $product->get_id(),
        'status'  => 'approve',
        'type'    => 'review'
    );
    $reviews = get_comments($args);

    if ($reviews) {
        echo '<ul class="product-reviews">';
        foreach ($reviews as $review) {
            $rating = get_comment_meta($review->comment_ID, 'rating', true);
            echo '<li><strong>' . esc_html($review->comment_author) . '</strong>: ' . esc_html($review->comment_content);
            if ($rating) {
                echo '<br><strong>Rating: </strong>' . str_repeat('⭐', $rating);
            }
            echo '</li>';
        }
        echo '</ul>';
    } else {
        echo '<p>No reviews yet. Be the first to review this product.</p>';
    }

    // Add the star rating field manually
    $comment_form = array(
        'title_reply' => 'Leave a Review',
        'label_submit' => 'Submit Review',
        'comment_field' => '<p class="comment-form-comment">
            <label for="comment">Your Review</label>
            <textarea id="comment" name="comment" cols="45" rows="5" required></textarea>
        </p>',
        'fields' => array(
            'author' => '<p class="comment-form-author">
                <label for="author">Name</label>
                <input id="author" name="author" type="text" required>
            </p>',
            'email' => '<p class="comment-form-email">
                <label for="email">Email</label>
                <input id="email" name="email" type="email" required>
            </p>',
        ),
        'submit_field' => '<p class="form-submit">%1$s %2$s</p>',
    );

    // Add rating stars using WooCommerce's built-in function
    if (wc_review_ratings_enabled()) {
        $comment_form['comment_field'] .= '<p class="comment-form-rating">
            <label for="rating">Your Rating</label>
            <select name="rating" id="rating" required>
                <option value="">Rate…</option>
                <option value="5">★★★★★</option>
                <option value="4">★★★★☆</option>
                <option value="3">★★★☆☆</option>
                <option value="2">★★☆☆☆</option>
                <option value="1">★☆☆☆☆</option>
            </select>
        </p>';
    }

    comment_form($comment_form);

    return ob_get_clean();
}
add_shortcode('custom_reviews', 'custom_reviews_section');

How to implement the code – Follow anyone below:

1. Add the following code to your theme’s functions.php file:

How to: Hover over Appearance and click on theme file editor > select active in right hand side from (Select theme to edit:) then click on functions.php > Go to the bottom and paste the codes. That’s it!

2. Using the code snippets plugin:

Here it is: https://wordpress.org/plugins/code-snippets/

How to Use This Custom Review Section

Place [custom_reviews] the shortcode on your single product template or inside a widget. Ensure that reviews and ratings are enabled in WooCommerce > Settings > Products > Reviews.

With this simple adjustment, you can improve your WooCommerce site user experience by providing a custom-devised review portion.

Having difficulties with WordPress coding? Employ me today for customized WooCommerce coding!

Article