Magento2 – Move Details Tab to Product Info Column

blocksdesignmagento2producttheme

In Magento 2, the Blank theme displays the Details tabs below product images.

How to move this block to the product info column (right side of the page, under Add to cart button)?

Best Answer

We should take a look at: vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml line 103 ~ 118

<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="product.info.media">
                <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
                ......
</block>

All tabs are inside the product.info.details element and belong to group detailed_info. The add-to-cart element belongs to product_options_wrapper_bottom element. We need to rearrange these elements. To do this, add the extending catalog_product_view.xml in the app/design/frontend/{Vendor Theme}/{Theme Name}/Magento_Catalog/layout/ directory:

#app/design/frontend/{Vendor Theme}/{Theme Name}/Magento_Catalog/layout/catalog_product_view.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="product.info.details" destination="product.info.main" after="product_options_wrapper_bottom"/>
    </body>
</page>

Here is the result: enter image description here

You can read more here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_rearrange

Related Topic