Magento 2: Hide tier price element

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() ?>

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;
    };
});