make old (regular) price crossed out (magento 2.2, luma theme)

Question

i'd like to make old (regular) price crossed out. as i understand, here is output:

vendor/magento/module-configurable-product/view/base/templates/product/price/final_price.phtml


<span class="old-price sly-old-price">
    <?php /* @escapeNotVerified */ echo $block->renderAmount($priceModel->getAmount(), [
        'display_label'     => __('Regular Price'),
        'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
        'price_type'        => 'oldPrice',
        'include_container' => true,
        'skip_adjustments'  => true
    ]); ?>

i have found style for old-price here:

var/view_preprocessed/pub/static/frontend/Magento/luma/en_US/Magento_Catalog/css/source/_module.less

and changed it like that:

.old-price {
                .price-wrapper .price {
                    .lib-font-size(20);
                    font-weight: @font-weight__light;
                    text-decoration:line-through;
                }
            }

however, nothing changed. what i did wrong? p.s. this is done.

also, will really appreciate if you advise how to add custom style for percentage block below:

>     $_finalPrice =$_product->getFinalPrice(); $_price = $simplePrice; if($_finalPrice < $_price) {    $_savingPercent = 100 -
> round(($_finalPrice / $_price)*100);    echo  __('Your save:
> ').$_savingPercent . '%';
> 
> } ?>

Answer 1

The directory in which you are trying to make changes will never work, because after static content deployment your theme less files are compiled and merged into css file(s).

if you want to change style and see impact immediately then you can edit your theme css file in :

pub/static/frontend/Vendor-Name/theme-name/en_US/css/yourthemecssfile.css

ISSUE : changes in pub/static/ folder will be deleted as soon as you deploy your project static content again.

So in order to make changes permanently you have to edit your theme css or less file ( of respective section ) and then clear your var/view_processed/pub folder and pub/static/fronted folder and deploy your static content again.

finally here is the css class you can update or edit for adding cross price.

.price-box .old-price .price {text-decoration:line-through}

hope it will help

Updated

Add css class .discounted-price in your css file:

.price-box .old-price .price ,  
.price-box .discounted-price .price ,
.discounted-price .price {text-decoration:line-through}

I have added <span class="discounted-price"> and <span class="price"> with discount price in it ( update with below code )

$_finalPrice =$_product->getFinalPrice();
$_price = $simplePrice;
if($_finalPrice < $_price) {
   $_savingPercent = 100 - round(($_finalPrice / $_price)*100);
?>
   <span class="discounted-price">
        <span class="price">
             <?php echo 'Your save '.$_savingPercent . '%'; ?>
        </span>
   </span>
<?php
}
?>