Access WooCommerce Product Tabs Directly via URL

Remi | October 20, 2014 | in WooCommerce

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:

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:


The author

About the author Remi: Hey! My name is Rémi Corson, i'm a WordPress Expert Developer, i create high level themes and plugins, and i provide free stuff every week on this website!


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

  2. 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.

  3. 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”


  4. 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', '');


    add_action( 'wp_footer', 'wc_direct_link_to_product_tabs', 30 );


  5. 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