5

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.

5

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

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;
    };
});
  • Thanks for your response. Just making a few other changes and then I'll try this out. It may or may not be the 'best' way, but it is certainly a much cleaner solution than I have seen mentioned elsewhere. Will get back to you soon! – Joshua Flood Dec 10 '17 at 19:57
  • Where do I actually put the requirejs-config.js file inside app/design/frontend/[Vendor]/[Module]/... ? Or is this a solution for 1.9? – Joshua Flood Dec 10 '17 at 20:04
  • 1
    This solution is for Magento 2. If having already a custom theme, put it under app/design/frontend/[Vendor]/[Theme_name]/requirejs-config.js. – Khoa TruongDinh Dec 10 '17 at 23:52
  • 1
    Good to know you resolve your issue. – Khoa TruongDinh Dec 11 '17 at 0:31
  • 1
    @JoshuaFlood no worries. – Khoa TruongDinh Dec 12 '17 at 16:33
1

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>

  • Thanks goodlook. I've added this method to the answer and given you an upvote. – Joshua Flood Apr 9 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.