What's the more elegant way to remove the tabs on the Magento (2.4.7) product page? I'd like to simply show the content without using the tabs and accordion (on mobile).
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. move tag in your layout to move it to your desired block. 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> 