Show actual price for each option in dropdown for configurable product (instead of "+$26.00", e.g.)

[phil_geyer]

(Magento 2.3.3) The below image pretty much speaks for itself. I want (my client REALLY wants) the actual price to be displayed next to each size in the drop-down. None of this '+$26.00' nonsense.

So instead of what you see below, I need the drop-down to say

1 Gallon - $26.95
3 Gallon - $52.95

How do I do this? I'm really surprised this is the default behavior and that there's no obvious way to change it (at least that I can find). I tried the following file, but I don't see anything in there that can change that behavior.

/app/design/frontend/<vendor>/<theme>/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

Thanks very much in advance for any help.

[Vimal Kumar]

Hi @phil_geyer 

Check the below solution.

https://magento.stackexchange.com/a/262553

It might be help you!

[phil_geyer]

Hello Vimal:

First, thanks so much for your quick reply. I was a bit skeptical, because I think of "swatches" as being separate from a select element where the user chooses a size (and, by extension, price). Anyway, I tried what was outlined in the link you provided, and nothing I did made any difference, even after I tried to account for the fact that I'm dealing with a select element and not multiple div elements as that example used.

Well, then I made some simple changes to the js file in question in an attempt to confirm that the file was even being read, and it doesn't appear that it was. I double-checked that I had put the revised file in the correct location within my theme. Then I took it a step further and actually overwrote the file in vendor/magento... (don't worry, I saved the original first and promptly restored it).  Anyway, no matter what I did, flushing cache each step of the way, nothing made any difference whatsoever. Which makes me think that I'm not dealing with the correct module? (Magento_Swatches)

Any other ideas? Thank you again.

Phil

[phil_geyer · Accepted solution]

OK, I've got this resolved. The file in question is:

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

Copied to:

app/design/frontend/<vendor>/<theme>/Magento_ConfigurableProduct/web/js/configurable.js

I then changed the following code:

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

To this:

            options[i].label = options[i].label + ' ' + priceUtils.formatPrice(
                optionFinalPrice,
                this.options.priceFormat,
                false);

So basically I made these three changes:

1. Removed the conditional (must be a price difference), because I needed to show the actual price for all options, including the "base" option.
2. Changed "optionPriceDiff" to "optionFinalPrice", again because I needed to show the actual price for each option, not the price difference between each option and the "base" option.
3. Changed "true" to "false". This removed the "+" in front of the price for each option in the drop-down.

[Johnliorbu9d81]

Could you give me some suggestions?  For bundle products, each bundled items have their own "lead time".  When each bundled item is selected, we want to the lead time shown under it.