Woocommerce 以不同颜色和两条线显示含税和不含税价格

Question

我正在使用带有 Flatsome 主题的 Woocommerce。我想显示每种产品的不含税和含税价格。我已经成功地做到了。但我无法更改含税价格的颜色。当我使用以下 CSS 时，两个价格都发生了变化。我想要两种价格的不同颜色。我还想在两条线上显示两个价格。

Customise -> Style -> Custom CSS

.product .price .amount {
 color: #900C3F ;
} 

HTML

<span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">&#36;</span>4.50</bdi>
</span>
<span class="ex-tax"> (ex. tax)</span> 
    <small class="woocommerce-price-suffix"><span class="woocommerce-Price-amount amount">
        <bdi><span class="woocommerce-Price-currencySymbol">&#36;</span>4.95</bdi>
    </span>
</small>
<span class="inc-tax"> (incl. tax)</span>

Answer 1

你可以像这样添加 CSS。

.woocommerce-price-suffix span.woocommerce-Price-amount.amount {
    color: blue;
}
span.woocommerce-Price-amount.amount {
    color: red;
}

经过测试且有效

按照 OP 要求

将(ex tax) {price_including_tax} (inc tax) 替换为{price_including_tax}

试试下面的代码。代码将进入您的活动主题 functions.php 文件。

function add_custom_css(){
    if( is_product() ){
        ?>
        <style type="text/css">
            .woocommerce-price-suffix span.woocommerce-Price-amount.amount {
                color: blue;
            }
            span.woocommerce-Price-amount.amount {
                color: red;
            }
            span.ex-tax {
                color: red;
            }
            span.inc-tax {
                color: blue;
            }
        </style>
        <?php
    }
}
add_action( 'wp_head', 'add_custom_css', 10, 1 );

function add_woocommerce_get_price_suffix( $html, $WC_Product, $price, $qty ){
    $html = '<span class="ex-tax">(ex tax)</span>'.$html.'<span class="inc-tax">(inc tax)</span>';
    return $html;
}
add_filter( 'woocommerce_get_price_suffix', 'add_woocommerce_get_price_suffix', 999, 4 );

经过测试且有效