Using tabs

This page walks through the common ways stores use Tabby, then explains exactly how the tabs behave once they reach the storefront.

Add a shared “Shipping & returns” tab

A global tab is the right tool for content that is identical on every product.

1. Go to WooCommerce → Tabby Tabs.

2. In the first tab row, set the title to Shipping & returns.

3. Leave Enabled ticked.

4. In Tab content, write your policy with safe HTML, a short paragraph, a bulleted list of delivery options, and a link to your full returns page:

   <p>Orders placed before 2pm ship the same day.</p>
   <ul>
     <li>UK delivery: 1-2 working days</li>
     <li>EU delivery: 3-5 working days</li>
   </ul>
   <p><a href="/returns/">Read our full returns policy</a>.</p>

5. Save changes.

The tab now appears on every single product page, after the native tabs. Edit it once here and every product updates.

Add several tabs at once

Click Add tab to append another row, then fill in its title and content. Rows render in the order they appear on the screen, so put the tab you most want shoppers to see first at the top. Remove a row with its × button; the remaining rows renumber themselves automatically.

Park a tab without deleting it

Suppose you run a Holiday delivery tab only in December. Rather than copy its content out and paste it back next year, untick its Enabled box and Save changes. The row stays on the settings screen with all its content intact but does not render on the storefront. Tick it again to bring it back. To hide every tab at once, for example while reworking them, use the master Enable Tabby toggle instead.

How a tab renders on the storefront

When a shopper opens a product page, Tabby adds each enabled tab to WooCommerce’s tab strip after the native tabs. Clicking one shows a panel containing:

• An <h2> heading with the tab title.
• The sanitised content in a <div>, with line breaks turned into paragraphs (wpautop).

A tab whose content is empty shows just its heading, never an empty box. Tabby’s panels carry a goldenrod index-divider edge down their inside margin (a reserved gutter, so it adds no layout shift) to distinguish them from the native Description and Reviews panels. Opening one plays a short “file into place” settle; this is suppressed for visitors who have prefers-reduced-motion set.

Combining with native and third-party tabs

On any product the tab strip is built in this order:

1. The native WooCommerce tabs (Description, Additional information, Reviews) at their usual priorities.
2. Any tabs added by your theme or other plugins.
3. Tabby’s enabled tabs, appended at priority 100 and up, in the order from the settings screen.

Because Tabby uses the standard woocommerce_product_tabs filter at a late priority rather than rebuilding the list, it does not displace tabs that other plugins add, everything merges into one strip.

Tips

• Keep titles short so they fit the tab bar on mobile, where tab labels wrap or scroll.
• Use a tab for anything you would otherwise copy onto many products, editing it once updates every product.
• If a tab looks empty on the storefront, its content field is blank; add content or untick Enabled to hide it cleanly.
• There are no shortcodes, you do not place tabs in page content; they appear automatically in the product tab strip.

Performance and accessibility notes

Tabby renders entirely in PHP into WooCommerce’s existing tab markup, so it adds no extra DOM scaffolding and no layout shift. On the storefront the only asset is a small stylesheet, enqueued only on single product pages (is_product()) and only while Tabby is enabled, there is no JavaScript and no jQuery added to the front end. The admin repeater script is vanilla JavaScript, loaded defer in the footer, and works fully by keyboard. Tab content inherits your theme’s typography; the panel design respects prefers-reduced-motion and ships a dark-scheme palette.