Access WooCommerce Product Tabs Directly via URL

#tabs #woocommerce
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:

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

Easily find WooCommerce order ID Here is a small plugin to add a new column to the WooCommerce orders list page that contains orders IDs.
List WooCommerce Products by Tags Here is a quick way to list WooCommerce products by tags using a simple shortcode. To use it, simply place...
WooCommerce: Hide coupon box on checkout page if a coupon is already applied Here is a quick snippet to make things a bit less confusing for your customers in your WooCommerce store. When...
Customize WooCommerce Address Fields Order Here is a quick way to customize WooCommerce shipping and billing addresses fields order. Before providing you the code to...

11 comments

  1. Weekly Roundup: October 24, 2014 – Sell with WP:
    October 24, 2014 at 8:00 am

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

  2. watchteller:
    November 19, 2014 at 7:01 am

    My function.php very hungry. Thanks again

  3. pathuri:
    February 8, 2015 at 1:31 am

    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:
    February 19, 2015 at 9:57 am

    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:
    April 16, 2015 at 9:45 pm

    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:
    April 17, 2015 at 9:54 am

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

  7. muzza78:
    October 29, 2015 at 11:33 am

    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:
    November 11, 2015 at 5:48 am

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

  9. Rami.Alloush:
    January 31, 2018 at 5:50 pm

    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:
    March 20, 2018 at 6:54 pm

    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

Copyright 2023 @ Remi Corson