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.
Only need to add one extra tab to WooCommerce's existing tabs, without a full rebuild? See the lighter-weight Woo Add Product Tab instead.
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), and Template ID (for Elementor Template — see below). |
| 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). |
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:
- Go to Templates → Saved Templates in your WordPress admin (or wherever your Elementor template library lives).
- Open the template you want to embed, or hover over it in the list.
- 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.
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
- Add the widget to your Single Product Elementor Theme Builder template.
- Decide which default tabs to keep, and add any custom tabs you need.
- Set your Accordion breakpoint based on how your theme handles tablets — 768px is a safe default for most sites.
- 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, nothing renders at all on the live product page — double check at least one tab (default or custom) is visible before publishing.
- 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.