Knowledge Base

Link directly to a Custom Tab

Article Last Updated: March 4, 2021

Would you like to link directly to a custom tab with Custom Product Tabs for WooCommerce? This can be done with custom JavaScript. It can be implemented by adding the JavaScript to your theme or by using a plugin. We’ll outline how to implement each of these options.

Method One: Adding JavaScript to Your Theme

If you already have a file used to implement custom JavaScript you can skip step 1.

Step 1:

In your theme create a file for custom JavaScript. For example, custom-scripts.js.

Step 2:

In your functions.php file you’ll need to enqueue the JavaScript file. Using the example script above, the code would be:

function load_scripts() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/custom-scripts.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

More documentation on enqueueing scripts can be found in the WordPress.org Developer Handbook

Step 3:

In custom-scripts.js add the following code.

const tabOpener = function(tab) {
    // Simulate a click on that tab.
   if ( typeof tab === 'string') {
       const currentTab = jQuery( '.' + tab + '_tab' );
        currentTab.children('a').click()
   }

    // Scroll to that tab.
    jQuery('html, body').animate({
        scrollTop: jQuery( '#tab-' + tab ).offset().top
    }, 300);
}

jQuery(document).ready(function($) {
    const { hash } = window.location;
    let tab;

    // If a # exists in the url lets see if its a tab.
    if ( hash ) {
        tab = hash.replace('#', '');
        return tabOpener( tab );
    }

    // On click we'll check to see if the event target has a tab hash.
    $('body').on('click', function(e) {

        if ( e.target.hash && ! e.target.hash.includes('#tab') ) {
            tab = e.target.hash.replace('#', '');
             return tabOpener( tab );
        }
    });
});

---

Method Two: Adding JavaScript With a Plugin

If you’re unsure how to add custom JavaScript to your WordPress theme you can use a plugin option.

Step 1:

Download and install this plugin allowing you to add custom JavaScript to your site.

Simple Custom CSS and JS

Step 2:

Activate the plugin and go to its Settings page.

Step 3:

Click “Add JS Code” at the top of the page.

Step 4:

Copy the custom JavaScript from Method One, Step 3 above into the code editor and save.

Link directly to a custom tab

Now that the JavaScript has been implemented you’ll be able to link directly to a custom tab from anywhere. There is 2 ways this can be done.

1. Embed a link on a product page: <a href=”#limited-edition”>Limited Edition</a>
2. Link directly to a custom tab from anywhere: <a href=”https://example.com/product-page#limited-edition”>Tennis Shoes</a>

If the link is placed on the product page itself a hash is added with the tab title. If the link is not on the product page the full url of the product page is followed by the hash with the tab title.

Now you’re able link directly to a custom tab from anywhere on your site!