Magento 2.1 Product Page – Add Custom Product Tab Like Details Tab

magento-2.1product-attributeproduct-tag

I have created attributes like features and specification for product. Can anyone guide me how to show these attributes below details tab on product page.
I'm using magento 2.1 with molly theme.Please refer the image.

Best Answer

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.

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">
    <body>      
        <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" >
        <arguments>
        <argument translate="true" name="title" xsi:type="string">Product Question</argument>
        </arguments>
        </block>
        </referenceBlock>
    </body>
</page>

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(); ?>

delivery_info block we have to create in admin side Content/Block.

Now check in the Detail page.

Related Solutions

Magento 1.9 – How to Show Image by Product Attribute Value on Product Page

Create or replace with the below content and put it in app\design\frontend\Your-Package\Your-theme\template\catalog\product\view\attributes.phtml

Also make logo named as CE.png,CLASSE II.png, ENEC.png, F.png, IP20.png and place it in skin\frontend\Your-Package\Your-theme\images

<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct()
?>
<?php if ($_additional = $this->getAdditionalData()): ?>
    <h2><?php echo $this->__('Additional Information') ?></h2>
    <table class="data-table" id="product-attribute-specs-table">
        <col width="25%" />
        <col />
        <tbody>
            <?php foreach ($_additional as $_data): ?>
                <tr>
                    <th class="label"><?php echo $this->escapeHtml($this->__($_data['label'])) ?></th>
                    <?php if ($_data['code'] == "certification_mark"): ?>
                        <?php $values = explode(',', $_helper->productAttribute($_product, $_data['value'], $_data['code'])); ?>
                        <td class="data">
                            <?php foreach ($values as $value): ?>
                                <div style="float:left;"><img src="<?php echo $this->getSkinUrl("certification_marks/" . trim($value) . ".jpg") ?>"></div>
                            <?php endforeach; ?>
                        </td>
                    <?php endif; ?>
                    <?php if ($_data['code'] != "certification_mark" ): ?>
                        <td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
                    <?php endif; ?>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
    <script type="text/javascript">decorateTable('product-attribute-specs-table')</script>
<?php endif; ?>

It is working for me. Let me know once you tried it.

Magento – Magento 2 – Add text before description in product details tab

vendor/magento/module-catalog/view/frontend/templates/product/view/attribute.phtml

You can override this file in your custom theme and add the custom attribute text before details tab content.

app/design/frontend/VendorName/ThemeName/Magento_Catalog/templates/product/view/attribute.phtml

I have added custom_attribute attribute in my local project and working fine. You can get custom attribute value like this : $_product->getCustomAttribute();

<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_call = $block->getAtCall();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();

$renderLabel = true;
// if defined as 'none' in layout, do not render
if ($_attributeLabel == 'none') {
    $renderLabel = false;
}

if ($_attributeLabel && $_attributeLabel == 'default') {
    $_attributeLabel = $_product->getResource()->getAttribute($_code)->getStoreLabel();
}
if ($_attributeType && $_attributeType == 'text') {
    $_attributeValue = ($_helper->productAttribute($_product, $_product->$_call(), $_code)) ? $_product->getAttributeText($_code) : '';
} else {
    $_attributeValue = $_helper->productAttribute($_product, $_product->$_call(), $_code);
}
?>
<?php if ($_attributeValue): ?>
    <?php /** This will display custom attribute value **/ ?>
    <?php if ($_code == 'description') : ?>
        <?php echo $_helper->productAttribute($_product, $_product->getCustomAttribute(), 'custom_attribute'); ?>
    <?php endif; ?>

    <?php if ($renderLabel): ?><strong class="type"><?= /* @escapeNotVerified */ $_attributeLabel ?></strong><?php endif; ?>
    <div class="value" <?= /* @escapeNotVerified */ $_attributeAddAttribute ?>><?= /* @escapeNotVerified */ $_attributeValue ?></div>
</div>
<?php endif; ?>

Please clear cache after changing the file. hope this is helpful.

Best Answer

Related Solutions

Magento 1.9 – How to Show Image by Product Attribute Value on Product Page

Magento – Magento 2 – Add text before description in product details tab

Related Topic