How to display prices with and without tax in WooCommerce

• Using WooCommerce settings
• Use code snippets
• Using a Plugin to Show Prices with and without Tax

In this article, we will explore how to display prices with and without tax simultaneously in WooCommerce. This can be a helpful feature for customers to understand the total cost of their purchase, especially in countries where tax rates may vary.

There are 3 ways to show the prices with and without tax in WooCommerce, let's investigate them all.

¶Using WooCommerce settings

Arguably the simplest method. WooCommerce has built-in options for displaying prices with or without tax. To configure these settings, follow these steps:

1. Log in to your WordPress dashboard.
2. Go to WooCommerce > Settings > Tax.
3. In the "Price display suffix" field, enter the following text: {price_including_tax} incl. tax (excluding the backticks)
4. Save your changes.

Now, when you view the product prices on your website, you will see the price without tax, followed by the price including tax. Simple.

¶Use code snippets

If you want more control over how the prices are displayed, you can use custom code snippets. Add the following code to your theme's functions.php file or a custom plugin:

add_filter('woocommerce_get_price_html', 'show_price_with_and_without_tax', 20, 2);
function show_price_with_and_without_tax($price, $product) {
    if (!$product->is_taxable()) {
        return $price;
    }

    $price_excluding_tax = wc_get_price_excluding_tax($product);
    $price_including_tax = wc_get_price_including_tax($product);

    return wc_price($price_excluding_tax) . ' excl. tax | ' . wc_price($price_including_tax) . ' incl. tax';
}

This code hijacks the function that outputs the price using a WordPress filter. It will then add both the including and excluding tax variations, and separates the two with a pipe character (|). You can tweak the line beginning with return to change the formatting.

¶Using a Plugin to Show Prices with and without Tax

Lastly, there are several plugins available that can help you display prices with and without tax at the same time.

To use a plugin, find the plugin on the wordpress.org plugin website, then:

1. Login to your WordPress dashboard
2. Navigate to Plugins
3. Search for the plugin
4. Click Install
5. Click Activate
6. Configure the plugin as appropriate

Now, when you view the product prices on your website, you will see the price without tax, followed by the price including tax.

Please note: We always recommend NOT using a plugin if that is an option. Plugins generally add overhead, bloat and another potential security risk for your website and store.

By displaying prices with and without tax at the same time, you can provide a more transparent shopping experience for your customers. Whether you choose to use WooCommerce's built-in settings, custom code snippets, or a plugin, there are various ways to achieve this in your online store.