我怎样才能让我的销售价格与我的正常价格有不同的颜色？答案

【问题标题】：How can i get my sale price to have a different color then my regular price?我怎样才能让我的销售价格与我的正常价格有不同的颜色？
【发布时间】：2019-10-25 15:35:24
【问题描述】：

各位，我想知道如何才能使销售价格具有与常规颜色不同的颜色。并有正常的价格通过它。这是该网站的链接：http://www.peachandhoney.nl/product/classic-chair/，但我也希望它出现在产品库列表中http://www.peachandhoney.nl/shop/。如果尝试使用此代码编辑此代码但它不起作用，它会更改两个价格。关于如何实现这一目标的任何建议？

    .product .summary .price .amount {
    color: #e78484 !important; }
}

【问题讨论】：

类名有区别吗？
尝试添加不同的类。如果您通过 sn-p 发布代码会有所帮助

标签： php css wordpress woocommerce

【解决方案1】：

在你的 CSS 中定位 <ins> 标签

.product .summary .price ins .amount {
    color: #e78484 !important; 
}

【讨论】：

谢谢！唯一的问题是，这不会显示在 peachandhoney.nl/shop 或产品具有预览显示的主页上。我怎样才能让它工作？
在这种情况下，我建议在销售价格中添加一个类，然后定位新类以全局更改它的 CSS

【解决方案2】：

我可以使用它来使用

    .product .summary .price del .amount {
    color: #000000;
    text-decoration: line-through
    }

    .price ins .woocommerce-Price-amount {
    color: #d98159 !important;
    }

【讨论】：

【解决方案3】：

尝试添加其他改变颜色的类：

.sale {
     color: green;
}

.regular {
     color: black;
}

然后通过JS更改类；

【讨论】：

【解决方案4】：

请考虑不要在您的 CSS 中使用 !important。这是不好的做法。

如果您可以随意更改模板会更好。

无论如何，它应该适用于：

    .product .price .amount {
            color: #e78484 !important;  
    }
    .product .price .amount ~ .amount {
            color: #111 !important; 
            text-decoration: line-through
    }

【讨论】：

谢谢！唯一的问题是这不会显示在peachandhoney.nl/shop 或产品具有预览显示的主页上。我怎样才能让它工作？
@QuintyvanDijk 你那里没有.summary 容器。我调整了我的答案。现在应该适用于这两种情况

【解决方案5】：

你可以像这个例子那样只使用 CSS：

.sale .price ins {
    color: #ea1000 !important;
}

【讨论】：