Remi's blog

Access WooCommerce Product Tabs Directly via URL

—

by

Remi
in

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

,

11 responses to “Access WooCommerce Product Tabs Directly via URL”

  1. Weekly Roundup: October 24, 2014 – Sell with WP

    […] 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.

    1. Remi

      simply remove php tags in the snippet ;-)

  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