In many e-commerce stores, offering products for free can be a powerful draw for customers, especially during promotions or special events. But how can you show “FREE” text instead of the Product Price “0.00” in your Magento 2 store? Making this clear to customers by displaying “FREE” instead of a price tag enhances transparency and improves the user experience.
In this blog, we’ll cover the steps to replace the product price with “FREE” text in Magento 2, giving your customers a clear indication of complimentary items. Note: This method can also be used to replace special prices in Magento 2 with “FREE” text.
Key Steps to Display “Free” Text Instead of 0 in Magento 2
Step 1: Create registration.php
First, you need to create the registration.php file to register your custom module with Magento. Place this file in the app/code/Vendor/Module directory.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);Step 2: Create module.xml
Next, create the module.xml file inside the etc folder to define the module configuration. Place this file in app/code/Vendor/Module/etc.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="1.0.0">
</module>
</config>Step 3: Create catalog_product_prices.xml
Now, you need to override the default price rendering template. Create a file named catalog_product_prices.xml in app/code/Vendor/Module/view/base/layout:
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
<block class="Magento\Framework\Pricing\Render\RendererPool" name="render.product.prices">
<arguments>
<argument name="default" xsi:type="array">
<item name="default_render_class" xsi:type="string">Magento\Catalog\Pricing\Render\PriceBox</item>
<item name="default_render_template" xsi:type="string">Magento_Catalog::product/price/default.phtml</item>
<item name="default_amount_render_class" xsi:type="string">Magento\Framework\Pricing\Render\Amount</item>
<!-- This line overrides the default price rendering template with our custom template -->
<item name="default_amount_render_template" xsi:type="string">Vendor_Module::catalog/product/price/amount/default.phtml</item>
<item name="prices" xsi:type="array">
<item name="special_price" xsi:type="array">
<item name="render_template" xsi:type="string">Magento_Catalog::product/price/special_price.phtml</item>
</item>
<item name="tier_price" xsi:type="array">
<item name="render_template" xsi:type="string">Magento_Catalog::product/price/tier_prices.phtml</item>
</item>
<item name="final_price" xsi:type="array">
<item name="render_class" xsi:type="string">Magento\Catalog\Pricing\Render\FinalPriceBox</item>
<item name="render_template" xsi:type="string">Magento_Catalog::product/price/final_price.phtml</item>
</item>
<item name="custom_option_price" xsi:type="array">
<item name="amount_render_template" xsi:type="string">Magento_Catalog::product/price/amount/default.phtml</item>
</item>
<item name="configured_price" xsi:type="array">
<item name="render_class" xsi:type="string">Magento\Catalog\Pricing\Render\ConfiguredPriceBox</item>
<item name="render_template" xsi:type="string">Magento_Catalog::product/price/configured_price.phtml</item>
</item>
</item>
</argument>
</arguments>
</block>
</layout>Step 4: Customize default.phtml
Now you will modify how prices are displayed. Create the default.phtml file in app/code/Vendor/Module/view/base/templates/catalog/product/price/amount/default.phtml with the following content:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php /** @var $block \Magento\Framework\Pricing\Render\Amount */ ?>
<?php $displayValue = $block->getDisplayValue();?>
<?php if ($displayValue == 0): ?>
<span class="price"><?= $block->escapeHtml(__('FREE')) ?></span>
<?php else: ?>
<span class="price-container <?= $block->escapeHtmlAttr($block->getAdjustmentCssClasses()) ?>"
<?= $block->getSchema() ? ' itemprop="offers" itemscope itemtype="http://schema.org/Offer"' : '' ?>>
<?php if ($block->getDisplayLabel()) :?>
<span class="price-label"><?= $block->escapeHtml($block->getDisplayLabel()) ?></span>
<?php endif; ?>
<span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>
<?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>
data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"
data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"
class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"
><?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?></span>
<?php if ($block->hasAdjustmentsHtml()) :?>
<?= $block->getAdjustmentsHtml() ?>
<?php endif; ?>
<?php if ($block->getSchema()) :?>
<meta itemprop="price" content="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>" />
<meta itemprop="priceCurrency" content="<?= $block->escapeHtmlAttr($block->getDisplayCurrencyCode()) ?>" />
<?php endif; ?>
</span>
<?php endif; ?>This code checks if the product price is 0. If so, it displays “FREE”. Otherwise, it shows the product price normally.
Step 5: Run Magento Commands
After creating the necessary files, run the following Magento commands to upgrade, compile, and deploy the changes:
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush
The following screenshots showcase the effective implementation of displaying “FREE” in place of the product price in your Magento 2 store. These images illustrate the successful changes, providing a straightforward experience for customers when viewing items available for free.
Output Screenshots:-
[1] https://imgur.com/a/v1LD83E
Read More: How to Change Price Dynamically on Product Page in Magento 2
Wrap up!
In conclusion, displaying “FREE” text instead of a product price in your Magento 2 store is a simple yet effective way to enhance customer experience and clarity. By following the outlined steps, you can ensure that your customers easily recognize items available at no cost, fostering a more engaging shopping experience. Implementing this feature can be particularly beneficial during promotions or special events, clarifying that certain products are complementary.
If you encounter any challenges or have questions while implementing these changes, please ask for assistance. Our team is here to help! Contact us now for a free consultation, and we’ll ensure your Magento 2 store meets all your e-commerce needs seamlessly.
Share Post
Leave a Reply