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>
3
  • Can you update your catalog_product_view.xml to your question? Nov 27, 2018 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 Nov 27, 2018 at 13:32
  • Can you check my answer? Nov 27, 2018 at 13:47

2 Answers 2

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

add 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>
11
  • Working but showing before the tabs section, not after. Nov 27, 2018 at 13:56
  • Can you update your xml file to the question so that I can understand? Nov 27, 2018 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. Nov 27, 2018 at 14:06
  • See my edit xml. Nov 27, 2018 at 14:16
  • How did you move your tabs to right column? That code is not there in the xml? Nov 27, 2018 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.

4
  • I tried but not showing anything. Nov 27, 2018 at 13:42
  • Updated my answer, check it. Nov 27, 2018 at 15:27
  • I want to show something after product.info.detail can i use this? Jan 17, 2020 at 15:38
  • Yes, you can use above, however, let me know if it doesn't help.. Jan 18, 2020 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.