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

Improve this question
2
  • Did you ever find an answer for this?
    – web master
    Apr 20, 2021 at 19:39
  • No. I am not able to find answer
    – Purushotam Sharma
    Apr 21, 2021 at 5:01

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.