Magento 2.3.5-p2 how to show custom block before product.info.details and after media ? enter image description here

<div class="product-info-main"></div>
<div class="product media"></div>
<div class="custom_block"></div> **//we want to show custom block section here**
<div class="product info detailed"></div>

I am trying like that

 <referenceContainer name="main">
            <container name="custom.info" htmlTag="div" htmlClass="custom_block" />
        <block class="Custim\Block\Block\Custom" name="product_page_custom"  template="custom.phtml" />
        <move element="product_page_custom" destination="custom.info" before="catalog.product.related"/>

it is creating a new section after product.info.details(after upsell)

<div class="block upsell" data-limit="0" data-shuffle="0"></div>
<div class="custom_block"></div>

Does anyone know how to do it?

3 Answers 3


Try with

<move element="product_page_custom" destination="custom.info" after="product.info.media"/>
  • i tried that way but it is not working Mar 15, 2021 at 15:32

This will place the block after product media and before product info/details

    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" after="product.info.media" name="product-test" template="Gaiterjones_Page::testproductblock.phtml"/>


<div style="clear: both;" id="testproductblock">
    <pre>block class="Magento\Framework\View\Element\Template" after="product.info.media" name="product-test" template="Gaiterjones_Page::testproductblock.phtml"</pre>
  • it is showing after product.info.details but before product upsell,we want to show before product.info.details. Mar 15, 2021 at 15:40
  • I updated the answer, you can see it working here : magento2.gaiterjones.com/en/affirm-water-bottle.html
    – paj
    Mar 15, 2021 at 16:21
  • it is showing after media it showing left side half section not full section Mar 16, 2021 at 13:47
  • use css "clear: both" as in my example.
    – paj
    Mar 16, 2021 at 15:00
  • can we do without css?is it possible to use XML Mar 16, 2021 at 15:52

Create your custom.phtml here is the path

app/design/frontend/{{YOUR THEME NAME HERE}}/default//Magento_Catalog/templates/custom.phtml

After add XML

<referenceContainer name="content">
            <container name="custom.block" htmlTag="div" htmlClass="custom-block" before="product.info.details">
                <block class="Magento\Framework\View\Element\Template" name="product.page.custom" template="Magento_Catalog::custom.phtml" after="-" />

Also add below css

.custom-block {
    clear: both;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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