2

Magento 2 change the product page layout as below :-

<referenceBlock name="head.components">
        <block class="Magento\Framework\View\Element\Js\Components" name="checkout_page_head_components" template="Magento_Catalog::js/components.phtml"/>
    </referenceBlock>
    <referenceBlock name="page.main.title">
        <arguments>
            <argument name="css_class" xsi:type="string">product</argument>
            <argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
        </arguments>
    </referenceBlock>
    <referenceBlock name="root">
        <arguments>
            <argument name="add_attribute" xsi:type="string">itemscope itemtype="http://schema.org/Product"</argument>
        </arguments>
    </referenceBlock>

    <referenceBlock name="breadcrumbs" template="Magento_Catalog::product/breadcrumbs.phtml">
        <arguments>
            <argument name="viewModel" xsi:type="object">Magento\Catalog\ViewModel\Product\Breadcrumbs</argument>
        </arguments>
    </referenceBlock>

    <referenceContainer name="content">
        <container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
            <container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price">
                <container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
                    <container name="product.info.type" before="-"/>
                    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="Magento_Catalog::product/view/attribute.phtml" after="product.info.type">
                        <arguments>
                            <argument name="at_call" xsi:type="string">getSku</argument>
                            <argument name="at_code" xsi:type="string">sku</argument>
                            <argument name="css_class" xsi:type="string">sku</argument>
                            <argument name="at_label" xsi:type="string">default</argument>
                            <argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
                        </arguments>
                    </block>
                </container>
                <block class="Magento\Catalog\Block\Product\View" name="product.info.review" template="Magento_Catalog::product/view/review.phtml" after="product.info.stock.sku" />
                <block class="Magento\Catalog\Pricing\Render" name="product.price.final">
                    <arguments>
                        <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                        <argument name="price_type_code" xsi:type="string">final_price</argument>
                        <argument name="zone" xsi:type="string">item_view</argument>
                    </arguments>
                </block>
            </container>
            <block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
                <arguments>
                    <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                    <argument name="price_type_code" xsi:type="string">tier_price</argument>
                    <argument name="zone" xsi:type="string">item_view</argument>
                </arguments>
            </block>
            <container name="alert.urls" as="alert_urls" label="Alert Urls" after="product.price.tier"/>
            <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>
            <container name="product.info.extrahint" as="extrahint" label="Product View Extra Hint">
                <container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links">
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="Magento_Catalog::product/view/addto.phtml">
                        <block class="Magento\Catalog\Block\Product\View\AddTo\Compare" name="view.addto.compare" after="view.addto.wishlist"
                               template="Magento_Catalog::product/view/addto/compare.phtml" >
                            <arguments>
                                <argument name="addToCompareViewModel" xsi:type="object">Magento\Catalog\ViewModel\Product\Checker\AddToCompareAvailability</argument>
                            </arguments>
                        </block>
                    </block>
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.mailto" template="Magento_Catalog::product/view/mailto.phtml"/>
                </container>
            </container>
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.extrahint">
                <arguments>
                    <argument name="at_call" xsi:type="string">getShortDescription</argument>
                    <argument name="at_code" xsi:type="string">short_description</argument>
                    <argument name="css_class" xsi:type="string">overview</argument>
                    <argument name="at_label" xsi:type="string">none</argument>
                    <argument name="title" translate="true" xsi:type="string">Overview</argument>
                    <argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
                </arguments>
            </block>
        </container>
        <container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
            <block class="Magento\Framework\View\Element\Template" name="skip_gallery_after.target" before="skip_gallery_before.wrapper" template="Magento_Theme::html/skiptarget.phtml">
                <arguments>
                    <argument name="target_id" xsi:type="string">gallery-prev-area</argument>
                </arguments>
            </block>
            <container name="skip_gallery_before.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
                <block class="Magento\Framework\View\Element\Template" before="product.info.media.image" name="skip_gallery_before" template="Magento_Theme::html/skip.phtml">
                    <arguments>
                        <argument name="target" xsi:type="string">gallery-next-area</argument>
                        <argument name="label" translate="true" xsi:type="string">Skip to the end of the images gallery</argument>
                    </arguments>
                </block>
            </container>
            <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml">
                <arguments>
                    <argument name="gallery_options" xsi:type="object">Magento\Catalog\Block\Product\View\GalleryOptions</argument>
                    <argument name="imageHelper" xsi:type="object">Magento\Catalog\Helper\Image</argument>
                </arguments>
            </block>
            <container name="skip_gallery_after.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
                <block class="Magento\Framework\View\Element\Template" after="product.info.media.image" name="skip_gallery_after" template="Magento_Theme::html/skip.phtml">
                    <arguments>
                        <argument name="target" xsi:type="string">gallery-prev-area</argument>
                        <argument name="label" translate="true" xsi:type="string">Skip to the beginning of the images gallery</argument>
                    </arguments>
                </block>
            </container>
            <block class="Magento\Framework\View\Element\Template" name="skip_gallery_before.target" after="skip_gallery_after.wrapper" template="Magento_Theme::html/skiptarget.phtml">
                <arguments>
                    <argument name="target_id" xsi:type="string">gallery-next-area</argument>
                </arguments>
            </block>
        </container>
        <block class="Magento\Catalog\Block\Product\View\Details" name="product.info.details" template="Magento_Catalog::product/view/details.phtml" after="product.info.media">
            <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>
                    <argument name="at_label" xsi:type="string">none</argument>
                    <argument name="title" translate="true" xsi:type="string">Details</argument>
                    <argument name="sort_order" xsi:type="string">10</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Magento_Catalog::product/view/attributes.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">More Information</argument>
                    <argument name="sort_order" xsi:type="string">20</argument>
                </arguments>
            </block>
        </block>
        <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
            <arguments>
                <argument name="triggers" xsi:type="array">
                    <item name="compareProductLink" xsi:type="string">.action.tocompare</item>
                </argument>
            </arguments>
        </block>
    </referenceContainer>
    <referenceContainer name="content.aside">
        <block class="Magento\Catalog\Block\Product\ProductList\Related" name="catalog.product.related" template="Magento_Catalog::product/list/items.phtml">
            <arguments>
                <argument name="type" xsi:type="string">related</argument>
            </arguments>
            <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="related.product.addto" as="addto">
                <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                       name="related.product.addto.compare" as="compare"
                       template="Magento_Catalog::product/list/addto/compare.phtml"/>
            </block>
        </block>
        <block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="product.info.upsell" template="Magento_Catalog::product/list/items.phtml">
            <arguments>
                <argument name="type" xsi:type="string">upsell</argument>
            </arguments>
            <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="upsell.product.addto" as="addto">
                <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                       name="upsell.product.addto.compare" as="compare"
                       template="Magento_Catalog::product/list/addto/compare.phtml"/>
            </block>
        </block>
        <block class="Magento\Catalog\Block\Product\View\Additional" name="product.info.additional" as="product_additional_data"/>
    </referenceContainer>
    <referenceBlock name="product.info.addtocart">
        <block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons"/>
    </referenceBlock>
    <referenceBlock name="product.info.addtocart.additional">
        <block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons.additional"/>
    </referenceBlock>
    <referenceContainer name="content">
        <block
                class="Magento\Catalog\Block\Ui\ProductViewCounter"
                name="product_viewed_counter"
                template="Magento_Catalog::product/view/counter.phtml"/>
    </referenceContainer>
</body>

I want to make my product layout according to the given screenshot

enter image description here

Right now It is in this form

enter image description here

Thanks.

3

First of all, you need to change the existing catalog_product_view.xml in the theme, open it and change this top lines from:

<page layout="1/2/3column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
.......

to

<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    .......

remove sidebars from this layout file: like below:

<referenceContainer name="sidebar.main" remove="true"/>
<referenceContainer name="sidebar.additional" remove="true"/>

Now you will have an empty page with 2 columns and free space for adding new data.

|improve this answer|||||

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.