User Tools

Site Tools


Sidebar

magento_2:product_tabs

For more details see how the Product Tabs for Magento 2 extension works.

Guide for Product Tabs for Magento 2

Provide customers with detailed product information via Product Tabs for Magento 2. Let them get all the info they need and, thus, reduce the decision-making time.

  • Customize default product tabs according to your needs
  • Add new tabs to Magento 2 product pages
  • Set flexible rules for custom tabs
  • Modify tabs content in a few clicks
  • Apply any type of visual content to your tabs
  • Display a related products tab
  • Hyvä-ready storefront
This extension is compatible with Hyvä Theme for Product Tabs. You can find the 'amasty/module-custom-tabs-hyva' package for installing in composer suggest. The compatibility is available as a part of an active product subscription or support subscription.
In Product Tabs FAQ you can find answers to the most popular questions about the extension functionality.

General Settings

To configure the extension, go to Stores → Configuration → Amasty Extensions → Product Tabs.

Expand the General tab.

Extension Enabled - set to Yes to activate the module and add new tabs to Magento 2 product pages.

Allow Editing Default Magento Tabs - select Yes if you want to be able to customize the default tabs. If No, only custom tabs will be allowed for editing.

Accordion View - set to Yes to change the way tabs will be displayed to an accordion view: all tabs will be shown as a dropdown list. This feature can be very handy if you have lots of tabs and/or long tab names that don't fit the standard tab view. See the front-end example of the accordion view.

Tab Management

To add new tabs to Magento 2 product pages as an admin, navigate to Catalog → Product Tabs → Tab Management.

All the information about the tabs is displayed on a handy grid. You can easily check and edit Tab Order, its ID, Tab Name and Title, Status, Type (Custom, Default or 3rd party), Module Name, Store View and Customers Groups to which the particular tab is visible. You can also add a new product page tab from Magento 2 admin panel.

Tab Title can be dynamic. It is indicated in braces:
 {{default_tab_title}} 
If a 3rd-party tab is disabled in the native extension, you can't enable it via Amasty Product Tabs. But if it is enabled, you may disable it or limit tab's display using flexible conditions. In this case, the extension works as a filter.

To perform mass actions, tick the tabs and choose the necessary action from the Actions dropdown. It is possible to Delete, Enable, Disable or Duplicate tabs in bulk.

Adding a New Tab

To add a new tab to a Magento 2 product page, admin can click Add New Tab button above the grid.

Tab Details

Type - the type of the tab is detected automatically.

3 types are possible:

  • Default - default Magento tabs;
  • Custom - the tabs created via the extension;
  • 3rd-party - the tabs generated by any other third-party extensions.

Status - switch to Yes to enable the tab on the frontend.

Tab Name - set tab name for internal use describing its content/conditions to display.

Tab Title - specify tab name to be displayed on product pages.

Tab Order - set tab's position among the other tabs.

Tab Anchor - Adjust the anchor to set up a custom URL for the tab. Leave blank to use the value from the configuration.

Store - choose the store(s) to which this tab will be applied.

Customer Groups - select the groups to which the particular tab will be displayed.

Tab Content

Using Magento 2 Product Tabs, you can specify any type of content that will be displayed in the tab due to the WYSIWYG editor. The extension uses the editor installed in the user's Magento instance. So it's functionality depends on global WYSIWYG preferences.

You can adjust editor's configuration if needed. In this case go to Stores → Configuration → General → Content Management → WYSIWYG Options.
For more information, see this WYSIWYG User Guide.

WYSIWYG functionality allows adding any type of media content as well: videos, photos, animations, etc.

Except for the editor's options, it is possible to insert various widgets, variables and attributes right from the Edit Tab Content field.

Thus, you can display valuable information about the product. For example, just hit the Insert Attribute button and choose the attribute(s) that will be shown in a tab.

Be aware that some of the default Magento service attributes are hidden since it can't be displayed on the frontend correctly. Here is the list:
custom_design
custom_design_from
custom_design_to
custom_layout
custom_layout_update
msrp_display_actual_price_type
options_container
price
price_type
price_view
visibility

You may also show Related, Up-Sell and Cross-Sell products to increase the average check.

Switch to Yes to enable a particular group of products on product pages.

Assign to Products

With the extension, you can set flexible conditions to adjust the tabs display.

When the configuration is over, click Save Tab.

Default Tab Customization

Apart from adding tabs to Magento 2 product pages, the module allows editing default tabs.

The default tab content is represented as a placeholder, so it's impossible to edit any details inside it. But you can add the information before or after the default content or remove it at all and replace it with your custom data.

If you want to reset the content of the tabs with type 'Default' of '3rd-party' to its default values, paste this variable in the WYSIWYG editor:
{{default_tab_content}}

Tabs Templates

After the module installation, the set of predefined tab templates gets generated automatically in the Tab Management grid. To access it, please navigate to Catalog → Product Tabs → Tab Management. The set includes the following templates: FAQ, Footwear, Men Bottoms, Men Tops, Women Bottoms, Women Tops.

By default, all of the pre-made tab templates are disabled. To activate a size chart or FAQ on a product page, set the Status switcher to the Enabled state in the tab settings.

Content in the templates most likely needs to be adjusted with your needs or product/brand specifics. Check the size grid, measurement units, and text in the tab before publishing.

To make corrections in the tab content just use the WYSIWYG editor in the Tab Content section.

In order to create several templates with similar content (like a few Footwear tabs for different shoe brands), you can use the Duplicate button on the button bar in the tab settings.

Use the Assign to products condition tree to specify the right products where a certain tab should be displayed.

Take into account, that by default each tab is assigned to all store views and all the customer groups available within your instance. Adjust the display options with the appropriate controls.
Please note, that for the correct functioning of the Product Tabs extension, we don't recommend using the Default Product Layout = Product – Full Width setting (Stores → Confoguration → General → Web → Default Layouts).

Frontend Examples

Create and add as many Magento 2 tabs to product pages as you need. Highlight useful materials, e.g.: Tax details, Image gallery, Shipping rules, Q&A, Contact us, etc. and adjust tabs sort order.

The extension doesn't modify the style of tabs on the frontend. The tabs' CSS should be provided by your frontend theme. Product Tabs extension allows editing the title, content, and visibility of tabs only.

Accordion View for Magento 2 Product Tabs

If you have many tabs and/or long tabs names, make your tabs expand like dropdowns with Accordion View. To set it up, please proceed to General settings.

On the example below, you can see the way the Accordion View tabs look on the front-end.

Boost the number of purchases with the Automated Related Products extension.

You can add the block with cross-sells to product tabs in a few simple steps:

1. Go to Catalog → Amasty Related Products → Related Product Rules to generate a rule. Set the Custom rule type and Custom position for the rule. Copy rule's ID.

2. Create a new product tab. In the Tab Content area click Insert Widget and select Amasty Related Products Block. Specify the rule's ID.

3. Save the tab.

If needed, disable widget display in the footer. Thus, you will show related products right in the tabs instead of page footer and have additional free space.


FAQ


Find out how to install Product Tabs for Magento 2 via Composer.
Rate the user guide
 stars  from 3 votes (Details)
magento_2/product_tabs.txt · Last modified: 2024/01/09 09:56 by avronskaya