Estilização do preço promocional na pagina de produtos

De Tek-System Wiki
Ir para navegação Ir para pesquisar

O codigo a seguir faz a estilização do preço promocional na página de produtos usando apenas css, pois o javascript não funciona em todas as páginas de produto, como por exemplo, a página lightbox do produto.

    /*INICIO Pagina de produtos*/
    .product-info-price .old-price.sly-old-price.no-display{ display: block !important;}
    .product-info-price .old-price .price:before { content: "De: ";}
    .old-price .price-container .price-label { display: none !important;}
    .product-info-price .special-price .price:before{ content: "Por: ";}
    .product-info-price .old-price .price-wrapper .price{ text-decoration: line-through;}
    .product-info-price .price-final_price .special-price{ position: absolute; margin-top: 30px;}
    .product-info-main .product-info-price{ min-height: 70px; }
    /*FIM Pagina de produtos*/
    
    /*INICIO Pagina de catalogo*/
    .product-item-info .product.details.product-item-details .price-box.price-final_price .old-price .price:before { content: "De: ";}
    .product-item-info .product.details.product-item-details .special-price .price-container.price-final_price.tax.weee .price:before{ content: "Por: ";}
    .product-item-info .product.details.product-item-details .price-box.price-final_price .old-price{ margin-top:10px; display: block;text-decoration: line-through;font-size: 12px; }
    .product-item-info .product.details.product-item-details .special-price{ position: absolute;margin-top: 18px;left: 50%;transform: translateX(-50%);width: 100%;}
    /*FIM Pagina de catalogo*/
    
    .em-tabs-right .swatch-attribute-options{display:none;}
    .owl-stage .swatch-attribute-options{display:none;}
    .nav-sections-item-content .message{display:none;}
    .logo img.retina-img{content:url(https://teksystemcommerce.com.br/pub/media/emthemes/themesettings/smalllogo/teksystem-logo.png);}
    .logo img.logo-small{content:url(https://teksystemcommerce.com.br/pub/media/emthemes/themesettings/smalllogo/teksymbol.png);}
    .product-info-main #simularFrete .simularFrete_cont{margin-bottom: 40px;}
    .product-info-main #simularFrete .containerFrete{margin-bottom: 40px;}
    .product-info-main #simularFrete .simularFrete_submit{margin-top: -3px;}
    .additional-attributes-wrapper table { border-collapse: collapse; width: 100%;}
    .additional-attributes-wrapper #product-attribute-specs-table tr {border: 1px solid #dddddd;border-collapse: collapse;}
    .additional-attributes-wrapper #product-attribute-specs-table th{vertical-align: bottom;}
    .additional-attributes-wrapper #product-attribute-specs-table .col.label{padding-left: 12px;}
    .additional-attributes-wrapper #product-attribute-specs-table .col.data{padding-right: 12px;}
    .additional-attributes-wrapper #product-attribute-specs-table tr:nth-child(even) { background-color: #dddddd; }
    .mage-error-cpf-cnpj{ margin-top: 7px;color: rgb(224, 43, 39);font-size: 1.2rem; }
 
   Vendor/theme/Magento_ConfigurableProduct/templates/product/price/final_price.phtml
    alterar (em torno da linha 22)
     
    <?php if (!$block->isProductList() && $block->hasSpecialPrice()): ?>
    
    with <?php if ($block->hasSpecialPrice()): ?>