On product pages, by default specification tab is active. How can i make the first tab i.e Description tab active by default. See https://5iallk0uwem1coeq.mojostratus.io/fabrics/zorb/zorb-original/zorb-silver.html page for reference See https://prnt.sc/vbkov0

  • Please add file from where that tabs come from in code. Commented Nov 2, 2020 at 6:30
  • vendor/magento/module-catalog/view/frontend/templates/product/view/details.phtml
    – Nafsss
    Commented Nov 2, 2020 at 6:38
  • @Nafsss, You can simply use jQuery
    – Pawan
    Commented Nov 2, 2020 at 7:52
  • I tried, but it did not work perfectly
    – Nafsss
    Commented Nov 2, 2020 at 7:53
  • jQuery('.product.data.items .data.item.title').removeClass('active'); jQuery('#tab-label-additional').addClass('active'); jQuery('.product.data.items .data.item.content').css('display','none'); jQuery('#additional').css('display','block');
    – Pawan
    Commented Nov 2, 2020 at 7:54

2 Answers 2


Add this to your phtml file.

      function($) {
  • Did not work......
    – Nafsss
    Commented Nov 3, 2020 at 5:14
  • @Nafsss use setTimeout(function(){ alert("Hello"); }, 3000); this function
    – Msquare
    Commented Nov 3, 2020 at 6:11

If you want to show description tab active on product pages,change code line in catalog_product_view.xml file

Here by default, "Details" tab is active, if you want to active "More Information" by default then,just change sort_order of "Details" tab to 20 from 10 and "More Information" tab to 10 from 20.Similarly by changing sort_order you can achieve your requirement.

<block class="Magento\Catalog\Block\Product\View\Details" name="product.info.details" template="Magento_Catalog::product/view/details.phtml" after="product.info.media">
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
<argument name="sort_order" xsi:type="string">20</argument>
 <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Magento_Catalog::product/view/attributes.phtml" group="detailed_info">
<argument translate="true" name="title" xsi:type="string">More Information</argument>
<argument name="sort_order" xsi:type="string">10</argument>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.