2

What's the more elegant way to remove the tabs on the Magento (2.4.2) product page? I'd like to simply show the content without using the tabs.

I was thinking to use some Javascript code in order to "disarm" the tabs widget.

Improve this question
1

You have to shift 2 blocks to show content without tab. The first block is description and the another block is product more attributes. In my case i move 2 block from tab section to main product info main area.

In my theme there is layout file Magento_Catalog\layout\catalog_product_view.xml file.

I write these 2 lines only.

    <move  element="product.info.description" destination="product.info.main" after="-" />
    <move  element="product.attributes" destination="product.info.main" after="-" />

This code show tab for Review but the description and attributes shifted to product info area. Hope this help you.

Improve this answer
2
  • I think better and more elegant approach would be disabling tabs using Javascript. – KaMZaTa Mar 9 at 2:30
  • Yeah these days JavaScript is best solution to manage frontend. It seems you achieve your goal using javascript. Would you like to share JS answer here. – Raghwendra Ojha Mar 27 at 22:09
0

To remove any blocks in Magento, you can do this from the layout file.

In your theme/Magento_Catalog/layout/catalog_product_view.xml file add this:

<?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>
           <referenceBlock name="block.name.to.be.removed" remove="true" />
    </body>
</page>

Replace block.name.to.be.removed with the actual block you want to remove.

And you can add this to add any content of your own:

<block class="Magento\Catalog\Block\Product\View" name="your.own.content" template="Magento_Catalog::product/view/my-own-content.phtml" after="-" />

So it becomes this:

<?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>
           <referenceBlock name="block.name.to.be.removed" remove="true" />
           <block class="Magento\Catalog\Block\Product\View" name="your.own.content" template="Magento_Catalog::product/view/my-own-content.phtml" after="-" />
    </body>
</page>

Now, in your theme/Magento_Catalog/templates/product/view/my-own-content.phtml file:

<?php $product = $block->getProduct();
<?php echo $product->getDescription();?>

Hope this helps.

UPDATE 1 To add/move other contents from layout:

<?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>
           <referenceBlock name="block.name.to.be.removed" remove="true" />
           <block class="Magento\Catalog\Block\Product\View" name="your.own.content" template="Magento_Catalog::product/view/my-own-content.phtml" after="-" />
           <move element="reviews.tab" destination="your.own.content" after="-"/>
    </body>
</page>
Improve this answer
6
  • Thanks but that doesn't show the reviews. I also have another tab created by another extension. How can I show them? – KaMZaTa Mar 5 at 0:37
  • You will have to call them manually in your phtml or move those elements to your block from layout. For ex: <move element="reviews.tab" destination="your.own.content" after="-"/>, see my update. – Adarsh Khatri Mar 5 at 0:57
  • I think better and more elegant approach would be disabling tabs using Javascript. – KaMZaTa Mar 9 at 2:30
  • Furthermore, all product reviews are not loaded doing like this. – KaMZaTa Mar 18 at 16:31
  • The problem is your tab block is removed, so any other module is calling from layout to add their blocks inside the tab, it will not show. You will have to add/move them manually. You will need to find the name of the block and then use move tag in your layout to move it to your desired block. – Adarsh Khatri Mar 18 at 22:14
0

I have used following code to show them:

<?php 
  $layout = $block->getLayout();
?>
<div class="product_review"> 
      <div class="col-sm-12 col-md-12">
          <?= /* @noEscape */ $layout->renderElement('reviews.tab') ?>
      </div>   
</div>
<div class="product_faqtab"> 
      <div class="col-sm-12 col-md-12">
          <?= /* @noEscape */ $layout->renderElement('productfaq.tab') ?>
      </div>   
</div>
<div class="product_care"> 
      <div class="col-sm-12 col-md-12">
          <?= /* @noEscape */ $layout->renderElement('productcare.tab') ?>
      </div>   
</div>
Improve this answer
2
  • Thanks but how should I use this? Sorry but I didn't get. – KaMZaTa Mar 18 at 2:09
  • You can show, anywhere on the product page, I have added the additional block below the main image and display content there using the above code. – Arunendra Mar 18 at 3:10
0

This is how you can remove the Tabs widget in the cleanest way possible.

Basically I took out the blocks from the main block which renders the widget.

This is what I did:

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

<?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.info.detailed" htmlTag="div" htmlClass="product info detailed">

                <!-- Description -->
                <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="Magento_Catalog::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>
                    </arguments>
                </block>

                <!-- Attributes -->
                <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Magento_Catalog::product/view/attributes.phtml" group="detailed_info" />

                <!-- Reviews (Anchor) -->
                <block class="Magento\Framework\View\Element\Template" name="product.review.anchor" template="Magento_Review::anchor.phtml" before="product.info.details" />
                
                <!-- Reviews -->
                <container name="product.info.details" htmlTag="div" htmlClass="product reviews wrapper" after="product.attributes">
                    <block class="Magento\Review\Block\Form" name="product.review.form" as="review_form" ifconfig="catalog/review/active" after="product_review_list.toolbar">
                        <container name="product.review.form.fields.before" as="form_fields_before" label="Review Form Fields Before" htmlTag="div" htmlClass="rewards"/>
                    </block>
                    <block class="Magento\Review\Block\Product\View\ListView" name="product.info.product_additional_data" as="product_additional_data" template="Magento_Review::product/view/list.phtml" ifconfig="catalog/review/active"/>
                    <block class="Magento\Theme\Block\Html\Pager" name="product_review_list.toolbar" ifconfig="catalog/review/active"/>
                </container>
            </container>
        </referenceContainer>

    </body>
</page>

I also had to recreate the Anchor target link for Reviews since it was included in the block.

app/design/frontend/Vendor/Theme/Magento_Review/templates/anchor.phtml

<a id="reviews"></a>

It seems to work pretty well and, as I said, I think this is the cleanest way to achieve that.

Improve this answer

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.