How to fix the double-click problem when navigating to the reviews tab in WooCommerce

A lot of Woocommerce sites require the user to click twice to get to the reviews block, which are in a separate tab (Tab). This inconvenience significantly degrades the user experience and can lead to lower conversion rates and visitor satisfaction. To solve this problem, all you need to do is make small changes to your site’s code.

The main reason for this problem is due to the fact that the tab with reviews is loaded only after the first click, and the second click already activates scrolling to the desired block. The solution is to wait a bit for the tab to load and then automatically scroll to the desired section. For this we can use JavaScript, which will add a small delay before the scroll is executed, which will ensure a smooth and correct transition.

This way, you’ll improve the user experience on your website by making the process of navigating to reviews more intuitive and convenient for visitors. You can also solve this problem by adding the code to the fucntions.php file of your child theme.

//Product page Review link fix
function custom_reviews_scroll_script() {
    if (is_product()) { 
        ?>
        <script type="text/javascript">
      jQuery(document).ready(function($) {
    var $reviewTabLink = $('a.woocommerce-review-link');
    var $reviewTab = $('#tab-title-reviews');

    $reviewTabLink.on('click', function(event) {
        event.preventDefault(); 

        // checking review tab
        if (!$reviewTab.hasClass('active')) {
            $reviewTab.find('a').trigger('click'); // review tab activation
            setTimeout(function() {
                $('html, body').animate({
                    scrollTop: $('#tab-reviews').offset().top
                }, 500);
            }, 100);
        } else {
            $('html, body').animate({
                scrollTop: $('#tab-reviews').offset().top
            }, 500);
        }
    });
});

        </script>
        <?php
    }
}
add_action('wp_footer', 'custom_reviews_scroll_script');

It’s done:)