Return to previous page

Review count to be displayed alongside the review stars on the Shop page.

This topic has 12 replies, 2 voices, and was last updated 2 months, 3 weeks ago ago by Luca Rossi

  • Avatar: Daniyal
    Daniyal
    Participant
    February 19, 2024 at 12:18

    Hi,

    I would like the review count to be displayed alongside the review stars on the Shop page. Could you please assist me with this customization?

    https://gyazo.com/6ab138ecae600b56a8e6d17544b5a7d2

    Thank you.

    #383827 Copied Theme version: 9.2.8
    11 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    February 20, 2024 at 04:38

    Subject: Instructions for Adding Code to the functions.php File in Your Child Theme

    Dear Daniyal,

    We hope this message finds you well.

    We kindly request that you insert the following code snippet into the functions.php file located within your child theme directory:

    
add_filter( 'woocommerce_product_get_rating_html', 'loop_product_get_rating_html', 20, 3 );
function loop_product_get_rating_html( $html, $rating, $count ){
    if ( 0 < $rating && ! is_product() ) {
        global $product;
        $rating_cnt = array_sum($product->get_rating_counts());
        $count_html = ' ' . $rating_cnt .'';

        $html       = '';
        $html      .= wc_get_star_rating_html( $rating, $count );
        $html      .= '' . $count_html . '';
    }
    return $html;
}

    Following the addition of the above code, please proceed to apply the accompanying custom CSS. This can be done by navigating to Theme Options > Theme Custom CSS > Global CSS and pasting the CSS code provided below:

    
.container-rating {
    display: flex;
    align-items: start;
}
.container-rating .star-rating {
    margin: 0 5px 0 0;
}

    Should you require any further assistance or have any questions regarding this process, please do not hesitate to reach out.

    Best Regards,
    The 8Theme Team

    #383938 Copied
    Avatar: Daniyal
    Daniyal
    Participant
    February 20, 2024 at 06:01

    Hi, It’s not working, It’s show like this
    https://gyazo.com/6f18d1ea066efa5927c1db979cf4f391

    #383942 Copied
    Avatar: Daniyal
    Daniyal
    Participant
    February 20, 2024 at 06:03

    And On the product page It’s showing like this: https://gyazo.com/402c76239bcd97e54a15ba088bd3a7be

    #383944 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 20, 2024 at 06:12

    Dear Daniyal,

    We hope this message finds you well.

    We kindly request that you provide us with access to your WordPress Admin & FTP accounts. This will enable us to conduct a thorough examination and assist you more effectively.

    For FTP access, please furnish us with the necessary information, including the FTP host, FTP username, FTP password, FTP port, and the type of FTP encryption. Should you require any assistance in generating these details, we recommend contacting your hosting provider for guidance.

    Thank you for your cooperation.

    Best Regards,
    The 8Theme Team

    #383945 Copied
    Avatar: Daniyal
    Daniyal
    Participant
    February 20, 2024 at 06:42

    Please check private Content area

    Please contact administrator
    for this information.
    #383950 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 20, 2024 at 08:03

    Dear Daniyal,

    We hope this message finds you well.

    We are pleased to inform you that we have updated the custom codes as follows:

    – PHP:

    
add_filter( 'woocommerce_product_get_rating_html', 'loop_product_get_rating_html', 20, 3 );
function loop_product_get_rating_html( $html, $rating, $count ){
	if ( 0 < $rating && ! is_product() ) {
		global $product;
		$rating_cnt = array_sum($product->get_rating_counts());
		$count_html = ' <div class="count-rating">' . $rating_cnt .'</div>';

		$html      = '<div class="container-rating">' . $html ;
		$html      .= $count_html . '</div>';
	}
	return $html;
}

    – CSS:

    
body .container-rating {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

body .container-rating .star-rating {
    margin: 0 5px 0 0px !important;
}

    As a result of these updates, the review count display has been improved. You can view the current presentation at the following link: https://prnt.sc/MTMrpjDpyogV

    We kindly request that you review the changes at your earliest convenience to ensure everything is functioning as expected.

    Thank you for your attention to this matter.

    Best Regards,
    The 8Theme Team

    #383963 Copied
    Avatar: Daniyal
    Daniyal
    Participant
    February 20, 2024 at 08:20

    Could you please make the review count numbers bold?

    #383968 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 20, 2024 at 08:26

    Hi @Daniyal,

    Please also add this custom CSS:

    
.count-rating {
    font-weight: bold;
}

    Hope it helps!

    #383970 Copied
    Avatar: Daniyal
    Daniyal
    Participant
    February 20, 2024 at 08:31

    Let me Try

    #383971 Copied
    Avatar: Daniyal
    Daniyal
    Participant
    February 20, 2024 at 08:50

    Thank you soo much

    #383978 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 20, 2024 at 08:53

    Dear @Daniyal,

    In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

    Click here to share your thoughts: https://themeforest.net/downloads

    Being part of our community means a lot, and your feedback contributes immensely.

    Best Regards,
    The 8Theme Team

    #383981 Copied

  • Tagged: , , , ,

  • Viewing 12 results - 1 through 12 (of 12 total)

The issue related to '‘review count to be displayed alongside the review stars on the Shop page.’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Designers – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion 03 Store – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Electronic Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Wedding – WordPress Theme
lazy-placeholder
Minimal Store – WordPress WooCommerce Theme
lazy-placeholder
Car Parts Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Marseille 01 – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.