Magento 2 – How to Move Additional Product Attributes to Details Tab

designmagento2producttabstemplate

In Blank theme, attributes other than description display under More information tab.
In my theme, I want to move attributes from More Information to Details tab.

Example:
Details tab contains description. More information tab contains color and brand.

How to move only color attribute from More information to Details tab?

How to move both color and brand attributes and remove More information tab?

Best Answer

First of all u need to create ur theme http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html

In your theme u have to override Magento Default files.

magento\app\design\frontend\Custom\YourTheme\Magento_Catalog\layout\catalog_product_view.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 SW-THEMES. 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">
    <head>
        <script src="Magento_Catalog::js/jquery.zoom.min.js"/>
    </head>
    <body>
        <referenceBlock name="product.attributes" remove="true"/>
    </body>
</page>

magento\app\design\frontend\Custom\YourTheme\Magento_Catalog‌​\templates\product\v‌​iew\attribute.phtml as per your requirement. 

   /**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Product view template
 *
 * @see \Magento\Catalog\Block\Product\View\Description
 */
?>
<?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();

if ($_attributeLabel && $_attributeLabel == 'default') {
    $_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
if ($_attributeType && $_attributeType == 'text') {
    $_attributeValue = ($_helper->productAttribute($_product, $_product->$_call(), $_code)) ? $_product->getAttributeText($_code) : '';
} else {
    $_attributeValue = $_helper->productAttribute($_product, $_product->$_call(), $_code);
}

$colorValue = $_product->getResource()->getAttribute('color')->getFrontend()->getValue($_product);

?>
<?php if ($colorValue): ?>
    <div><?php echo $colorValue; ?></div>
<?php endif; ?>

<?php if ($_attributeValue): ?>
<div class="product attribute <?php /* @escapeNotVerified */ echo $_className?>">
    <?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php /* @escapeNotVerified */ echo $_attributeLabel?></strong><?php endif; ?>
    <div class="value" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?>><?php /* @escapeNotVerified */ echo $_attributeValue; ?></div>
</div>
<?php endif; ?>

Display as per your design requirement.

Let me know if any issue.

Thanks

Related Topic