Link to the tab

Okay I understand now – the linking to tabs is part of the custom code, but the #description is part of the default WooCommerce setup. They’re not changing the tab slug based on the chosen language (and this wouldn’t be visible if we didn’t try to extend the tab slug to work with the URL linking). Unfortunately this will not change.

I tried to add the snippet shown in the knowledge base article so that I can create direct links to the product tabs, but it creates a fatal error. It seems like part of the code may be missing? I say this only because when you move farther down in the article to the changes, the part it says to replace is not even in the original snippet.

I can find no other information about creating direct links to product tabs with this plugin (which I have absolutely enjoyed otherwise), so if you could take a look at the knowledge base article, I would really appreciate it. Thank you!

Hi @utalkitype,

I’m sorry about that! Something went wrong with our ‘code-display’ add-on and the embedded script was trying to be interpreted as code instead of as text. I’ve updated the article and you can now see the entire snippet. For clarity, I will post this snippet below.

Again, sorry for the error.

All the best,
Kevin.

Here is the code snippet:

/**
 * yikes_woocommerce_direct_link_to_product_tabs
 *
 * Allows you to create custom URLs to activate product tabs by default, directly from the URL
 * ex: https://mysite.com/my-product-name#reviews
 * original code forked from: https://www.remicorson.com/access-woocommerce-product-tabs-directly-via-url/
*/
function yikes_woocommerce_direct_link_to_product_tabs() {
	if( is_product() ) {
	?>
		<script type="text/javascript">
			jQuery(document).ready(function($) {

				if( window.location.hash ) {
					// Vars
					var tab = 'tab-' + window.location.hash.replace( '#', '' );

					// Tabs
					$( 'li.description_tab' ).removeClass( 'active' );
					$( 'a[href="#' + tab + '"]' ).parent( 'li' ).addClass( 'active' );

					// Tabs content
					$( '#tab-description' ).hide();
					$( '#tab-' + tab.replace( 'tab-', '' ) ).show();
				}

				// when the tab is selected update the url with the hash
				$( '.tabs a' ).click( function() { 
					window.location.hash = $( this ).parent( 'li' ).attr( 'class' ).replace( ' active', '' ).replace( '_tab', '' );
				});

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

That worked perfectly. Thank you so much for your quick reply and fix!

Kevin,

With your ammended code above, I got the tabs working great. However, even with the changes described in the knowledge base article, I am unable to get the tab section to jump to the top of the page. Do you have any other ideas to make that work?

Thanks

Hi @utalkitype,

Can you send me a URL to one of your products? It may be that there’s not enough space for the browser to jump down to highlight the tab. When I change the specified lines, my browser attempts to jump down but ends up only going about half way because I don’t have much content at the bottom of my page. Does that make sense?

I’ll check out one of your products and see if I can diagnose the issue.

Cheers,
Kevin.

Sure. Below is the link to one of our products…

https://www.engaging-technologies.com/products/hovercam-solo-8/

Hi,

For some reason a script is triggering a “click” on the description tab so it’s always resetting to the description tab.

Try adding this line $( 'a[href="#tab-' + tab.replace( 'tab-', '' ) + '"]' ).click(); below the line $( '#tab-' + tab.replace( 'tab-', '' ) ).show();.

The full function would then look like:

/**
 * yikes_woocommerce_direct_link_to_product_tabs
 *
 * Allows you to create custom URLs to activate product tabs by default, directly from the URL
 * ex: https://mysite.com/my-product-name#reviews
 * original code forked from: https://www.remicorson.com/access-woocommerce-product-tabs-directly-via-url/
*/
function yikes_woocommerce_direct_link_to_product_tabs() {
	if( is_product() ) {
	?>
		<script type="text/javascript">
			jQuery(document).ready(function($) {

				if( window.location.hash ) {
					// Vars
					var tab = 'tab-' + window.location.hash.replace( '#', '' );

					// Tabs
					$( 'li.description_tab' ).removeClass( 'active' );
					$( 'a[href="#' + tab + '"]' ).parent( 'li' ).addClass( 'active' );

					// Tabs content
					$( '#tab-description' ).hide();
					$( '#tab-' + tab.replace( 'tab-', '' ) ).show();
					$( 'a[href="#tab-' + tab.replace( 'tab-', '' ) + '"]' ).click();
				}

				// when the tab is selected update the url with the hash
				$( '.tabs a' ).click( function() { 
					window.location.hash = $( this ).parent( 'li' ).attr( 'class' ).replace( ' active', '' ).replace( '_tab', '' );
				});

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

Hello,

I added that line, but don’t notice any difference.

When I go through debugging it on your site it is triggering the click on the correct tab, and then something else is triggering another click on the description tab. I’ve noticed a lot of minified JavaScript at the bottom of your page executing after the scripts we put in. I’m wondering if one of these scripts is ‘resetting’ the tab back to description.

Do you have any way of temporarily turning off the optimization/minification of your JavaScript? Another thing to try is to change the add_action call to a much lower priority, but I do not think that will place our script below the rest of them. If you’d like to try, update this line changing 30 to 1000, like this:
add_action( 'wp_footer', 'yikes_woocommerce_direct_link_to_product_tabs', 1000 );

Sorry for the hassle, it’s hard to test because it is not happening in any of my environments.

Cheers,
Kevin.

Kevin,

Thanks for the assistance. I tried both of those suggestions and still can’t get it to work. Unfortunately, I just don’t know enough to troubleshoot it on my own. However, thanks for your help and assistance. I may just have to be happy with getting the tab to show up on the url link. ??

Thanks again,

Cathy

Agh, sorry about that Cathy! Thanks for your patience. We tried.

All the best,
Kevin.