# Woo Custom Product Tabs

Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Requires WooCommerce.

## How it works

Place this widget on your Single Product template — it replaces WooCommerce's entire tabs area with a fully rebuilt, restyled version, including desktop tabs that automatically convert to an accordion on smaller screens.

It covers everything from bolting on a single extra tab to a complete rebuild: keep or hide any of the default WooCommerce tabs, add as many custom tabs as you like, and control which products each custom tab appears on by taxonomy.

## Content settings — Tabs

| Setting | Default | What it does |
|---|---|---|
| **Hide Tab Headings** | Off | Hides the heading text at the top of each tab panel (including WooCommerce's own "Reviews" heading). |
| **Hide Description / Hide Additional Information / Hide Reviews** | Off each | Fully removes that specific default WooCommerce tab — not just visually, it won't render at all. |
| **Custom Tabs** | Empty | A repeater — add as many extra tabs as you need, each with: **Title**, **Content Type** (Text Editor or Elementor Template), **Content** (rich text, for Text Editor), **Template ID** (for Elementor Template — see below), and a **Show On** rule to limit the tab to certain products (see [Showing a tab only on certain products](#showing-a-tab-only-on-certain-products)). |
| **Accordion Below (px)** | 768 | The screen width below which tabs switch to an accordion layout. 768 suits tablet-portrait and below, 480 suits mobile-only, and 0 disables the accordion entirely (always shows tabs). |

## Showing a tab only on certain products

Each custom tab has a **Show On** setting that controls which products it appears on, based on the product's taxonomy terms — categories, tags, brands, or attribute values. This means one Custom Product Tabs widget on your shared Single Product template can serve every product, while individual tabs appear only where they're relevant.

**Show On** offers three modes:

| Mode | What it does |
|---|---|
| **All products** *(default)* | The tab shows on every product — the normal behaviour. |
| **Only products with selected terms** | The tab shows *only* on products that have at least one of the terms you pick. |
| **All except products with selected terms** | The tab shows on every product *except* those with one of the terms you pick. |

When you choose either of the restricted modes, a **Terms** field appears listing every term across your product taxonomies, each labelled by its taxonomy (for example "Category: Hoodies" or "Color: Maroon") so same-named terms stay distinguishable. Pick one or more; a product matches when it has **any** of the selected terms.

**Example:** a "Made on Demand" tab that should only appear on your print-on-demand products — set **Show On** to *Only products with selected terms* and choose your print-on-demand category (or several categories at once). Every other product simply won't show that tab.

A couple of things worth knowing:

- This applies to **custom tabs only**. The default WooCommerce tabs (Description, Additional Information, Reviews) are controlled by their Hide toggles, not by taxonomy.
- The rule is respected in the Elementor editor preview too — so if the product being previewed doesn't match a tab's rule, that tab genuinely disappears from the preview. Set the rule last, or preview with a product that matches.
- If a tab's Terms list is left empty, the tab shows everywhere (an empty rule does nothing).

## Adding an Elementor Template as a custom tab

For a custom tab, choosing **Elementor Template** as the Content Type requires entering that template's numeric ID directly (rather than picking it from a list). To find it:

1. Go to **Templates → Saved Templates** in your WordPress admin (or wherever your Elementor template library lives).
2. Open the template you want to embed, or hover over it in the list.
3. The number in the edit URL (`post=1234`) or shown in your browser's address bar is the Template ID — enter that number into the field.

## Using shortcodes in a tab

Custom tabs set to **Text Editor** run shortcodes, so anything available on your site as a shortcode can go straight into a tab's content.

This is the practical way to give every product its own document without building a tab per product. Using the free plugin's Markdown shortcode:

```
[dj_markdown acf_field="changelog_url"]
```

Add a URL field to your products, drop that single line into a "Changelog" tab, and each product renders the file its own field points at. See the [Markdown Widget](../../dotjuice-elementor-tools/widgets/markdown-widget.md) documentation for the full list of shortcode options.

## Styling

**Tab Navigation** — background, spacing, alignment, divider styling, and Normal/Hover/Active states for each tab button (including a separate colour control for the active tab's bottom border, useful for either blending it into the panel or removing the divider line entirely).

**Panel** — background, typography, padding, border, and shadow for the content area beneath the tabs.

**Reviews** (hidden if you've turned off the Reviews tab) — review count heading, review card styling, avatar (with an option to hide it, size, and rounding), star rating colours, author/date text, review body text, an optional decorative quote mark, and full styling for the review submission form — its star picker, labels, input fields, and submit button.

## Setting it up

1. Add the widget to your Single Product Elementor Theme Builder template.
2. Decide which default tabs to keep, and add any custom tabs you need.
3. For any custom tab that shouldn't appear on every product, set its **Show On** rule and pick the relevant terms.
4. Set your Accordion breakpoint based on how your theme handles tablets — 768px is a safe default for most sites.
5. Style the Tab Navigation and Panel sections to match your design, then move on to the Reviews section if you display product reviews.

## Good to know

- **If every tab ends up hidden** (whether by the Hide toggles or by taxonomy rules) nothing renders at all on that product page — make sure at least one tab is visible for the products you're viewing.
- Custom tab content using the Elementor Template option needs that template to already be built and published — this widget only embeds it, it doesn't create it.