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