Using tabs

This page walks through the common ways stores use Langeto, 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 > Langeto 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 Langeto toggle instead.

How a tab renders on the storefront

When a shopper opens a product page, Langeto 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 content in a <div>: sanitised with wp_kses_post and paragraphed with wpautop, or, with Shortcodes and blocks in tabs on, run through the_content so shortcodes and blocks execute.

A tab whose content is empty is never registered, so it does not reach the strip. If the formatted body comes back empty anyway (a shortcode that printed nothing, say), the panel prints nothing, heading included. Langeto’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. Langeto’s enabled tabs, appended at priority 100 and up, in the order from the settings screen.

Because Langeto 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 is missing from the strip, its content field is blank; a bodyless tab is never registered.
• Langeto registers no shortcode of its own, you do not place tabs in page content; they appear automatically in the product tab strip. Shortcodes from other plugins can go inside a tab once Shortcodes and blocks in tabs is on.

Performance and accessibility notes

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