Opening a tab from a link

A tab whose key is size-guide is reached like this:

https://example.com/product/wool-jumper/#tab-size-guide

Within the same page a relative anchor is enough:

<a href="#tab-size-guide">See the size guide</a>

The tab- prefix is not ours. WooCommerce builds every tab panel with id="tab-{key}" and every tab label with href="#tab-{key}", so the anchor is part of the page whether or not anything acts on it.

What the plugin adds is the acting. WooCommerce's own script recognises only #tab-reviews, #reviews, comment anchors and #tab-additional_information; every other hash lands on a page whose first tab is still the open one. Product Tabs Studio loads a small script on single product pages that looks for a tab label matching the hash and activates it. It runs when the page loads and again on every hash change, so links inside the page work too, and the browser's Back button behaves normally.

The script is about forty lines, is loaded only on single product pages, and only while the setting below is on. It makes no network requests.

There are three places to read a key, in order of convenience.

1. The product editor. In the Product Tabs panel, each row shows its key next to the title as #tab-your-key. The edit link beside it lets you set the key by hand.
2. The global tab editor. Products → Product Tabs, open the tab: the key is in its settings box, with the same anchor notation.
3. The product page itself. View source and look for id="tab-…" on the panel, or href="#tab-…" on the label. This is the definitive answer, because it is what the browser will match.

Keys are derived from the title using the same rules WordPress uses for slugs: lower case, spaces and punctuation become hyphens, accents are simplified, and the result is trimmed to 60 characters. "Shipping & returns" becomes shipping-returns. The default WooCommerce tabs have the keys description, additional_information and reviews; note the underscores in the middle one, which is WooCommerce's own spelling.

If two tabs on the same product ask for the same key, the second one is given a numeric suffix, such as size-guide-2, and a notice tells you it happened. That suffixed key is the real key and the one a link has to use. This is the default policy; the alternative is described under key collisions.

Set a key by hand when the link matters more than the title, and then leave it alone. Changing a key breaks every existing link, bookmark and search result pointing at it, and any theme CSS written against woocommerce-Tabs-panel--old-key.

Nothing breaks. The script looks for a tab label whose anchor matches the hash, finds none, and stops. The product page opens on its first tab, exactly as it would without the hash. There is no error, no empty panel and no message to the customer.

That silence is convenient for one common case — a global "Shipping" tab that appears on most products but not all, linked from a template shared by every product — and inconvenient when you are trying to work out why your link does nothing. The usual reasons, in the order worth checking:

• The key is not what you think. Read it from the page source rather than from the title.
• A collision renamed it, so the key carries a numeric suffix.
• The tab exists but its Enabled box is unticked, so it is not on the page at all.
• The tab is global and its rules do not match this product.
• The tab has an empty title. Tabs without a title are never rendered.

One more possibility is worth knowing about. The script searches for the matching label inside the standard WooCommerce tabs wrapper. A theme or page builder that renders the tabs as something else — an accordion of its own making, a layout that drops the wrapper — has markup the script cannot recognise, so the hash does nothing even though the key is correct. In that case the theme is responsible for opening the right section, and its author will know whether it supports anchors.

Go to Tab Settings → General and untick Deep links. It is on by default. With it off, the script is not enqueued at all on any page, and hashes fall back to WooCommerce's own handling of Reviews and Additional information.

Reasons to turn it off: your theme already opens tabs from the URL and the two are fighting; you have removed jQuery and prefer not to load anything extra; or you simply do not use anchors and would rather ship one file fewer.

Developers can decide per request instead, with the ptstudio_enqueue_frontend_script filter, which receives the boolean the plugin was about to act on. See Filters.

• A "Check the size guide" link in the product description, next to the add-to-cart button, or in a variation description.
• A shipping or returns link in an order confirmation email that points at the tab holding the terms, rather than at a separate page.
• A menu or footer link to one representative product's care instructions.
• Support replies. Sending someone straight to the warranty tab of their product is shorter than describing where to click.

Anchors are not indexed as separate pages by search engines, so a deep link is a convenience for people, not a way to get a tab ranked on its own.