Blocksify Product Tabs is a WooCommerce source variation of the Tabs block. WooCommerce supplies Description, Additional information, Reviews, and compatible plugin tabs; Blocksify supplies the responsive layout and styling.
- Before you start: Activate WooCommerce and open a single-product Dynamic Template.
- See Dynamic Templates overview or follow Build a WooCommerce product template.
Where to find it
- Go to Blocksify → Dynamic Templates and open a template that targets single WooCommerce products.
- Open the + (Block Inserter), find Blocksify WooCommerce, and select Product Tabs. The preview product’s available tab labels appear.
- Select the block and open the settings sidebar to use General and Tabs Styling.
Note: The inserter offers this block only in the Dynamic Template editor.
WooCommerce tab content
The preview product determines the tab strip. The editor shows its real titles and review count, while each panel uses a preview message.
- Labels and order: WooCommerce supplies both, so there are no rename, add, move, or delete controls.
- Available tabs: Each product receives only the tabs WooCommerce makes available. Additional information is absent when there is no data to show; there is no separate hide-empty switch.
- Icons and subtitles: These features are unavailable for WooCommerce’s label-only navigation.
- Panels: The storefront uses WooCommerce’s full content, including compatible plugin output.
General
The General panel uses the shared Tabs layout controls. See the Tabs reference for full descriptions.
- Tab Position: Top, Right, Bottom, or Left.
- Gap and Tab Spacing: Space between navigation and content, and between tab buttons.
- Tab Overflow: Scroll, Wrap, Stack, or Carousel for a top or bottom strip.
- Tab Width and Tab Align: Distribute and align horizontal tabs.
Tab List Width appears for left or right positions. Device controls let a Stack layout replace a long strip on mobile.
Tabs Styling
The Tabs Styling panel applies one design across the product’s changing tab set.
| Part | What it controls |
|---|---|
| Tab List | The navigation wrapper. |
| Tab | Every tab button. |
| Tab Active | The selected tab state. |
| Tab Content | The shared surface around every WooCommerce panel. |
Visibility can hide the whole block on selected devices. WordPress’s Advanced panel supplies the anchor and additional CSS class fields.
Frontend behavior
Shoppers can click tabs or use arrow keys. The selected tab reveals WooCommerce’s description, information table, reviews, or plugin content.
Use standalone Product Additional Information and Product Reviews blocks instead when those sections should remain visible without tab navigation.