From landing on a product page to completing the whole buying cycle, product page plays a vital role in conversion. Hence the product page must be designed in such a way that can provide enough information prior to making a purchase, impress the visitors, push them for conversion and be customer friendly for online purchases!
You may sometimes need to tweak the default Magento 2 product page a bit here and there. You may want to add a little notice that you want your customer to see before adding the product to cart or may want to convey essential details before they proceed to checkout! To serve the purpose, you need to add block before Add to Cart button in Magento 2 product page. Use the below code the right way and you are done!
Method to Add Block Before Add to Cart Button in Magento 2 Product Page:
- Add the below code in your catalog_product_view.xml file at Vendor\Extension\view\frontend\layout
<?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>
<referenceBlock name="product.info.form.content">
<block class="Vendor\Extension\Block\Catalog\Product\View" name="catalog.product.view.extrablock"
as="extra_options" before="product.info.addtocart" template="Vendor_Extension::catalog/product/view.phtml"/>
</referenceBlock>
</body>
</page>
- Create new view.phtml file at Vendor\Extension\view\frontend\templates\catalog\product
<h2>
new block call
</h2>
- Create View.php file at Vendor\Extension\Block\Catalog\Product
<?php
namespace Vendor\Extension\Block\Catalog\Product;
use Magento\Catalog\Block\Product\Context;
use Magento\Catalog\Block\Product\AbstractProduct;
class View extends AbstractProduct
{
public function __construct(Context $context, array $data)
{
parent::__construct($context, $data);
}
}
That was all!
Another amazing thing you can do while customizing the product page is to use custom price template in Magento 2 to change the way prices are displayed to the customers.
Ain’t the tutorial an easy-to-follow type?
Thank you!
