Woocommerce Show Prices With Tax and Without Tax in different colors and on two lines-CodePudding

I am using Woocommerce with 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 ;
}

CodePudding user response：

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 >(ex tax)</span>'.$html.'<span >(inc tax)</span>';
    return $html;
}
add_filter( 'woocommerce_get_price_suffix', 'add_woocommerce_get_price_suffix', 999, 4 );

Tested and works