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


<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:


and changed it like that:

.old-price {
                .price-wrapper .price {
                    font-weight: @font-weight__light;

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 . '%';
> } ?>

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 :


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


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 . '%'; ?>
  • thanks, you're are great! could you pls be so kind and advice how to change style for this block (you advised to add it to see percentage): >> $_finalPrice =$_product->getFinalPrice(); $_price = $simplePrice; if($_finalPrice < $_price) { $_savingPercent = 100 - round(($_finalPrice / $_price)*100); echo __('Your save: ').$_savingPercent . '%'; } ?> >> for example, how to make it red? really appreciate your answers! – bofh Apr 1 '18 at 11:42
  • No problem, could you update that code block in your question and i will update my answer accordingly – Naveed Asim Apr 1 '18 at 11:45

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.