Hi everyone, today I will show you how to add custom tab in product page in Magento 2

Step 1. Add new attribute.

Go to your Admin > Stores > Attributes > Product.

Now click on Add new attribute.

Set Default label as magepow and Attribute Code as magepow. Now click on Save Attribute.

We can see magepow attribute in list bellow

Step 2. Select or create attribute set.

Go to your Admin > Stores > Attributes > Attribute Set.

Drag and drop attribute magepow

Step 3. Configure Product Page

Now you can see the new attribute magepow on product edit page, updated the attribute set and click on save

Step 4. Create layout file.

In app/code/Magepow/CustomTab/view/frontend/layout, create catalog_product_view.xml and add the following code in the file:

<?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>
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View" name="magepow.tab" template="Magepow_CustomTab::custom_tab.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Step 5. Create template file.

In app/code/Magepow/CustomTab/view/frontend/templates, create custom_tab.phtml and add the following code in the file:

<?php
$product = $block->getProduct();
?>
<h1><?php echo $product->getData('magepow'); ?></h1>

Step 6. Create registration.php file.

In app/code/Magepow/CustomTab, create registration.php and add the following code in the file:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magepow_CustomTab',
    __DIR__
);

Step 7. Create module.xml file.

In app/code/Magepow/CustomTab/etc, create module.xml and add the following code in the file:

<?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="Magepow_CustomTab" setup_version="1.0"/>
</config>

Then run a command to install this extension:

php -d memory_limit=4048M bin/magento setup:upgrade && php -d memory_limit=4048M bin/magento setup:static-content:deploy -f && php -d memory_limit=4048M bin/magento cache:clean && php -d memory_limit=4048M bin/magento cache:flush

Go to you store font and check the result.

If your website is having problems, please leave a comment below or contact us at Magepow Contact, the Magepow technician team will assist in solving your problem quickly. Thanks.

Hope this article will helpful for you!


Leave a Reply

Your email address will not be published. Required fields are marked *

Trending