[FIXED] Woocommerce Show Prices With Tax and Without Tax in different colors and on two lines

Issue

I am using Woocommerce with a Flatsome theme. I want to show the price of each product without and with tax. I have successfully done it. But I am unable to change the color of the Price with Tax. When I used the following CSS then both of the prices changed. I want a different color for both prices. I also want to show both of the prices on two lines.

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>

Solution

You can add CSS like this.

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

Tested and works

AS per OP requested

Replace (ex tax) {price_including_tax} (inc tax) with {price_including_tax}

Try the below code. code will go in your active theme functions.php file.

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 );

Tested and works

Answered By - Bhautik