Magento 2: change the order of the product page blocks

by Razvan Zamfir   Last Updated December 07, 2017 11:09 AM

I am working on a Magento 2.1.7 shop and I have created a child-theme of Magento Blank.

On the product page, I need to change the layout so that the product photo stays at the left side of the page and the product info at the right, with both div's floated left. This means that, in the markup, the order of the divs has to be changed from:

<div class="col-xs-12 col-sm-12">
  <div class="product-info-main"></div>
  <div class="product media"></div>
</div>

to:

<div class="col-xs-12 col-sm-12">
  <div class="product media"></div>
  <div class="product-info-main"></div>
</div>

The catalog_product_view.xml looks like this:

<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="div.sidebar.main" remove="true" />
    <referenceContainer name="main" htmlClass="col-xs-12 col-sm-12">
    </referenceContainer>
</page>

How must I change the code above and/or what other files shall I edit to get the desired result?



Answers 1


Just add this code in before body end in catalog_product_view.xml

 <move element="product.info.media" destination="content" before="product.info.main"/>

I have tested this its working !!

Mukesh Prajapati
Mukesh Prajapati
December 07, 2017 10:37 AM

Related Questions



magento 1.9x layout setting - single product page

Updated July 06, 2016 08:03 AM

Magneto 2 : Call custom block html in breadcumbs

Updated March 21, 2016 08:03 AM

Show product of a category in a custom page

Updated March 20, 2016 08:03 AM