1

I want to move below block in third "col-md-4 col-lg-4" div:-

<block class="Magento\Catalog\Block\Product\View" name="product.info" template="Magento_Catalog::product/view/form.phtml" after="alert.urls">
    <container name="product.info.form.content" as="product_info_form_content">
        <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="Magento_Catalog::product/view/addtocart.phtml"/>
    </container>
    <block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="Magento_Catalog::product/view/options/wrapper.phtml">
            <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="Magento_Catalog::product/view/options.phtml">
                <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" name="product.info.options.default" as="default" template="Magento_Catalog::product/view/options/type/default.phtml"/>
                <block class="Magento\Catalog\Block\Product\View\Options\Type\Text" name="product.info.options.text" as="text" template="Magento_Catalog::product/view/options/type/text.phtml"/>
                <block class="Magento\Catalog\Block\Product\View\Options\Type\File" name="product.info.options.file" as="file" template="Magento_Catalog::product/view/options/type/file.phtml"/>
                <block class="Magento\Catalog\Block\Product\View\Options\Type\Select" name="product.info.options.select" as="select" template="Magento_Catalog::product/view/options/type/select.phtml"/>
                <block class="Magento\Catalog\Block\Product\View\Options\Type\Date" name="product.info.options.date" as="date" template="Magento_Catalog::product/view/options/type/date.phtml"/>
            </block>
            <block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml"/>
        </block>
        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="Magento_Catalog::product/view/options/wrapper/bottom.phtml">
            <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="Magento_Catalog::product/view/addtocart.phtml"/>
        </block>
    </block>
</block>

There is no separate container for product.info block.

My theme catalog_product_view.xml file:-

<?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.wrapper" htmlTag="div" htmlClass="row">
                <container name="product.info.col.media" htmlTag="div" htmlClass="col-md-4 col-lg-4" />
                <container name="product.info.col.main.wrap" htmlTag="div" htmlClass="col-md-4 col-lg-4" />             
                <container name="product.info.addtocart.wrap" htmlTag="div" htmlClass="col-md-4 col-lg-4" />                
            </container>
        </referenceContainer>   

        <move element="product.info.wrapper" destination="content" before="-" />
        <move element="product.info.media" destination="product.info.col.media"/>
        <move element="product.info.main" destination="product.info.col.main.wrap"/>
        <move element="product.info" destination="product.info.addtocart.wrap" />       

        <referenceContainer name="product.info.price" remove="true"/>        
        <move element="catalog.product.related" destination="main.content" />
        <move element="product.info.upsell" destination="main.content" />
        <move element="product.info.stock.sku" destination="product.info.main" after="page.main.title"/>
        <move element="page.main.title" destination="product.info.main" before="-"/>

        <move element="product.info.review" destination="product.info.price" after="product.price.final"/>
        <move element="product.info.overview" destination="product.info.main" after="product.info.price"/>        
        <move element="product.info.type" destination="product.info.stock.sku" after="product.info.sku"/>
    </body>
</page>

I also try below code as well but no luck

<referenceBlock name="product.info" htmlClass="col-md-4 col-lg-4" />

Any quick help would be appreciated. I need below layout on product page enter image description here Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.