Magento 2 Add custom block to Product Detail Page, between product gallery and detail tab

magento.stackexchange https://magento.stackexchange.com/questions/322271

Question

I want to add a custom block to show some text between the product gallery and the description.

What is the best practice to do this, do I need to create my own module? and how do I override the layout XML file?

The marked yellow area is where I want my own text to be displayed.

enter image description here

Was it helpful?

Solution

There are 2 options you can put your xml file inside your theme or you can add file in your custom module. If you have theme then you don't need to create any custom module to add custom block only. But if you don't have any theme and you're using luma theme then you can create your own module and you can add files there.

1. Using theme

Create your XML file here on this location...

app/design/frontend/VendorName/ThemeName/Magento_Catalog/layout/catalog_product_view.xml

Content for this file is..

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
      <referenceContainer name="content">
         <block class="Magento\Framework\View\Element\Template" name="catalog.product.view.custom" template="Namespace_ModuleName::filename.phtml" before="product.info.details" />
      </referenceContainer>
    </body>
</page>

After that you have to create one template file here

app/design/frontend/VendorName/ThemeName/Magento_Catalog/templates/filename.phtml

Content

<div class="custom-block">
    <?php echo "Custom Block"; ?>
</div>

<style type="text/css">
    .custom-block {
        clear: both;
        margin-bottom: 30px;
    }
</style>

2. Using module

Using your custom module you need to create above 2 files on below location, you can use above same content for both files.

app/code/Namespace/ModuleName/view/frontend/layout/catalog_product_view.xml

And

app/code/Namespace/ModuleName/view/frontend/templates/filename.phtml

After adding above file just run below command once

php bin/magento cache:flush

Output:

enter image description here

Hope this will help you!

OTHER TIPS

Using Module

catalog_product_view.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
      <referenceContainer name="product.info.media">
         <block class="Magento\Framework\View\Element\Template"
               name="custom_phtml"
               template="Vendorename_Modulename::customfile.phtml"
               cacheable="false"
               after="-"
               />
      </referenceContainer>
    </body>
</page>

The best practise for this would be to add a new block reference into your catalog_product_view.xml file inside your custom theme.

To do this, you must first create your own theme (if you haven't already got one), or edit the existing files inside your theme.

To create a new theme, refer to Magento 2 documentation. It's just a few files that are required to get you started. https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-create.html

Inside your theme (vendor/theme/), Create the folder structure 'Magento_Catalog > layout > catalog_product_view.xml

Inside this file, add the following code:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
      <referenceContainer name="content">
         <block name="name" template="Magento_Catalog::filename.phtml" before="product.info.details" />
      </referenceContainer>
    </body>
</page>

Note that the 'name' of the block should be named appropriately regarding what it is and the template should be a path to the custom block contents. If the file is being referenced as the above, you must create a 'templates' folder inside the Magento_Catalog folder and then place it inside that. e.g. Magento_Catalog > templates > filename.phtml

Also notice that we are specifying before="product.info.details". this is saying that the new block should be placed before this container. You can find the container/block names of existing elements by going into the correct XML file inside: vendor/magento/module.. I'd strongly suggest looking into some Magento developer tools as many of these help you easily find container/block names, and lots of other helpful things, without the need to constantly look into the vendor folder.

  1. MgtCommerce Developer Toolbar - https://github.com/mgtcommerce/Mgt_Developertoolbar
  2. Advanced Template Hints -
    https://github.com/ho-nl/magento2-Ho_Templatehints
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top