...
Tutorials, WooCommerce, Wordpress

How to Access WooCommerce Product Tabs Directly via URL

07 February 2019

Here I am going to show you how you can access the WooCommerce product tabs directly via URL. The aim is to allow you to create custom URLs to access the products page with a specific tab active. By default “description tab” is active in WooCommerce, But with this example you can open reviews tab directly using URL.

To use this approach, simply add name of the tab after #tag. For example: http://mysite.com/my-product-name#reviews

To implement this method, simple paste the following code into your functions.php file in your theme folder:

<?php
/**
 * wc_direct_link_to_product_tabs
 *
 * Allows you to create custom URLs to activate product tabs by default, directly from the URL
 * ex: http://mysite.com/my-product-name#reviews
*/
function wc_direct_link_to_product_tabs() {
	if( is_product() ) {
	?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
	
		    if( window.location.hash ) {
			    
			    // Vars
			    var tab 		= window.location.hash.replace('#', '');
			    var tab_content = 'tab-' + tab;
	
		    	// Tabs
		    	$( 'li.description_tab' ).removeClass( 'active' );
				$( 'li.' + tab + '_tab' ).addClass( 'active' );
				
				// Tabs content
				$( '#tab-description' ).hide();
				$( '#' + tab_content ).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', 'wc_direct_link_to_product_tabs', 30 );

Here is the result:

Leave a Comments