显示销售后的折扣百分比，但在 WooCommerce 中保留 CSS 样式答案

【问题标题】：Display the discount percentage after sale ribbon but keeping css styles in WooCommerce显示销售后的折扣百分比，但在 WooCommerce 中保留 CSS 样式
【发布时间】：2021-02-15 13:20:53
【问题描述】：

我试图在“销售”一词之后显示百分比！所以它会显示销售 XX% 折扣。像这样：

我找到Display the discount percentage on the sale badge in Woocommerce 3

我在主题的functions.php文件中的代码是这样的：

if( ! function_exists( 'mc_sale_flash' ) ) {
    function mc_sale_flash() {
        $sale_flash = '<div class="ribbon red"><span class="onsale">' . __( 'Sale!', 'mediacenter' ) . '</span></div>';
        return $sale_flash;
    }
}

我怎样才能让它看起来像当前在sale page 上显示的一样。

任何帮助将不胜感激。

【问题讨论】：

使用链接来引用“它目前在 *** 上的显示方式”将使这个问题在未来完全无法使用（对于其他有类似问题的人）。这是您所需结果的图像会大大改善您的问题的（罕见）情况之一。考虑截取屏幕截图（或使用截图工具）并将其作为图像添加到您的问题中。

标签： wordpress woocommerce

【解决方案1】：

所以，需要添加的 css 使它看起来像这样

是：

span.onsale {
    position: relative;
    padding: 7px 15px;
    color: #fff;
}

span.onsale:after {
    content: "";
    display: inline-block;
    border-top-width: 25px;
    border-top-style: solid;
    border-left: 0;
    border-right: 12px solid transparent;
    height: 0;
    min-width: 78px;
    width: 100%;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: -1;
    border-top-color: #f8484a;
}

添加上述链接中的代码后。

【讨论】：