The WooCommerce settings allow you to show prices including OR excluding tax. But what if we want to show both at the same time e.g. “$100 inc. tax – $89 ex. tax”?
Well, by combining the snippet below with the snippet I already coded for variable products price range, or by installing our Mini/Plugin, you can achieve exactly that.
Yes, in theory you could add a WooCommerce suffix via the settings, but unfortunately WooCommerce wraps such suffix in a “small” HTML tag and therefore the whole content is smaller in size, including the second price.
In this tutorial, we’ll see how to add a suffix via PHP instead, and specifically at how to add the price including tax if your store displays prices excluding tax. Enjoy!
PHP Snippet: Display Prices With + Without Tax @ WooCommerce Frontend
/**
* @snippet Prices Incl + Excl Tax | WooCommerce Shop
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 7
* @community https://businessbloomer.com/club/
*/
add_filter( 'woocommerce_get_price_suffix', 'bbloomer_add_price_suffix_price_inc_tax', 99, 4 );
function bbloomer_add_price_suffix_price_inc_tax( $suffix, $product, $price, $qty ){
$suffix = ' <small>ex. TAX</small> - ' . wc_price( wc_get_price_including_tax( $product ) ) . ' <small>inc. TAX</small>';
return $suffix;
}
Mini-Plugin: Business Bloomer WooCommerce Display Prices Including and Excluding Tax
You don’t feel confident with coding? You don’t want to purchase yet another bloated, expensive plugin? Great!
Business Bloomer WooCommerce Display Prices Including and Excluding Tax is a mini WooCommerce plugin, without the usual hassles. One feature. Lifetime license. No annoying subscriptions. 1 plugin file. A few lines of code. No banners. No up-sells. No WP notifications. Use it on as many websites as you like. Lifetime support. 1-page documentation. No admin dashboard.
Quick demo:
As you can see the plugin is straight forward. Install it, and automatically see the result on the frontend. Simple!
Thanks for the PHP code. This works perfectly!
I would like to change the font color and size for the prices ex. VAT. This most be bigger and in a different colour then inc. VAT.
Do you maybe have a CSS code i can use to do this?
Thanks in advance!
Hey Charissa, if you share one of your product page URLs, I can send you some custom CSS to help you get started
how can this be displayed over two lines please
Just add a “BR” HTML tag in between the two strings
Hi. I add the code but it shows the same price for including and excluding VAT. So it didn’t do calculation based on my VAT rates in Woocommerce settings.
Thanks Davit. You definitely set up taxes properly in the Woo settings?
I have the same problem. I have normal rate and reduced rate.. How can we fix this? 🙂
This is not fixable. Tax calculations are done based on the customer’s billing address (and your tax settings), so if you don’t have geolocation enabled or the current user hasn’t entered any billing information yet, WooCommerce won’t know which tax needs to be applied.
Do you have any quick hook or filter, to implement this on the product edit screen in WP-admin?
We are adding prices excl. tax to our product edit screen, but it would be nice to show a price calculation next to or below that field which said: Price incl.: xxx.xx – preferably using a JS so it changed on the fly, while editing the regular price.
Hello Roger, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Is it possible to use the Remove Variable Product price range AND put the suffix of Ex VAT on the end of the From: £100.00 price so it is From £100.00 Ex Vat
or even better to combine both options to then show:
From £100.00 Ex Vat (£120.00 Inc VAT)
Hi Gerard, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!