0

I am using Magento 2.3 with Porto theme, by default Magento shows description and rating information in a tab. How to remove/disable tabs and show tabs data straight?

5
  • Then you need to do the customization here for this one. Jun 7, 2021 at 10:24
  • Yes Will need customization but, I am not sure which file to update
    – ishaq
    Jun 7, 2021 at 11:05
  • Have you checked my answer?
    – ZealousWeb
    Jun 16, 2021 at 12:21
  • @ZealousWeb thanks for your answer. I was using Porto theme so I override the product view template file inside my child theme and updated it to remove tab code. Here is the screenshot tinyurl.com/yfncqbra
    – ishaq
    Jun 16, 2021 at 12:45
  • If my answer is useful then please upvote this so other community member can use it. Thanks
    – ZealousWeb
    Jun 16, 2021 at 12:46

1 Answer 1

0

You need to do customisation in below files. AS well as need to write css to look proper according to your theme.

Here i have done in one of my sample magento.

Step 1: Please write below code in your theme's catalog_product_view.xml file

<move element="product.info.details" destination="product.info.media" after="-"/>

If you have custom container then move element in your custom container from xml file.

Step 2: Override file details.phtml from path vendor/magento/module-catalog/view/frontend/templates/product/view/ in your theme

Write below code

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Catalog\Block\Product\View\Details $block */
?>
<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')) :?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items">
            <?php foreach ($detailedInfoGroup as $name) :?>
                <?php
                $html = $layout->renderElement($name);
                if (!trim($html)) {
                    continue;
                }
                $alias = $layout->getElementAlias($name);
                $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title">
                    <span class="data switch" id="tab-label-<?= $block->escapeHtmlAttr($alias) ?>-title">
                        <?= /* @noEscape */ $label ?>
                    </span>
                </div>
                <div class="data item content">
                    <?= /* @noEscape */ $html ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

Step 3: Changes in css as per sample magento

https://prnt.sc/14nd5pb

Output :- https://prnt.sc/14nevfl

Please do change in css as per your theme to look proper.

Please check and let me know on this

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.