How to Add Block Before Add to Cart Button in Magento 2 Product Page
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
123456789<?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
123<h2>new block call</h2> - Create View.php file at Vendor\Extension\Block\Catalog\Product
123456789101112<?phpnamespace 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? 😃
However, you may point out your doubts in the Comments section below and I’d be happy to help 😊
Thank you!
1 Comment
Thanks for posting this useful tutorial
Well, I think it would be more great if you can share the screenshot of the desired result at the bottom of the guide.