Is it possible to add custom tab in product page remains in custom module(with out changing template of theme). if it's not possible help me in extending template of theme to adding custom tab in product page.

2 Answers 2


Yes its possible through your module instead of write code in theme file.

In Magento 2 to apply the new tab in product detail page is very easy task. Use below steps and check it out. It will display the tab in your theme.

  1. Create file catalog_product_view.xml in the app/design/frontend/{vender name}/{theme name}/Magento_Catalog/layout

In the file write the below code:

<?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">
        <referenceBlock name="product.info.details">
          <block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="product/view/delivery_info.phtml" group="detailed_info" >
                <argument translate="true" name="title" xsi:type="string">Product Question</argument>
  1. create the file delivery_info.phtml in the path app/design/frontend/{vender name}/{theme name}/Magento_Catalog/templates/product/view.

In the file you can write any content or you can call the static block like this

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('delivery_info')->toHtml(); ?>
  1. delivery_info block we have to create in admin side Content/Block.

run php bin/magento cache:clean

Now check in the Detail page.


Yes its possible you can do the same like this :


<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="demotab">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Custom Tab</item>
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="sortOrder" xsi:type="number">15</item>
    <container name="fieldname_container" >
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">160</item>
        <htmlContent name="html_content_demo">
            <argument name="block" xsi:type="object">Vendor\ModuleName\Block\Adminhtml\Catalog\Product\Edit\Tab\Form</argument>



namespace Vendor\ModuleName\Block\Adminhtml\Catalog\Product\Edit\Tab;

class Form extends \Magento\Backend\Block\Template
     * Block template
     * @var string
    protected $_template = 'Vendor_ModuleName::product/edit/customTab.phtml';

 * @var \Magento\Catalog\Block\Adminhtml\Category\Tab\Product
protected $blockGrid;

 * Grid constructor.
 * @param \Magento\Backend\Block\Template\Context $context
 * @param array $data
public function __construct(
    \Magento\Backend\Block\Template\Context $context,
    array $data = []
) {
    parent::__construct($context, $data);

 * Retrieve instance of grid block
 * @return \Magento\Framework\View\Element\BlockInterface
 * @throws \Magento\Framework\Exception\LocalizedException
public function getBlockGrid()
    if (null === $this->blockGrid) {
        $this->blockGrid = $this->getLayout()->createBlock(
    return $this->blockGrid;

public function getGridHtml()
    return $this->getBlockGrid()->toHtml();

I have added the grid so I used the Grid class in the above block.You can modify it according to your need

Your Answer

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

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