Add a custom block in Magento 2 on the product page after add to cart button
Product page plays a very important role in Magento 2 and showing the right information at the right spot could decide whether you get a sale or not.
Recently, I came across a situation where I was requested to add a custom block right after the add to cart button on the product page. Although this is not a difficult task for a Magento 2 developer, I thought it would be best to write this article so that anyone struggling to find a solution would find it helpful.
The easiest solution would be to
either use an existing widget or create a custom widget to add the custom block to one of the many pre-defined spots on the product page. However, what I am going to show here is not a widget. I will be showing you how to add a custom block using the
layout.xml
.
You can either a create a custom module, or you can simply add this new block using your theme.
<?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.addtocart">
<block class="Magento\Framework\View\Element\Template" name="product.info.custom_block" template="{Vendor}_{ModuleName}::catalog/product/view/custom_block.phtml">
</block>
</referenceContainer>
</body>
</page>
In a custom module add the above xml in the file {Vendor}/{ModuleName}/view/frontend/layout/catalog_product_view.xml
and if you don’t want to create an extra module, you can
simply add the code in Magento_Catalog/layout/catalog_product_view.xml
file of your theme. If your theme already has the file, add it just before the closing body tag.