47 lines
3.4 KiB
Markdown
Executable File
47 lines
3.4 KiB
Markdown
Executable File
# 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](woo-add-product-tab.md) 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:
|
|
|
|
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.
|
|
|
|
## 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. Set your Accordion breakpoint based on how your theme handles tablets — 768px is a safe default for most sites.
|
|
4. 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.
|