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

By | December 4, 2024
Spread the love

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
      

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!