If you want to display custom text in Magento 2 product detail page after price then you are at the right place because here we are going to explain 4 different ways to add custom text after price On the product detail page in Magento 2.
Method-1: By overriding core file
Magento/Catalog/view/base/templates/product/price/amount/default.phtml in your child theme and creating a static block
Step 1: Create a static block and add the custom text for example my block id is “custom-text-after-price” and custom text is “My Custom Text”
Step 2: Override core file Magento/Catalog/view/base/templates/product/price/amount/default.phtml in your child theme and call the static block in this file:
path –
|
1 |
app/design/frontend/module/theme/Magento_Catalog/templates/product/price/amount/default.phtml |
Method-2: By creating a layout and template file in child theme
Step1: You need to create layout file catalog_product_view.xml in your child theme and add the code given below:
|
1 |
app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml |
|
1 2 3 4 5 6 7 8 |
<?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> <referenceContainer name="product.info.main"> <block class="Magento\Framework\View\Element\Template" name="custom.text" template="Magento_Catalog::view/mycustomtext.phtml" after="product.info.price"/> </referenceContainer> </body> </page> |
Step2: You need to create template file mycustomtext.phtml in your child theme and add the code given below
path:
|
1 |
app/design/frontend/Vendor/theme/Magento_Catalog/templates/view/mycustomtext.phtml |
|
1 |
<h3>My Custom Text</h3> |
Method-3: By creating js file in your custom module
Step1: You need to create price-box-mixin.js file in your custom module path app/code/VendorName/ModuleName/view/frontend/web/js/price-box-mixin.js and add this code given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
define(['jquery'], function ($) { return function (widget) { var globalOptions = { productId: null, priceConfig: null, prices: {}, priceTemplate: '<span class="price"><%- data.formatted %>My Custom Text</span>' }; $.widget('mage.priceBox', widget, { options: globalOptions }); return $.mage.priceBox; } }); |
Step2: You need to create requirejs-config.js file in your custom module and call price-box-mixin.js file
path- app/code/VendorName/ModuleName/view/frontend/requirejs-config.js and add this code given below:
|
1 2 3 4 5 6 7 8 9 |
var config = { config: { mixins: { 'Magento_Catalog/js/price-box': { 'VendorName_ModuleName/js/price-box-mixin': true } } } }; |
Method-4: You can add custom text on product detail page after price By using custom css given below.
|
1 2 3 4 |
.catalog-product-view .product-info-price .price:after { content: 'per piece'; } |
After following any method you need to run this command:
|
1 2 3 4 5 6 |
php -dmemory_limit=5G bin/magento setup:upgrade php -dmemory_limit=5G bin/magento setup:di:compile php -dmemory_limit=5G bin/magento setup:static-content:deploy -f en_US php -dmemory_limit=5G bin/magento cache:flush php -dmemory_limit=5G bin/magento cache:clean php -dmemory_limit=5G bin/magento indexer:reindex |
Now you can see the result:
I hope this post will be very helpful to you
Thank You!
Read More
