Magento – Magento 2 Product detail page show content without Tabs

magento2magento2.2productproductstabs

I want to show content without tabs on product detail page. Magento shows description and reviews in tab on product detail page.

Is there any way we can remove the tab and show content vertically?

just like amazon:

Best Answer

First remove description and review tabs from

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

<referenceBlock name="reviews.tab" remove="true" />
<referenceBlock name="product.info.description" remove="true" />

Now you can show description, more information, review.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <container name="product.atributes.block" htmlTag="div" htmlClass="product-atributes-blocks" after="product.info.details">
                <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
                    <arguments>
                        <argument translate="true" name="title" xsi:type="string">More Information</argument>
                    </arguments>
                </block>
                <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description.full" template="product/view/attribute.phtml" group="detailed_info">
                    <arguments>
                        <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">Description</argument>
                        <argument name="title" translate="true" xsi:type="string">Details</argument>
                    </arguments>
                </block>

            </container>
        </referenceContainer>
        <referenceBlock name="reviews.tab" remove="true" />
        <referenceBlock name="product.info.description" remove="true" />
    </body>
</page>

Don't forget to flush the cache

Related Solutions

Magento – Don’t show the Product Detail Tab if empty (product detail)

The code in tabs.phtml looks like this:

<ul class="product-tabs">
    <?php foreach ($this->getTabs() as $_index => $_tab): ?>
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':(($_index==count($this->getTabs())-1)?' last':'')?>"><a href="#"><?php echo $_tab['title']?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
    <?php if($this->getChildHtml($_tab['alias'])): ?>
        <div class="product-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
    <?php endif; ?>
<?php endforeach; ?>

So if a tab content is empty then the tab is not shown.
Either you have a different code, or your tab content is not empty. It may contain something like <div></div> or something like that.
In this case you can change the if statement to remove your tags.
Maybe something like this:

<ul class="product-tabs">
    <?php foreach ($this->getTabs() as $_index => $_tab): ?>
        <?php if(trim(strip_tags($this->getChildHtml($_tab['alias'])))): ?>
            <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':(($_index==count($this->getTabs())-1)?' last':'')?>"><a href="#"><?php echo $_tab['title']?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
    <?php if(trim(strip_tags($this->getChildHtml($_tab['alias'])))): ?>
        <div class="product-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
    <?php endif; ?>
<?php endforeach; ?>

Magento 1.9 – Change Order of Tabs on Product Details Page

Use the before or after tag in your block. Here is an official guide to achieve that.

Example:

 <block type="cms/block" before="some-other-block" name="left.permanent.callout">

Best Answer

Related Solutions

Magento – Don’t show the Product Detail Tab if empty (product detail)

Magento 1.9 – Change Order of Tabs on Product Details Page

Related Topic