"Product Tabs" replaces the tab block on the Magento 2 product detail page (product.info.details) with a tab set that is configured from the admin panel. The built-in Description, More Information and Reviews tabs get configurable labels, visibility and sort order, and additional tabs can be built from CMS blocks or from product attribute values. Layout (horizontal or vertical), switch animation, sticky navigation, mobile behaviour, the default open tab and lazy loading of the Reviews tab are all set in configuration; no template changes are needed.
The module is used by store owners who want to organise product information into separate tabs and manage those tabs without developer help. It ships one template for Luma (plain JavaScript) and one for Hyva (Alpine.js); the block chooses the template through Panth\Core\Helper\Theme::isHyva() from the required mage2kishan/module-core package.
Product page: kishansavaliya.com/magento-2-producttabs.html
- Replaces the default product detail page tab block with a configurable tab set for both Luma and Hyva.
- Horizontal or vertical tab layout ("Tab Style").
- Fade, slide or no animation when switching tabs ("Animation Type").
- Accordion or horizontal scrolling tab strip below 768px ("Mobile Behavior").
- Optional sticky tab navigation that stays visible while scrolling; the offset is calculated from any fixed or sticky page header.
- Choice of the tab that is open on page load: first available tab, Description, More Information or Reviews.
- Custom labels, show/hide switches and numeric sort order for the Description, More Information and Reviews tabs.
- Custom tabs that render the content of a CMS block, added as rows in configuration.
- Custom tabs that render selected product attributes as a two-column table, added as rows in configuration.
- Optional icon class per custom tab; the templates load Bootstrap Icons 1.11.3 from the jsDelivr CDN for this purpose.
- Approved review count appended to the Reviews tab label, for example "Reviews (4)".
- Optional lazy loading of the Reviews tab: the review HTML is kept hidden behind a spinner until the tab is opened.
- Deep linking: opening a product URL with
#description,#more-information,#reviewsor a custom tab alias activates that tab, and switching tabs updates the URL hash withhistory.replaceState. - A "Panth Product Tabs" widget definition with "Tab Style" and "Animation Type" parameters.
- All settings can be set at default, website and store view scope.
| Platform | Versions |
|---|---|
| Magento Open Source | 2.4.4 to 2.4.8 (as published on the product page) |
| Adobe Commerce | 2.4.4 to 2.4.8 (as published on the product page) |
| PHP | ^8.1 (from composer.json) |
| Themes | Luma and Hyva |
Composer constraints on Magento packages: magento/framework ^103.0, magento/module-catalog ^104.0, magento/module-store ^101.0, magento/module-widget ^101.0, magento/module-backend ^102.0.
- Magento Open Source or Adobe Commerce 2.4.4 to 2.4.8.
- PHP 8.1 or later.
mage2kishan/module-core^1.0 (modulePanth_Core), required. It provides the "Panth Extensions" admin menu, the theme detection helper and theThemeConfigview model this module registers with.- Suggested:
hyva-themes/magento2-default-themefor the Hyva template (Alpine.js).
composer require mage2kishan/module-producttabs
bin/magento module:enable Panth_Core Panth_ProductTabs
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flushsetup:di:compile is only needed in production mode. setup:static-content:deploy -f is needed because the module ships files under view/frontend/web (a CSS file and a LESS partial for Luma).
Check that the module is enabled:
bin/magento module:status Panth_ProductTabsGo to Stores > Configuration > Panth Extensions > Product Tabs. The same page is reachable from the admin menu entry Panth Extensions > Product Tabs > Configuration. Every field can be set at default, website and store view scope. The defaults below come from etc/config.xml.
| Setting | Default | What it does |
|---|---|---|
| Enable Module | Yes | Enables or disables the module. When disabled the block renders nothing and Magento's default tab output is not replaced. |
| Sticky Tab Navigation | No | Wraps the tab bar in a position: sticky container and offsets it by the height of any fixed or sticky header. |
| Lazy Load Reviews | No | Keeps the Reviews tab content hidden behind a spinner until the tab is opened for the first time. |
| Default Open Tab | First Available Tab | Which tab is active on page load: First Available Tab, Description, More Information or Reviews. If the chosen tab is not present, the first tab is used. |
| Setting | Default | What it does |
|---|---|---|
| Tab Style | Horizontal | Horizontal tab strip above the panels, or Vertical tab list beside the panels (220px wide). |
| Animation Type | Fade | Fade, Slide or None when switching panels. |
| Mobile Behavior | Accordion | Below 768px: Accordion collapses each tab into an expandable header; Horizontal Scroll keeps a scrollable tab strip. |
| Open First Tab by Default | Yes | Stored and exposed through the Config view model; the shipped templates do not read it. |
| Accordion on Mobile | Yes | Stored and exposed through the Config view model; the shipped templates use "Mobile Behavior" instead. |
| Setting | Default | What it does |
|---|---|---|
| Description Tab Label | Description | Label of the Description tab. |
| More Information Tab Label | More Information | Label of the More Information tab. |
| Reviews Tab Label | Reviews | Label of the Reviews tab. The approved review count is appended in brackets when it is greater than zero. |
| Setting | Default | What it does |
|---|---|---|
| Show Description Tab | Yes | Show or hide the Description tab. |
| Show More Information Tab | Yes | Show or hide the More Information tab. |
| Show Reviews Tab | Yes | Show or hide the Reviews tab. |
| Setting | Default | What it does |
|---|---|---|
| Description Tab Sort Order | 10 | Position of the Description tab. Lower numbers appear first. |
| More Information Tab Sort Order | 20 | Position of the More Information tab. |
| Reviews Tab Sort Order | 30 | Position of the Reviews tab. |
Other blocks in the detailed_info group that the module does not recognise get sort order 50. Custom tabs use their own "Sort Order" column (100 when empty).
The "CMS Block Tabs" field is a dynamic row grid (button "Add CMS Block Tab"). Each row has:
| Column | What it does |
|---|---|
| Enabled | 1 to show the tab, 0 to hide it. |
| Tab Title | Label of the tab. |
| CMS Block Identifier | Identifier of the CMS block whose content is rendered in the panel. |
| Icon Class | Optional Bootstrap Icons class, for example bi-truck. |
| Sort Order | Position among all tabs. |
A row is skipped when it is disabled, when the title or identifier is empty, or when the block renders no content.
The "Attribute Tabs" field is a dynamic row grid (button "Add Attribute Tab"). Each row has:
| Column | What it does |
|---|---|
| Enabled | 1 to show the tab, 0 to hide it. |
| Tab Title | Label of the tab. |
| Attribute Codes (comma-separated) | Product attribute codes to list, for example material,color,weight. |
| Icon Class | Optional Bootstrap Icons class, for example bi-gear. |
| Sort Order | Position among all tabs. |
Attributes that do not exist or whose frontend value is empty, No or N/A are left out. A tab with no remaining rows is not rendered.
panth_producttabs/general/enabled
panth_producttabs/general/sticky_tabs
panth_producttabs/general/lazy_load_reviews
panth_producttabs/general/default_tab
panth_producttabs/design/tab_style
panth_producttabs/design/animation_type
panth_producttabs/design/mobile_behavior
panth_producttabs/design/first_tab_open
panth_producttabs/design/accordion_on_mobile
panth_producttabs/labels/description_label
panth_producttabs/labels/more_info_label
panth_producttabs/labels/reviews_label
panth_producttabs/visibility/show_description
panth_producttabs/visibility/show_more_info
panth_producttabs/visibility/show_reviews
panth_producttabs/sort_order/description_order
panth_producttabs/sort_order/more_info_order
panth_producttabs/sort_order/reviews_order
panth_producttabs/custom_cms_tabs/cms_tabs
panth_producttabs/custom_attribute_tabs/attr_tabs
With the default values the module is active immediately after installation: horizontal tabs, fade animation, accordion on mobile, all three built-in tabs shown in the order Description, More Information, Reviews, and no custom tabs.
view/frontend/layout/catalog_product_view.xml(Luma) andview/frontend/layout/hyva_catalog_product_view.xml(Hyva) point the existingproduct.info.detailsblock at the module's template and pass two view models:Panth\ProductTabs\ViewModel\Config(settings) andPanth\ProductTabs\ViewModel\Tabs(current product and approved review count).- The template collects the child blocks of the
detailed_infogroup, classifies each one by alias as Description, More Information, Reviews or other, applies the visibility, label and sort order settings, appends the custom CMS and attribute tabs, sorts everything by sort order and outputs one set of tab buttons, one accordion header per tab and one panel per tab. Blocks that render empty HTML are skipped. - If no Reviews child is present in the group, the module builds a Reviews tab from the
review_listandproduct.review.formblocks. On Hyva the layout file also moves those two blocks intoproduct.info.detailswithgroup="detailed_info". - Styles are printed inline by the template. On Luma the LESS partial
view/frontend/web/css/source/_module.lessis also compiled into the theme CSS;default_hyva.xmlremovesproduct-tabs.cssfrom Hyva pages. - On Luma the tab logic is plain JavaScript run on
DOMContentLoaded; it also exposeswindow.panthTabs.setTab(index)for links such as "Write a Review". On Hyva the logic is an Alpine.js componentpanthProductTabs().
- Description and More Information come from Magento's own product blocks.
- CMS block tabs render
Magento\Cms\Block\Blockwith the configured identifier. - Attribute tabs read each attribute's store label and frontend value from the current product and print them in a
<table class="panth-attr-table">.
There are no per-product settings. What differs between products is the data: an attribute tab appears only on products where at least one listed attribute has a value, and the review count in the Reviews label reflects the approved reviews of the current product in the current store.
Aliases accepted in the URL hash: description, more-information, more_info, reviews, the layout alias of any other detailed_info block, cms_<block identifier> for CMS block tabs and attr_<tab title> for attribute tabs (lower-cased, non-alphanumeric characters replaced by _). Hash changes after page load are also handled.
etc/widget.xml registers the widget "Panth Product Tabs" (class Panth\ProductTabs\Block\Widget\Tabs) with the parameters "Tab Style" (Horizontal, Vertical) and "Animation Type" (Fade, Slide, None). The widget block extends the product tab block and uses the same template and the same configuration view model.
Panth_ProductTabs::tabs.phtml(view/frontend/templates/tabs.phtml) for Luma.Panth_ProductTabs::hyva/tabs.phtml(view/frontend/templates/hyva/tabs.phtml) for Hyva.
Copy the file to your theme under Panth_ProductTabs/templates/ to override it.
- Module name:
Panth_ProductTabs; sequence afterMagento_CatalogandPanth_Core. - Composer package:
mage2kishan/module-producttabs, PSR-4 namespacePanth\ProductTabs\. Helper\Data: typed getters for every configuration path; the two custom tab lists are stored byMagento\Config\Model\Config\Backend\Serialized\ArraySerializedand decoded with the JSON serializer.ViewModel\Config: exposes the helper to templates, plusgetTabConfig()andgetAllTabsConfig()arrays.ViewModel\Tabs:getCurrentProduct()from the registry andgetApprovedReviewCount()for the current store.Block\TabsextendsMagento\Catalog\Block\Product\View\Details;getTemplate()picks the Hyva or Luma template and_toHtml()returns an empty string when the module is disabled.Block\Widget\TabsimplementsMagento\Widget\Block\BlockInterfaceand injects theConfigview model aspanth_config.Block\Adminhtml\Form\Field\CustomCmsTabsandCustomAttributeTabsare theAbstractFieldArraygrids used in configuration.Model\Config\Source\TabStyle,AnimationType,MobileBehaviorandDefaultTabsupply the select options.Observer\CategorySaveAfteris registered oncatalog_category_save_afterinetc/events.xml; itsexecute()method is currently empty.etc/frontend/di.xmladdsPanth_ProductTabsto theregisteredModulesargument ofPanth\Core\ViewModel\ThemeConfig;etc/theme-config.jsonholds the module's colour, font, radius and transition tokens.etc/adminhtml/menu.xmladds Panth Extensions > Product Tabs > Configuration under thePanth_Core::panth_extensionsmenu.- ACL resources:
Panth_ProductTabs::producttabs("Product Tabs") andPanth_ProductTabs::config("Configuration"), underMagento_Config::config. - No
db_schema.xml: the module creates no database tables. - No plugins, preferences, console commands, cron jobs, REST endpoints or custom controllers.
- Unit tests live in
Test/Unit(block, helper and source model tests).
bin/magento module:disable Panth_ProductTabs
composer remove mage2kishan/module-producttabs
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flushThe module creates no tables. Configuration values saved under panth_producttabs/* remain in core_config_data and can be deleted manually. Panth_Core stays installed if other Panth modules use it.
- Product page: kishansavaliya.com/magento-2-producttabs.html
- Contact form: kishansavaliya.com/contact
- Email: kishansavaliyakb@gmail.com
- GitHub issues: github.com/mage2sk/module-producttabs/issues
USER_GUIDE.md covers installation, checking that the module is active, each configuration group, the custom CMS block and attribute tab grids, widget usage, deep linking and a troubleshooting table.
Commercial software license. See LICENSE.txt in this repository.
See CHANGELOG.md.
- Website: kishansavaliya.com
- All extensions: kishansavaliya.com/magento-extensions.html
- GitHub: github.com/mage2sk/module-producttabs
- Packagist: packagist.org/packages/mage2kishan/module-producttabs