I am trying to move the product title above the image.gallery
but I cannot figure out how the XML file should be set up.
I am editing in the catalog_product_view.xml
file.
The main page title div is: page.main.title
. The image placeholder has 2 class options: gallery-placeholder
and fotorama-item
or fotorama
.
<move element="page.main.title" destination="product.media" before="gallery-placeholder"/>
When I place it as the above line it doesn't display the title of the product anymore:
<!--
/**
* Copyright © 2016 SW-THEMES. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Magento_Catalog::js/jquery.zoom.min.js"/>
</head>
<body>
<move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
<move element="product.info.review" destination="product.info.main" before="product.info.price"/>
<move element="catalog.product.related" destination="sidebar.additional" after="product_view_custom_block"/>
<move element="product.info.overview" destination="product.info.main" after="product.info.review"/>
<referenceContainer name="after.body.start">
<block class="Magento\Catalog\Block\Product\View" name="product_custom" template="Magento_Catalog::product/view/product_custom.phtml" before="-"/>
<block class="Smartwave\Porto\Block\Template" name="product_view_config" after="-" template="Magento_Catalog::product/view/config.phtml"/>
</referenceContainer>
<referenceContainer name="columns.top">
<block class="Magento\Catalog\Block\Product\View" name="prev_next_products" template="Magento_Catalog::product/view/prev_next.phtml" before="-"/>
</referenceContainer>
<move element="prev_next_products" destination="product.info.main" before="-"/>
<move element="page.main.title" destination="product.media" before="gallery-placeholder"/>
<referenceContainer name="product.info.social">
<block class="Smartwave\Porto\Block\Template" name="product_view_addthis_links" after="-" template="Magento_Catalog::product/view/addthis.phtml"/>
</referenceContainer>
<referenceContainer name="content">
<block class="Smartwave\Porto\Block\RickSnippet" name="rich_snippet" template="Magento_Catalog::product/view/rich_snippet.phtml" before="-"/>
<block class="Smartwave\Porto\Block\Template" name="product_view_main_custom_block" before="product.info.main" template="Magento_Catalog::product/view/main_custom_block.phtml"/>
<block class="Smartwave\Porto\Block\Template" name="product_view_main_custom_block2" after="-" template="Magento_Catalog::product/view/main_custom_block2.phtml"/>
</referenceContainer>
<move element="product_view_main_custom_block2" destination="product.info.main" after="product.info.overview"/>
</body>
</page>
This is my XML page layout.
My goal is to move the product title and review part above the image gallery: