Magento 2: Hide tier price element

Question

Custom theme using Magento 2.2.1 in developer mode, inheriting from the Magento/blank theme.

When selecting an item from a sizing dropdown on a product page, created using a configurable product, an element appears, which I believe is the 'tier price'.

The element in question is<div class="price-box price-tier_price" data-role="priceBox"></div>.

I have tried adding <referenceBlock name="price-tier_price" remove="true" /> and <referenceBlock name="price-box" remove="true" /> to default.xml, but neither have worked.

Please can someone advise me how to hide this element?

Thanks.

EDIT:

Found this link. Looks like this might be the root of the problem, which is marked 'Done' ready for Magento 2.3.

Answer 1

Did a little reading up on Khoa TruongDinh's answer and discovered this issue posted on Magento's github:

https://github.com/magento/magento2/issues/4945

Looks like this is a known bug that has been fixed for v2.3.

I've managed to work around the bug in my custom theme using three different methods.

Method One:

Added the line

<referenceBlock name="product.price.tier" remove="true" />

to

<Vendor>/<Theme>/Magento_Theme/layout/default.xml

and it seems to be working.

Method Two:

First, I copied the file

Magento/Catalog/layout/catalog_product_view.xml

to

<Vendor>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml

.

Then, I removed the following code from the new file:

<block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">tier_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>

Method 3 (from Khoa TruongDinh's answer):

See how tier price is rendered:

\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getOptionPrices

Configurable product JS comes from here:

Magento_ConfigurableProduct/js/configurable

Create requirejs-config.js file here:

app/code/[Vendor]/[Module]/view/frontend/requirejs-config.js

Create the following mixin inside the file requirejs-config.js:

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'Vendor_Catalog/js/configurable-mixin': true
            }
        }
    }
};

Then create configurable-mixin.js here:

app/code/[Vendor]/[Module]/view/frontend/web/js/configurable-mixin.js

configurable-mixin.js should contain the following code:

define(
[
    'jquery'
],
function ($) {
    'use strict';

    return function (target) {
        $.widget('mage.configurable', target, {

            _displayTierPriceBlock: function (optionId) {
               //Do no thing here.
            }
        });

        return $.mage.configurable;
    };
});

Method 4 (from goodlook's answer):

Copy the file

Magento/Catalog/layout/catalog_product_view.xml

to

<Vendor>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml

and remove the following line:

<?= /* @escapeNotVerified */ $block->renderAmountMinimal() ?>

Answer 2

We can see how tier price was rendered: \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getOptionPrices.

There is an easy way to hide the tier price - but not sure it's the best way:

The js for changing value of configurable product comes from Magento_ConfigurableProduct/js/configurable.

We need to override it by using mixin

app/code/[Vendor]/[Module]/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'Vendor_Catalog/js/configurable-mixin': true
            }
        }
    }
};

app/code/[Vendor]/[Module]/view/frontend/web/js/configurable-mixin.js

define(
[
    'jquery'
],
function ($) {
    'use strict';

    return function (target) {
        $.widget('mage.configurable', target, {

            _displayTierPriceBlock: function (optionId) {
               //Do no thing here.
            }
        });

        return $.mage.configurable;
    };
});

Answer 3

on magento 2.3.0 you can remove by editing

Magento_Catalog/templates/product/price/final_price.phtml

I added text to tell there is % when buy more 'by more and get %' then I marked out the render of tier price. So, no tier price is shown, only some replace text with link to product page where tier prices are correct.

<a href="<?= /* @escapeNotVerified */ $block->getSaleableItem()->getProductUrl() ?>" class="minimal-price-link"> By more and get % <!-- marke out code or delete line <?= /* @escapeNotVerified */ $block->renderAmountMinimal() ?> --> </a>