Magento 2.X: Change sequence of Tabs in Product details Page For Porto Theme

Question

I had few tabs in product detailed page and I want to show those tabs in order like Details, Key Specifications, contents Of Package, More Information, Warranty, Reviews i didnt write any code and i add extra tabs from amin panel For reference please find the attached image

Answer 1

app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/details.phtml

Inside this file, you can fetch all tabs name using, print_r($detailedInfoGroup) you have to get value like,

Array
(
    [0] => product.info.description
    [1] => product.attributes
    [2] => reviews.tab
)

You have to set according to your requirement in new array before foreach in file,

<?php $newOrderTabbing = array('product.info.description',,'reviews.tab','product.attributes'); //custom add ?>

add <?php foreach ($newOrderTabbing as $name):?>

Complete code in details.phtml is like below,

<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <?php $newOrderTabbing = array('product.info.description','reviews.tab','product.attributes'); //custom added position ?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php foreach ($newOrderTabbing as $name): //custom arrayname?>
                <?php
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
                     data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
                       id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                        <?php /* @escapeNotVerified */ echo $label; ?>
                    </a>
                </div>
                <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
                    <?php /* @escapeNotVerified */ echo $html; ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

hope its work for you

Answer 2

Copy "catalog_product_view.xml" in your Magento_Catalog module in your theme and look for XML section

class="Magento\Catalog\Block\Product\View\Details" name="product.info.details"

This contains all the tabs like description, more information etc. You can change the sequence here. Just lift the sections up and down for re-sequencing and set their sort_order accordingly.

<argument name="sort_order" xsi:type="string">5</argument>

Answer 3

In Magento 2.3.X, we can use sort_order argument in Magento_Catalog/layout/catalog_product_view.xml xml config as described below:

<referenceBlock name="product.info.description">
    <arguments>
        <argument name="title" translate="true" xsi:type="string">Description</argument>
        <argument name="sort_order" xsi:type="string">20</argument>
    </arguments>
</referenceBlock>

Reference from Magento2 : Change order of Tabs on Product Page

Hope this will help.