How to Add Custom Text or HTML on Product Page Using Plugin in Magento 2

An E-commerce store’s core strength is the product it offers. The presentation of the product can make or break a sale.

A product page is where the potential customers spent their maximum time before making the purchase. Also, it is the product page that gets shared the maximum number of times.

Hence, the product page must be designed strategically to attract more customers and improve sales. The default Magento 2 product page may fall short to fulfill the business requirements related to the product page design.

One may want to customize the product page by adding custom links, notification messages, additional functionalities, etc.

For example, you may want to offer the gift wrapping facility at an additional cost along with the product purchase, or you may want to display a custom notification bar.

It can be done easily with the programmatic solution to add custom text or HTML on product page using plugin in Magento 2.

Use the below solution to add any custom checkboxes, links, messages, etc. in your product page using plugin in Magento 2 store.

Enhance the product page design and enjoy higher conversion rates!

Steps to Add Custom Text or HTML on Product Page Using Plugin in Magento 2

1. 1. Create di.xml at app/code/Vendor/Module/etc/frontend and use the below code.
      
      <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Catalog\Block\Product\View"> <plugin name="custom-text" type="Vendor\Module\Plugin\Catalog\Block\Product\View"/> </type> </config>

      1 2 3 4 5 6 7

      <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">     <type name="Magento\Catalog\Block\Product\View">         <plugin name="custom-text" type="Vendor\Module\Plugin\Catalog\Block\Product\View"/>     </type> </config>

   2. Create View.php at app/code/Vendor/Module/Plugin/Catalog/Block/Product and follow the below code.
      
      <?php namespace Vendor\Module\Plugin\Catalog\Block\Product; use Magento\Catalog\Block\Product\View as ProductView; class View { private $displayBlocks = ['product.info.addtocart']; // you can add layout reference as per you need to display like: product.info.price, product.info.review, etc. public function afterToHtml(ProductView $subject, $html) { if (in_array($subject->getNameInLayout(), $this->displayBlocks)) { return $html . '<div><input type="checkbox" id="giftwrap" name="giftwrap" value="wrap"> <label for="giftwrap">Gift wrap this item for ₹15</label></div>'; } return $html; } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

      <?php   namespace Vendor\Module\Plugin\Catalog\Block\Product;   use Magento\Catalog\Block\Product\View as ProductView;   class View {     private $displayBlocks = ['product.info.addtocart'];       // you can add layout reference as per you need to display like: product.info.price, product.info.review, etc.     public function afterToHtml(ProductView $subject, $html)     {         if (in_array($subject->getNameInLayout(), $this->displayBlocks)) {             return $html . '<div><input type="checkbox" id="giftwrap" name="giftwrap" value="wrap"> <label for="giftwrap">Gift wrap this item for ₹15</label></div>';         }           return $html;     } }

      Applying this method, here I have added the custom facility for gift wrapping at additional $15:
      You can add layout reference as per your need to display like product.info.price, product.info.review e.t.c.

      Here, I’ve used product.info.addtocart to display custom text under the ‘Add to Cart’ button.

      That’s it.

      If you have any doubts, do mention them in the Comments section below.

      I would be glad to help.

      Feel free to share the solution with Magento community via social media.

      Thank You.