Question

I would like to edit the details tab with the description and also include the product attributes under details in order to make them immediately visible without having to change the tab, as in the image below.

enter image description here

How can I do to make this change, which files should I edit?

Thank you

Was it helpful?

Solution 2

Well, I believe I have solved it. I was inspired by this post: How to add my custom product attribute in Description Tab?

First I created a new .phtml file that contained all the attributes and the description, the data was taken from the attibute.phtml, attributes.phtml and description.phtml files. So I created the attributes-description.phtml file, which I placed in my template folder: Magento_Catalog / templates / product / view

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis

/**
 * Product additional attributes template
 *
 * @var $block \Magento\Catalog\Block\Product\View\Attributes
 */
?>
<?php
    $_helper = $this->helper(Magento\Catalog\Helper\Output::class);
    $_product = $block->getProduct();
    
    if (!$_product instanceof \Magento\Catalog\Model\Product) {
    return;
}

$_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);
}

?>

<div class="row">
<div class="col-md-6 att">
    <?php if ($_additional = $block->getAdditionalData()) :?>
    <div class="additional-attributes-wrapper table-wrapper">
        <table class="data table additional-attributes" id="product-attribute-specs-table">
            <!--<caption class="table-caption"><?= $block->escapeHtml(__('More Information')) ?></caption> -->
            <tbody>
            <?php foreach ($_additional as $_data) :?>
                <tr>
                    <th class="col label" scope="row"><?= $block->escapeHtml($_data['label']) ?></th>
                    <td class="col data" data-th="<?= $block->escapeHtmlAttr($_data['label']) ?>"><?= /* @noEscape */ $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
<?php endif;?>
</div>
<div class="col-md-18 des float-right">
<?= /* @noEscape */ $this->helper(Magento\Catalog\Helper\Output::class)->productAttribute(
    $block->getProduct(),
    $block->getProduct()->getDescription(), 'description',
) ?>
</div>
</div>

Then I changed the file to layout: catalog_product_view.xml

<!-- add below -->
<referenceContainer name="content">
    <referenceBlock name="product.info.details">
        <referenceBlock name="product.info.attributes" remove="true"/>
        <block class="Magento\Catalog\Block\Product\View\Attributes" name="info" template="Magento_Catalog::product/view/attributes-description.phtml" group="detailed_info">
            <arguments>
                <argument name="at_call" xsi:type="string">getAttributes</argument>
                <argument name="at_code" xsi:type="string">attributes</argument>
                <argument name="css_class" xsi:type="string">attributes</argument>
                <argument name="at_label" xsi:type="string">none</argument>
                <argument name="title" translate="true" xsi:type="string">Details</argument>
            </arguments>
        </block>
        <referenceBlock name="product.info.description" remove="true" />
        <referenceBlock name="product.attributes" remove="true" />
    </referenceBlock>
</referenceContainer>

<!-- end -->

the result was this:

enter image description here

Please, to be sure tell me if there is any error in formatting the phtml and xml codes?

Thank you

OTHER TIPS

Please cn you add this file in your design and modify accrodingly

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/attribute.phtml

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top