Access WooCommerce Product Tabs Directly via URL
Posted on
This might be outdated!
Here is a quick snippet that I wanted to do for a long time. The aim is to allow you to create custom URLs to access products page with a specific tab active. By default, when you access a product page, the “description tab” is active by default, but with this snippet you can open the reviews tab (for example) directly from the URL. Useful isn’t it?
To use is it, simply add the tab name after a #, for example: http://mysite.com/my-product-name#reviews
Simple right?
To be able to use this method, simply paste the following code in the file called functions.php in your theme folder:
And guess what? It works no matter the permalinks structure is ;-)
Here is the result:
About the author
Related Posts
11 comments
Leave a Reply
You must be logged in to post a comment.
[…] a quick WooCommerce tutorial from Remi Corson on how to access product tabs via […]
My function.php very hungry. Thanks again
My functions.php has already opening php tags (<?php),
because of which it gives 500 error, when I straight away include the above code in functions.php file.
Anyway, is it possible to overcome this error?
Thanking you in advance.
simply remove php tags in the snippet ;-)
Sorry for my late reply.
Tried again.
Site crashes.
Checked debug.log – no error messages.
Tried on dev site also with different theme.
Same problem.
This is great, any Idea how we can do this with a button on the single product page to open a specifiy tab?
Button called “Custom Price” which schould open by click the tab “Custom Price”
Regards
We mentioned something, how can we set the focus to the specific tab?
Remi would this be easily fixed by adding an ‘id’ to each tab instead of a ‘class’? Maybe this is something Woocommerce could add.
not working for me. no errors though. anyone have any luck w/a recent version of WordPress+WooCommerce?
That was perfect, but I had to do some changes to make it work with the latest WC version.
// Direct Link to Product tabs
function wc_direct_link_to_product_tabs() {
if( is_product() ) {
?>
jQuery(document).ready(function($) {
if( window.location.hash ) {
// Vars
var tab = window.location.hash.replace('#tab-', '');
var tab_content = window.location.hash;
// 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', '');
});
});
<?php
}
}
add_action( 'wp_footer', 'wc_direct_link_to_product_tabs', 30 );
Thanks
Thanks for this, almost exactly what I was looking for:
I’m now able to link directly to a tab from another page.
But I’m unable to link from one tab of a product description to another tab. For example, I have two Tabs, “Updates” and “Details”. In the text of the “Updates” tab, I’d like to place a link so that when the user clicks on it, he jumps to the “Details” tab. How do I accomplish that?