Magento 2 : Custom Option Price + Finale Price = Show Total =>How?

Question

Product Price: 100 USD Custom Option: Premium: +50 Custom Option: Exclusieve: +100

I want it to show: 150USD. (instead of +50) if i choose Premium and 200(instead of +100) if i choose exclusieve.

public_html/vendor/magento/module-catalog/view/base/templates/product/price/amount/default.phtml

This is the file: But i can't get the finale price to work so i could sum it up.

Answer 1

open file vendor/magento/module-catalog/view/base/web/js/price-options.js

add line

value = value + parseInt(jQuery('.product-info-main .product-info-price .price-wrapper ').attr('data-price-amount'));

at line number 185

this changes in core file you can also override this file and change

run the command

php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
php bin/magento cache:clean

Answer 2

You may try a JS customization ( as described below ) to remove + sign from custom option price dropdown.

I assume you are using a custom theme, let your custom theme name is "Vendor_mytheme".

Please make sure you are on Developer Mode.

step 1) Create requirejs-config.js file under /app/design/frontend/Vendor/mytheme/Magento_Catalog/

File : requirejs-config.js

var config = {
    config: {    
        mixins: {            
            'Magento_Catalog/js/price-options': {'Magento_Catalog/js/price-options-mixin': true},
        },                
    }         
};

step 2) create the js file price-options-mixin.js under /app/design/frontend/Vendor/mytheme/Magento_Catalog/web/js/

File : price-options-mixin.js

define(['jquery'], function ($) {

    return function (widget) {
        'use strict';
        var globalOptions = {
        optionTemplate: '<%= data.label %>' +
        '<% if (data.finalPrice.value > 0) { %>' +
        ' <%- data.finalPrice.formatted %>' +
        '<% } else if (data.finalPrice.value < 0) { %>' +
        ' <%- data.finalPrice.formatted %>' +
        '<% } %>',
       };
        $.widget('mage.priceOptions', widget, {

            options: globalOptions

        });
        return $.mage.priceOptions;
    }
});

step 3) Remove static content and cache using below commands from your Magento root directory

sudo rm -rf pub/static/frontend/*
sudo rm -rf var/view_preprocessed/*
sudo rm -rf var/pub/static/*
sudo rm -rf var/cache/*
sudo rm -rf var/generated
sudo rm -rf var/composer_home
sudo rm -rf var/page_cache
sudo rm -rf var/view_preprocessed

Answer 3

My solution should help for all configurable products. You should find file

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

And copy to

app/design/frontend/Vendor/theme/Magento_ConfigurableProduct/web/js/configurable.js

Then find

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

And replace with

if (optionPriceDiff !== 0) {
   options[i].label += ' ' + priceUtils.formatPrice(
      optionFinalPrice, // this is main change, it will show final price
      this.options.priceFormat,
      false // this will remove '+' from label
 );
}