I want to add custom div after add to cart button on single product page in Magento 2

I am creating a custom extension for Magento 2. Currently i want to show custom div on single product page under Details tab. How to achieve this ? can someone please give me tutorial or reference or guide me how to accomplish this in extension. I am adding image for better clarification. enter image description here

Answers 2

  • use below file in your custom extension or theme

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

    create file in your module

    vendorname/modulename/view/frontend/templates/product/view/attribute.phtml
    

    Next create this file

    vendorname/modulename/view/frontend/layout/catalog_product_view.xml
    

    add below line of code on it.

    <referenceBlock class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="vendorname_modulename::product/view/attribute.phtml" group="detailed_info">
              
    

    will be like

    <?xml version="1.0"?>
    <!--
    /**
     * Copyright © Magento, Inc. 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>
            <css src="mage/gallery/gallery.css"/>
        </head>
        <body>
           <referenceBlock class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="vendorname_modulename::product/view/attribute.phtml" group="detailed_info">
           </referenceBlock>
        </body>
    </page>
    

  • USING CUSTOM THEME

    Go to /app/vendor/magento/module-catalog/view/frontend/templates/product/view/

    Copy the file attributes.phtml into you custom theme under the following directory

    Magento_Catalog\templates\product\view
    

    Now change the file according to your needs, here is an example :)

    <?php
        $_helper = $this->helper(Magento\Catalog\Helper\Output::class);
        $_product = $block->getProduct();
    ?>
    <?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;?>
    <?= 'HELLO WORLD' ?>
    

    USING CUSTOM MODULE

    Copy the file:

    app\code\magento\vendor\magento\module-catalog\view\frontend\layout\catalog_product_view.xml

    into

    app\code\vendor\module\view\frontend\layout\

    replace the line:

    <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Magento_Catalog::product/view/attributes.phtml" group="detailed_info">
    

    with

    <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Vendor_Module::product/view/attributes.phtml" group="detailed_info">
    

    Copy

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

    to

    app\code\vendor\module\view\frontend\templates\product\view\


Related Questions