For adding new tab on product page you need a custom module.
Vendor/Module
Esparks/CustomTab
Create a layout file in the module's directory, create a new file named:
catalog_product_view.xml
in the
app/code/Esparks/CustomTab/view/frontend/layout
directory.
Add the following code to it:
<?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=”test.tab” template=”Esparks_CustomTab::custom_tab.phtml” group=”detailed_info” > <arguments> <argument translate=”true” name=”title” xsi:type=”string”>Custom Tab</argument> </arguments> </block> </referenceBlock> </body> </page>
Code Description:
Here, we are creating a new block name “Custom Tab” and referencing it in “product.info.details” container. We’re setting the class and template for the block and also passing an argument named “Title” with the value “Custom Tab”.
Create a template file:
In the module’s directory create a new file named:
custom_tab.phtml
on the path:
app/code/Esparks/CustomTab/view/frontend/templates
Add the following code to it:
<?php $product = $block->getProduct(); ?> <p><?php echo $product->getData('custom_attributes'); ?></p>
<?php
$product = $block->getProduct();
?>
<p><?php echo $product->getData(‘customs_attributes’); ?></p>
Now run these commands
php bin/magento c:c
Now you need to create the attribute from admin panel and follow these steps:
First you need to create product Attributes from the admin panel.
1. Go to Admin Panel > Stores > Attributes > Product.
2-Press the Add New Attribute button.
3. Fill out the Attribute Properties section.
- Enter a Default Label of an attribute. It will be displayed on the admin panel.
- Choose a type of an attribute in theCatalog Input Type for Store Owner field. There are such available values here as:>Text Field, Text Area, Date,Yes/No, Select, Drop down, Price, Media Image, Fixed Product Tax, Visual Swatch,TextSwatch.
Select yes in Values Required field in order to make the attribute required for products. In this case, you won’t be able to save the product with this attribute if you don’t set its value.
4. Fill out the Advanced Attribute Properties section.
- Set theAttribute Code If you leave this field empty, the attribute code will automatically be generated from the default label.
- In Scope you choose a level the attribute will be edited on. As far as Magento 2 is a multilingual and multi-website platform it is better if it is the text field attribute to leave it on a Store viewlevel. In case attribute value doesn’t depend on site or language it will be wiser to choose Global
- Set a Default Value of an attribute. We pay your attention to the fact default value won’t be automatically set all existing products. It will be added only after the resaving of the product.
- In the Unique Value field set Yes, if you don’t want the same attribute value to be applied to different products, e.g. SKU attribute should be unique.
5. Manage Label Options (if applicable)
If you selected a Dropdown or Multiple Select input type, you need to configure the attribute’s options.
- Click on the “Manage Options” tab.
- Add each option by clicking on the “Add Option” button.
- Configure the option’s Label and Value.
6. Save the Attribute
Click on the “Save Attribute” button in the top right corner.
7. Assign Attribute to Attribute Set
After saving the attribute, you need to assign it to an attribute set.
- Go to “Stores” and select “Attribute Set” under the “Attributes” section.
- Choose the attribute set you want to assign the new attribute to.
- Drag and drop the attribute from the “Unassigned Attributes” section to the appropriate group in the “Groups” section.