Hiding the product price and displaying a “Call for Price” button in Magento 2 can be achieved by customizing the theme. Below are the steps to implement this functionality:
1. Override the Product Price Templates
Magento uses template files to display product prices. You need to override these templates in your custom theme.
Category Page
- Copy the price rendering template from:
vendor/magento/module-catalog/view/frontend/templates/product/price/final_price.phtml
to:
app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/price/final_price.phtml
Product Page
- Copy the price block template from:
vendor/magento/module-catalog/view/frontend/templates/product/view/price.phtml
to:
app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/view/price.phtml
- Copy the price block template from:
2. Customize the Templates
Edit the copied files to hide the price and display the “Call for Price” button. For example, in the final_price.phtml file:
<?php
// Check if "Call for Price" logic should be applied
if (/* Your condition to check for Call for Price */) : ?>
<button type="button" class="action call-for-price" onclick="location.href='tel:+1234567890'">
<?= __('Call for Price') ?>
</button>
<?php else : ?>
<!-- Default price rendering logic -->
<?= $block->renderFinalPrice() ?>
<?php endif; ?>
Similarly, modify the price.phtml file for the product page.
3. Add a Condition for “Call for Price”
To decide when to show the “Call for Price” button instead of the price, you can add a product attribute (e.g., call_for_price). Create a custom product attribute in the Magento admin:
- Go to Stores > Attributes > Product.
- Add a new attribute (e.g.,
call_for_price) with the following settings:- Catalog Input Type for Store Owner: Dropdown
- Options: Yes/No
- Assign the attribute to the desired attribute set(s).
In the templates, check the product’s attribute value:
<?php
$product = $block->getProduct();
if ($product->getData('call_for_price')) : ?>
<button type="button" class="action call-for-price" onclick="location.href='tel:+1234567890'">
<?= __('Call for Price') ?>
</button>
<?php else : ?>
<!-- Default price rendering logic -->
<?= $block->renderFinalPrice() ?>
<?php endif; ?>
4. Add CSS for “Call for Price” Button
Customize the appearance of the button by adding CSS in your theme’s web/css/source/_extend.less or equivalent file.
.call-for-price {
background-color: #f7931e;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
5. Deploy Static Content and Flush Cache
After making changes, deploy the static content and flush the cache:
php bin/magento setup:static-content:deploy php bin/magento cache:flush
6. (Optional) Customize via Plugin or Module
If you prefer to make this dynamic and avoid modifying templates directly, you can create a custom module to override the price rendering logic programmatically.
Let me know if you need help creating a custom module for this!
