WooCommerce: Scroll To Product Tab @ Single Product Page

Depending on your theme, just creating an href link anchor to a product tab might or might not work i.e. it might not scroll to it as it’s currently closed.

Here comes a way to create href links that not only scroll to the tab, but also open it in case it’s closed (this will guarantee the anchor scroll to the tab). Also, a little jQuery “animate” will provide the smooth scroll and enhance UX. Hope you enjoy!

Create links to smooth scroll to any WooCommerce Product Tab

PHP Snippet: Create Custom Links to Scroll To Product Tabs @ Single Product Page

/**
 * @snippet       Scroll to tab - WooCommerce Single Product
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_single_product_summary', 'bbloomer_scroll_to_and_open_product_tab', 21 );
 
function bbloomer_scroll_to_and_open_product_tab() {
	
	global $post, $product;	
	
	// LINK TO SCROLL TO DESC TAB
	if ( $post->post_content ) {
		echo '<p><a class="jump-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' &rarr;</a></p>';
	}
	
	// LINK TO SCROLL TO ADDITIONAL INFO TAB
	if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
		echo '<p><a class="jump-to-tab" href="#tab-additional_information">' . __( 'Additional information', 'woocommerce' ) . ' &rarr;</a></p>';
	}
	
	// LINK TO SCROLL TO REVIEWS TAB
	if ( comments_open() ) {
		echo '<p><a class="jump-to-tab" href="#tab-reviews">' . __( 'Reviews', 'woocommerce' ) . ' &rarr;</a></p>';
	}
	
	?>
		<script>
		jQuery(document).ready(function($){
			$('a.jump-to-tab').click(function(e){
				e.preventDefault();
				var tabhash = $(this).attr("href");
				var tabli = 'li.' + tabhash.substring(1);
				var tabpanel = '.panel' + tabhash;
				$(".wc-tabs li").each(function() {
					if ( $(this).hasClass("active") ) {
						$(this).removeClass("active");
					}
				});
				$(tabli).addClass("active");
				$(".woocommerce-tabs .panel").css("display","none");
				$(tabpanel).css("display","block");
				$('html,body').animate({scrollTop:$(tabpanel).offset().top}, 750);
			});
		});
		</script>
	<?php
	
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

4 thoughts on “WooCommerce: Scroll To Product Tab @ Single Product Page

  1. Works Great! Very simple and lightweight – strait to the point. I modified it to scroll to an additional tab I use to display a sizing chart. Only took 3 additional lines of code to the function.

    Then I styled it up and made it look all fancy…

    Thank you!

    1. Excellent

  2. Hey,
    Thanks for solution. Snippet work perfectly except it need a tiny change in jQuery part.

    After deactivate all tabs

    <li>

    , targeted tab remain deactivated because for example class name for description is “description_tab” and not “tab-description” anymore, but still we have “aria-controls” with same class name.

    So I changed :

    var tabli = 'li.' + tabhash.substring(1);

    to:

    var tabli = tabhash.substring(1);

    And

    $(tabli).addClass("active");

    to:

    $('[aria-controls="'+tabli+'"]').addClass("active");
    1. Good stuff, thanks Emad ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.