Magento – Move page.title above image placeholder

layoutmagento-2.1xml

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:

Page layout

Best Answer

try changing your destination to product.info.media instead of product.media and add before product.info.media.image. Your code will be

<move element="page.main.title" destination="product.info.media" before="product.info.media.image"/>
Related Topic