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        Get CustomizeWoo.com FREE
 * @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' ) . ' →</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' ) . ' →</a></p>';
	}
	
	// LINK TO SCROLL TO REVIEWS TAB
	if ( comments_open() ) {
		echo '<p><a class="jump-to-tab" href="#tab-reviews">' . __( 'Reviews', 'woocommerce' ) . ' →</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
	
}
Share:

Leave a Reply