Link to Woocommerce Tabs From Menu

[DiegoMantilla]

Hi there.
I have added a custom tabs to my single product page:

1. Product Details (originally Product Description)
2. Indications of Use (custom)
3. Reviews

And I have created a menu in the sidebar to link to these tabs as if they had anchors:

1. #description
2. #indications
3. #reviews

I tried to implement JS from this post:

Woocommerce Review Link

Here is the code I modified:

(function($){
	var tabnav = location.href.split("#").slice(-1)[0];

	if ( tabnav == 'description' ) {    

		$( document ).ready ( function() {

			var navbar = $('.x-navbar').outerHeight();

			$('.x-tab-pane, .x-nav-tabs-item').removeClass('active');

			$('.description_tab, .description_pane').addClass('active');

			setTimeout ( function() {

				$('html, body').animate({
				scrollTop: $(".woocommerce-tabs").offset().top - navbar
				}, 1000);

			}, 750 );

		} );

	}

})(jQuery);
(function($){
	var tabnav = location.href.split("#").slice(-1)[0];

	if ( tabnav == 'reviews' ) {    

		$( document ).ready ( function() {

			var navbar = $('.x-navbar').outerHeight();

			$('.x-tab-pane, .x-nav-tabs-item').removeClass('active');

			$('.reviews_tab, .reviews_pane').addClass('active');

			setTimeout ( function() {

				$('html, body').animate({
				scrollTop: $(".woocommerce-tabs").offset().top - navbar
				}, 1000);

			}, 750 );

		} );

	}

})(jQuery);
(function($){
	var tabnav = location.href.split("#").slice(-1)[0];

	if ( tabnav == 'indications' ) {    

		$( document ).ready ( function() {

			var navbar = $('.x-navbar').outerHeight();

			$('.x-tab-pane, .x-nav-tabs-item').removeClass('active');

			$('.indications-of-use_tab, .indications-of-use_tab_pane').addClass('active');

			setTimeout ( function() {

				$('html, body').animate({
				scrollTop: $(".woocommerce-tabs").offset().top - navbar
				}, 1000);

			}, 750 );

		} );

	}

})(jQuery);

And it works if I manually add the anchor at the end of the URL - click here to see it working:

But it doesn’t work when click the menu items. What am I missing?

[ruenel]

Hello @DiegoMantilla,

Thanks for writing in!

The code is only intended for the urls and not for the menu items. This is why it does now work for you. You will need a different block of Javascript code as well.

To get you started, you can make use of this code:

(function($){
	$('#nav_menu-2 a').on('click touchstart', function(){
		var navbar = $('.x-navbar').outerHeight();

		setTimeout ( function() {

			$('html, body').animate({
			scrollTop: $(".woocommerce-tabs").offset().top - navbar
			}, 1000);

		}, 750 );

	});
})(jQuery);

This does not work out of the box. You will have to modify the code to make it work correctly. The code only serves as an example.

[DiegoMantilla]

I am lost here…if this snippet of code doesn’t work, what is it for?
What would work to achieve what I am looking to do?

[ruenel]

Hello @DiegoMantilla,

It does work partially. This code will instruct the menu items to scroll the page as you click on the menu item. It does not open the right tabs though. This code is given as an example for you to start your customization. Please keep in mind our support only covers getting your site set up, bug fixes and minor cosmetic changes. Any custom development is beyond the scope of our support.

Thank you for your understanding.

[DiegoMantilla]

I understand.
But what I need is not a scrolling function, it is an linking function.
How do I make active each of the tabs by clicking a menu item?

[ruenel]

Hello @DiegoMantilla,

The code pertains to the linking of the menu items which you will know that it works because the page scrolls to the correct tab section.

Your code may look like this:

(function($){
	$('#nav_menu-2 a').on('click touchstart', function(){


		var navbar = $('.x-navbar').outerHeight();

		$('.x-tab-pane, .x-nav-tabs-item').removeClass('active');



		var tabnav = $(this).attr('href').split("#").slice(-1)[0];;

		if ( tabnav == 'description' ) {    
			$('.description_tab, .description_pane').addClass('active');
		}

		if ( tabnav == 'reviews' ) {    
			$('.reviews_tab, .reviews_pane').addClass('active');
		}

		if ( tabnav == 'indications' ) {    
			$('.indications-of-use_tab, .indications-of-use_tab_pane').addClass('active');
		}

		setTimeout ( function() {

			$('html, body').animate({
			scrollTop: $(".woocommerce-tabs").offset().top - navbar
			}, 1000);

		}, 750 );

	});
})(jQuery);

Please understand that this code is not perfect because this is just an example for you to get you started.

[DiegoMantilla]

Thank so you much!
It almost work. Just need to correct:

if ( tabnav == 'indications' ) {    
		$('.indications-of-use_tab, .indications-of-use_pane').addClass('active');
	}

"_pane" instead of "-tab_pane"

[ruenel]

You’re welcome!
We’re glad we were able to help you out.