I have a custom module that I'd like to insert a block into product page before the product name using Magento Luma theme. I added the following layout xml file into Vendor/Module/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.main">
            <block class="Vendor\Module\Block\Product\View\CustomBlock" name="product.info.custom_block" template="Vendor_Module::block.phtml" before="page.main.title" />
        </referenceContainer>
    </body>
</page>

However, the custom block appears at the end of product.info.main not before the product name. What I found is that luma is actually moving the page.main.title in own layout update vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="page.main.title" destination="product.info.main" before="-"/>
        ...
    </body>
</page>

I believe my update is not working because Magento is first parsing the layout updates from modules, and then from themes. So when my block is inserted there's no page.main.title to insert before, so it ends up at the end, and then Magento parses updates from theme inserting title in product.info.main

Is there a way of ensuring that my block shows in the correct place?

up vote 5 down vote accepted

You are missing just one line:

<?xml version="1.0"?>                                   
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>                                              
       <referenceContainer name="product.info.main">                                                                                                                            
           <block class="Goivvy\Custom\Block\Product\View\CustomBlock" name="product.info.custom_block" template="Goivvy_Custom::block.phtml" before="-" />
       </referenceContainer>                           
       <!-- add this line below  -->   
       <move element="product.info.custom_block" destination="product.info.main" before="page.main.title" />
   </body>                                             
</page>                                                 
  • Working Great till now – Shiv Singh Oct 22 at 18:48

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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