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.


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


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

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

enter image description here

  • Thanks for your help, but i think you misunderstood my question. I don't want to just remove the + sign. I also want to show the full price in the option. In your Example: Product price is 45 and premium is 50. I want that 50 to show 95 and for the exclusieve to show 145. So the buyer instnatly knows, premium is 95 and exclusieve is 145. – Fancyman Feb 8 at 14:40

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.