How can I access my tabs directly via URL?

Article Last Updated: April 23, 2018

Out of the box, WooCommerce doesn’t support this feature. A few of our users have asked us how this can be achieved, so we thought we’d write a quick knowledge base article explaining how you can achieve this functionality in just a few steps.

First, you’ll want to make sure that you have Easy Custom Product Tabs for WooCommerce version 1.4.4 or later installed. In previous versions we stored the tab IDs differently, and updated them to closely mirror the way WooCommerce stores them to ensure the snippet below works properly.

If you’re updating from a previous version (v1.4.3 or earlier) you’ll want to re-save your products so the tab IDs update in the database, and are referenced correctly on the front end of the site. Don’t worry, your tab data is safe.

After you’ve updated your products, to ensure the tab IDs are up to date, you’ll want to add the following snippet to your active themes functions.php file. Ideally, you’re working with a child theme – so the snippet below should go into your child themes functions.php file.

If you’re not comfortable editing code, you can use a third party plugin to add custom code snippets to your WordPress site. One that works well that we recommend is My Custom Functions.

The snippet below uses JavaScript to switch tabs when a hash is found in the URL. For example, http://www.mysite.com/custom-product#reviews would have display your product with the reviews tab visible on load. http://www.mysite.com/custom-product#my-custom-tab would display one of your custom tabs with the title ‘My Custom Tab’, and so on.

The snippet below also alters the URL in the browser bar each time a tab is clicked, to allow you (or the user) to copy and paste the URL from the browser and share it with others.

 

The tabs now display properly, but I want the page to jump down to the linked tab. How can I do that?

If you want the browser to jump down to the linked tab, you’ll need to make two small changes to the code above. First you’ll want to remove ‘tab-‘ from line #16. Next, on Line #29 you’ll want to add ‘tab-‘ before $(this).parent....

So the new lines would now be as follows:

Line #16:

Line #29:

Now when a user links directly to a product with a tab in the URL, the page will load and toggle to the appropriate tab, and then the browser will jump down to the appropriate tab so it’s in the browser view.

A big thank you goes out to Remi Corson who wrote a great article titled “Access WooCommerce Product Tabs Directly via URL“. The snippet provided was no longer working on more recent installs of WooCommerce, so we went ahead and updated the snippet a bit to ensure it’s working with more recent versions.