cancel
Showing results for 
Search instead for 
Did you mean: 

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

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. 
I have already try with this solution but i think i am doing something wrong.

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/attributes.phtml

Next create this file

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

add below line of code on it.

<block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="vendorname_modulename::product/view/attributes.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>
      <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="vendorname_modulename::product/view/attributes.phtml" group="detailed_info">
    </body>
</page>
2 REPLIES 2

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

I found Some Usefull Links Which will work for you :

First Method : (Overriding the Layout File in Custom Extension)
https://magecomp.com/blog/add-block-add-cart-button-magento-2-product-page/

Second Method : (Overriding phtml in Theme)
https://magento.stackexchange.com/questions/267602/how-to-add-another-add-to-cart-button-in-product-... 

Problem Solved !!
Click on 'Kudos' & Accept as Solution to encourage to write more answers !

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

You can try these step to add custom phtml on product view page after add to cart button 

Step 1: 

Need to create catalog_product_view.xml  at the path :
Vendor/Module/view/frontend/layout/catalog_product_view.xml

<?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>
<move element="product.info.custom" destination="product.info.options.wrapper.bottom" after="-"/>
<referenceContainer name="content">
<block class="Magento\Catalog\Block\Product\View" name="product.info.custom" template="Vendor_Module::custom.phtml" />
</referenceContainer>
</body>
</page>

 Step 2:  need to add file add template file 
Vendor/Module/view/frontend/templates/custom.phtml

<?php
/* @var $block /Magento\Catalog\Block\Product\View*/
$product = $block->getProduct();
?>
<div class="product attribute custom">
   this is your div
</div>

Step 3:  run php bin/magento c:f