1

I want to show custom content on product page below the tabs section.

Basically I moved tabs and related product section in product info main area (right side) and now I want to add a custom content after tabs.

How to create a new .phtml file and call after tabs? Thanks

enter image description here

Edit

<body>
     <referenceBlock name="product.price.final" remove="true"/>
     <move element="product.info.stock.sku" destination="product.info.main" before="page.main.title" />
     <move element="breadcrumbs" destination="product.info.stock.sku" before="-" />
     <move element="product.info.social" destination="product.info.media" after="-" />
    <move element="product.info.details" destination="product.info.main" after="product_options_wrapper_bottom"/>
    <move element="catalog.product.related" destination="product.info.main" after="product_options_wrapper_bottom"/>
<referenceContainer name="product.info.main">
        <block class="Magento\Catalog\Block\Product\View" name="custom" after="product.info.details" template="product/view/giftitems.phtml"/>
    </referenceContainer>
</body>
|improve this question
  • Can you update your catalog_product_view.xml to your question? – Sukumar Gorai Nov 27 '18 at 13:31
  • You have to overwrite catalog_product_view.xml file into your design folder and add new block to display your html content – Vignesh Bala Nov 27 '18 at 13:32
  • Can you check my answer? – Sukumar Gorai Nov 27 '18 at 13:47
2

Create a file with name catalog_product_view.xml under below path:

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog/product/view.xml

with content:

<?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="Magento\Catalog\Block\Product\View" name="custom" after="product.info.details" template="product/view/text.phtml"/>
        </referenceContainer>
    </body>
</page>

Now create one file with name text.phtml under below path:

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/text.phtml

with content:

<?= __('Custom Text') ?>
<?php $_product = $block->getProduct(); //You can also use current product object by this code if needed. ?>

EDIT:

<body>
<referenceBlock name="product.price.final" remove="true"/>
<move element="product.info.stock.sku" destination="product.info.main" before="page.main.title" />
<move element="breadcrumbs" destination="product.info.stock.sku" before="-" />
<move element="product.info.social" destination="product.info.media" after="-" />
<move element="product.info.details" destination="product.info.main" after="product.info.overview"/>
<move element="catalog.product.related" destination="product.info.main" after="product.custom"/>

<referenceContainer name="product.info.main">
<block class="Magento\Catalog\Block\Product\View" name="product.custom" after="product.info.details" before="catalog.product.related" template="product/view/giftitems.phtml"/>
</referenceContainer>
</body>
|improve this answer
  • Working but showing before the tabs section, not after. – Shoaib Saleem Nov 27 '18 at 13:56
  • Can you update your xml file to the question so that I can understand? – Sukumar Gorai Nov 27 '18 at 13:57
  • I am not asking to update my given xml, I am asking to update your catalog_product_view.xml on which you have moved the tab section to right. – Sukumar Gorai Nov 27 '18 at 14:06
  • See my edit xml. – Shoaib Saleem Nov 27 '18 at 14:16
  • How did you move your tabs to right column? That code is not there in the xml? – Sukumar Gorai Nov 27 '18 at 14:18
0

Add catalog_product_view.xml in your custom theme at below path and content:

app/design/frontend/{{package}}/{{theme}}/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" 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="Magento\Catalog\Block\Product\View" name="custom-text" template="product/view/custom.phtml" after="product.info.details"/>
        </referenceContainer>
    </body>
</page>

Add file custom.phtml at path

app/design/frontend/{{package}}/{{theme}}/Magento_Catalog/templates/product/view/custom.phtml

with required text/code.

|improve this answer
  • I tried but not showing anything. – Shoaib Saleem Nov 27 '18 at 13:42
  • Updated my answer, check it. – Himmat Paliwal Nov 27 '18 at 15:27
  • I want to show something after product.info.detail can i use this? – jibin george Jan 17 at 15:38
  • Yes, you can use above, however, let me know if it doesn't help.. – Himmat Paliwal Jan 18 at 8:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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