Magento 2 – How to Move Block Inside a New Container in Layout XML

layoutmagento2

I'm trying to wrap the .product-info-main div on the product page inside a new container div (.product-info-container). After following the Magento layout instructions, it's not behaving as expected. Here's what I have in catalog_product_view.xml right now:

<?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.container" htmlTag="div" htmlClass="product-info-container" before="-"/>
            <move element="product.info.main" destination="product.info.container"/>
        </referenceContainer>
    </body>
</page>

The layout doesn't change at all. However, if I remove the <referenceContainer> level, then it works as expected, but the .product-info-container div is inserted at the bottom of the page.

Best Answer

Put the 'move' outside the referenceContainer

<?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>
        <move element="product.info.main" destination="product.info.container"/>
        <referenceContainer name="content">
            <container name="product.info.container" htmlTag="div" htmlClass="product-info-container" before="-"/>            
        </referenceContainer>
    </body>
</page>
Related Topic