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.
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityWhat'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.
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.
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.
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>
<move element="reviews.tab" destination="your.own.content" after="-"/>
, see my update.
Mar 5, 2021 at 0:57
move
tag in your layout to move it to your desired block.
Mar 18, 2021 at 22:14
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>