Magento 2 – Remove Price From Select Dropdown on Configurable Products

The Problem : +$x.00 in Select Dropdown

So, you’ve setup a configurable product with a variety of simple products for the different option combinations. Some of those combinations involve a slightly higher or lower price.

When viewing your configurable product on the frontend, you notice that the price increase is referenced inside the select field / option dropdown:

This isn’t a great user experience, or great for CR (you don’t want to flaunt the price increase in your customer’s face!)

The Solution

You will be surprised to find that there is no admin setting to remove the price increase from within the select field. There is also no way to easily remove this from:

• A Plugin
• A Block Preference
• A template override

The code that is responsible for generating the price increase is located in the below file for Magento 2.2.x and 2.3.x:

vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js – line 407

// vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js
// ... Line 407 on Magento 2.2.x, 2.3.x
allowedProducts = options[i].products.slice(0);

if (typeof allowedProducts[0] !== 'undefined' &&
    typeof optionPrices[allowedProducts[0]] !== 'undefined') {
    allowedProductMinPrice = this._getAllowedProductWithMinPrice(allowedProducts);
    optionFinalPrice = parseFloat(optionPrices[allowedProductMinPrice].finalPrice.amount);
    optionPriceDiff = optionFinalPrice - basePrice;

    if (optionPriceDiff !== 0) {
        options[i].label = options[i].label + ' ' + priceUtils.formatPrice(
            optionPriceDiff,
            this.options.priceFormat,
            true);
    }
}
// ...

The if statement which begins with if (optionPriceDiff !== 0) { is the culprit. You’ll see that Magento 2 iterates over each configurable attribute option – and if the option is related to a price increase – adds the price increase to the <option> text inside the <select> element.

So, to remove this, we need to do a couple things:

1. Copy the JavaScript file into the active theme
2. Comment out the if {} statement adding the price diff

So, run the below bash command to copy the file (replace PACKAGE_NAME and THEME_NAME with the values specific to your implementation):

mkdir -p app/design/frontend/PACKAGE_NAME/THEME_NAME/Magento_ConfigurableProduct/web/js
cp vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js app/design/frontend/PACKAGE_NAME/THEME_NAME/Magento_ConfigurableProduct/web/js/configurable.js

And then inside the theme’s version of the file, comment out the if{} statement around line 415:

// app/design/frontend/PACKAGE_NAME/THEME_NAME/Magento_ConfigurableProduct/web/js/configurable.js
// ... Line 407 on Magento 2.2.x, 2.3.x
allowedProducts = options[i].products.slice(0);

if (typeof allowedProducts[0] !== 'undefined' &&
    typeof optionPrices[allowedProducts[0]] !== 'undefined') {
    allowedProductMinPrice = this._getAllowedProductWithMinPrice(allowedProducts);
    optionFinalPrice = parseFloat(optionPrices[allowedProductMinPrice].finalPrice.amount);
    optionPriceDiff = optionFinalPrice - basePrice;

    // Removed code to prevent price diff from appearing on the frontend
    /*if (optionPriceDiff !== 0) {
        options[i].label = options[i].label + ' ' + priceUtils.formatPrice(
            optionPriceDiff,
            this.options.priceFormat,
            true);
    }*/
}
// ...

That’s it!

Conclusion

After the above updates, you should see a normal select dropdown with just the option names (no price changes).

Alan Barber is the Lead Web Developer at Cadence Labs and a Magento 2 Certified Professional Developer.

Need help with Magento 2?

We’ve had a lot of experience building websites in Magento 2. If you need help, head over to the Cadence Labs contact page, or email us at [email protected].