How to create custom tab in product detail page in magento 2?

Spread the love

In this blog we’ll see how to add Custom tab add layout in product detail page in Magento 2.

we will create Custom module and follow below steps to add Custom tab on product detail page.

Step 1: Create register.php

app/code/Bluethinkinc/PdpCustomTab/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Bluethinkinc_PdpCustomTab',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Bluethinkinc_PdpCustomTab',

__DIR__

);

Step 2: Create module.xml

app/code/Bluethinkinc/PdpCustomTab/etc/module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="Bluethinkinc_PdpCustomTab" setup_version="1.0.0">
    </module>
</config>

<?xml version="1.0" ?>

</module>

</config>

Step 3: Create Index.php

app/code/Bluethinkinc/PdpCustomTab/Block/Index/Index.php

<?php
/**
 * Copyright © BluethinkInc All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Bluethinkinc\PdpCustomTab\Block\Index;

use Magento\Framework\Registry;
use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use Magento\Store\Model\StoreManagerInterface;

class Index extends Template
{
    /**
     * @var Registry
     */
    protected $registry;

    /**
     * @var StoreManagerInterface
     */
    protected $storeManager;

    /**
     * @param StoreManagerInterface $storeManager
     * @param Registry $registry
     * @param Context $context
     * @param array $data
     */

    public function __construct(
        StoreManagerInterface $storeManager,
        Registry $registry,
        Context $context,
        array $data = []
    ) {
        $this->storeManager  = $storeManager;
        $this->registry  = $registry;
        parent::__construct($context, $data);
    }
    /**
     * Get Section Title
     */
    public function getSectionTitle()
    {
        $data='Custom Tab';
        return $data;
    }
}
?>

<?php

/**

* See COPYING.txt for license details.

namespace Bluethinkinc\PdpCustomTab\Block\Index;

use Magento\Framework\Registry;

use Magento\Framework\View\Element\Template;

use Magento\Framework\View\Element\Template\Context;

use Magento\Store\Model\StoreManagerInterface;

class Index extends Template

{

/**

* @var Registry

protected $registry;

/**

* @var StoreManagerInterface

protected $storeManager;

/**

* @param StoreManagerInterface $storeManager

* @param Registry $registry

* @param Context $context

* @param array $data

public function __construct(

StoreManagerInterface $storeManager,

Registry $registry,

Context $context,

array $data = []

) {

$this->storeManager = $storeManager;

$this->registry = $registry;

parent::__construct($context, $data);

}

/**

* Get Section Title

public function getSectionTitle()

{

$data='Custom Tab';

return $data;

}

Step 4: Create catalog_product_view.xml

app/code/Bluethinkinc/PdpCustomTab/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © BluethinkInc All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceBlock name="product.info.details">
           <block class="Bluethinkinc\PdpCustomTab\Block\Index\Index" name="catalog.product.list.bluethinkinc.pdpcustomtab" as="bluethinkinc_product_pdpcustomtab" template="Bluethinkinc_PdpCustomTab::customtab.phtml" group="detailed_info" cacheable="false">
               <arguments>
                   <argument name="title" xsi:type="string">Custom Tab</argument> 
                    <argument name="sort_order" xsi:type="string">50</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<body>

<argument name="title" xsi:type="string">Custom Tab</argument>

</arguments>

</block>

</referenceBlock>

</body>

</page>

Step 5: Create customtab.phtml

app/code/Bluethinkinc/PdpCustomTab/view/frontend/templates/customtab.phtml

<div class="questionanswertab">
<?php
/**
 * Copyright © BluethinkInc All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Framework\Escaper $escaper */
/** @var \Bluethinkinc\PdpCustomTab\Block\Index\Index $block */
?>
<h1>My New Tab</h1>
</div>