How to Use a Custom Price Template in Magento 2
Hello Magento buddies 🤘🏻
I am back with another blog post on how to use a custom price template in Magento 2.
Magento is incredibly impressive eCommerce platform, isn’t it? It allows high-end customization and the creation of storefronts, as we imagine. It truly empowers the store owners to tweak every minute details of the storefront including the price tag shown on various pages. As an enthusiastic store owner, you may want to use a custom price template in Magento 2 and change the look of the price tag to better match your Magento store’s theme.
Recently, I came across one such requirement of customizing the price template in Magento 2 for one of our clients and found the solution. In this blog post, I will share with you the complete solution to using a custom price template in Magento 2.
So, let’s begin!
Methods to Use Custom Price Template in Magento 2
To use a custom price template in Magento 2, we need to override the final_price.phtml file in Magento 2 with the custom template. It can be done in two ways:
- Override Template File Directly in Theme
- Change Template File in Custom Extension
1. Override Template File Directly in Theme
You can change the final_price.phtml directly in the vendor folder of the Magento source code. But, directly tweaking the source code of the Magento 2 is not advisable at all. Also, the changes can get reverted back in case of a Magento version upgrade. In order to prevent such reversal, it is advisable to override the template fine in the vendor folder by that in the theme.
Override the following path of the price template:
|
1 |
vendor\magento\module-catalog\view\base\templates\product\price\final_price.phtml |
with
|
1 |
app\design\frontend\<theme_package>\Magento_Catalog\templates\product\price\final_price.phtml |
That’s it!
2. Change Template File in Custom Extension
If you are using a custom extension that tweaks the pricing layout in Magento 2; you can create a custom module to override the price layout file in Magento 2. Follow the below steps if you want to use a custom price template in Magento 2 using a custom extension.
Step 1: Create app/code/Vendor/Extension/etc/di.xml with the following code:
|
1 2 3 4 5 6 |
<?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\Pricing\Render\FinalPriceBox"> <plugin name="override_price_block" type="Vendor\Extension\Plugin\FinalPricePlugin" /> </type> </config> |
Step 2: Create app/code/Vendor/Extension/Plugin/FinalPricePlugin.php with the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php namespace Vendor\Extension\Plugin; class FinalPricePlugin { public function beforeSetTemplate(\Magento\Catalog\Pricing\Render\FinalPriceBox $subject, $template) { if ($template == 'Magento_Catalog::product/price/final_price.phtml') { return ['Vendor_Extension::product/price/final_price.phtml']; } else { return [$template]; } } } |
Step 3: Create final_price.phtml file at app/code/Vendor/Extension/view/frontend/templates/product/price/ and add your desired code for the price layout template.
That’s it.
Any doubts about the above method can be mentioned in the Comments section below. 😇
Also, do share the solution with the Magento community via social media. 😃
Thank you. 🍀
Prev
How to Convert Custom Field From Quote Item to Order Item in Magento 2
How to Create and Manage Multiple Shopify Stores
Next