Site icon EcomPlugins Blog

Magento 2 how to hide product price and show call to price button on category and product page

Vipin Garg

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

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:

  1. Go to Stores > Attributes > Product.
  2. Add a new attribute (e.g., call_for_price) with the following settings:
    • Catalog Input Type for Store Owner: Dropdown
    • Options: Yes/No
  3. 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!

Exit mobile version