1

I want to change the detail tabs in the product view page like a simple order.

Description

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

More Information

Activity Gym, Athletic

Material Metal, Rubber, Silicone

Gender Women

Category Electronic, Exercise, Timepiece

How to change below tabs in simple order as defined above. enter image description here

2
  • do you want details first and after more information ? – Pawan Feb 24 '20 at 12:53
  • yes, I have updated with a new screenshot – Magento 2 Learner Feb 24 '20 at 12:56
2

Override template file details.phtml in your custom theme.

Path: app/design/frontend/[vendor]/[your-theme]/Magento_Catalog/templates/product/view/details.phtml

& replace all the code with the below code.

<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')) :?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div>
            <?php foreach ($detailedInfoGroup as $name) :?>
                <?php
                $html = $layout->renderElement($name);
                if (!trim($html)) {
                    continue;
                }
                $alias = $layout->getElementAlias($name);
                $label = $block->getChildData($alias, 'title');
                ?>
                <div>
                     <h3><?= $block->escapeHtmlAttr($alias) ?></h3>
                </div>
                <div>
                    <?= /* @noEscape */ $html ?>
                </div>
                <hr>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

Just for your info: By the way, Magento provides the best way to show description & specification in tabs. if you still want to change then you can replace that file code.

Updated

To change the title, Go to your catalog_product_view.xml (also override this file) & search for the below code.

   <argument translate="true" name="title" xsi:type="string">More Information</argument>

& replace it with.

  <argument translate="true" name="title" xsi:type="string">Specification</argument>
7
  • thanks, it's working, now i need to change the More information to Specification – Magento 2 Learner Feb 25 '20 at 6:19
  • please check my updated answer – Pankaj Pant Feb 25 '20 at 6:25
  • done but not working – Magento 2 Learner Feb 25 '20 at 6:28
  • please flush the cache: php/bin magento c:f – Pankaj Pant Feb 25 '20 at 6:28
  • hey, please replace <h3><?= $block->escapeHtmlAttr($alias) ?></h3> to <h3><?= $label ?></h3> in details.phtml & let me know if this is working or not? – Pankaj Pant Feb 25 '20 at 6:33
1

you can change this "More Information" to "Specification" using the theme

go to your child_theme/i18n/en_US.csv file

"More Information","Specification"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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