Access WooCommerce Product Tabs Directly via URL

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:

woocommerce-enable-tab

About the author

Remi Hey! My name is Rémi Corson, I'm a French WordPress Developer, I code stuff and I write from time to time ;-) Buy a coffee
Show your support

Related Posts

11 comments

  1. […] a quick WooCommerce tutorial from Remi Corson on how to access product tabs via […]

  2. watchteller:

    My function.php very hungry. Thanks again

  3. pathuri:

    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.

  4. pathuri:

    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.

  5. woom:

    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

  6. woom:

    We mentioned something, how can we set the focus to the specific tab?

  7. muzza78:

    Remi would this be easily fixed by adding an ‘id’ to each tab instead of a ‘class’? Maybe this is something Woocommerce could add.

  8. Dusza:

    not working for me. no errors though. anyone have any luck w/a recent version of WordPress+WooCommerce?

  9. Rami.Alloush:

    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

  10. jewald:

    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?

Leave a Reply