/ Maatwerk, PHP, WooCommerce, WordPress

Display WooCommerce products with and without tax

I’ve recently run into the problem that is not possible for a WooCommerce shop to display both VAT and EX. VAT prices at the same time. Though this was possible in earlier version (if I remember correctly).

Sure, there are many plugins that are able to change the price suffix, but finding the right plugin can become a lengthy process and I like to code these fixes myself, but more importantly: it keeps your WordPress install clean from unnecessary code.

WooCommerce provides a lot of actions and filters which allows developers to change or add elements to their WooCommerce shop. The hook we need is the ‘woocommerce_get_price_html’, which allows us to change the way a price is displayed in the shop overview and on the product page.

Using WooCommerce settings

The quickest way of displaying the tax is through the WooCommerce settings. Log in to your admin dashboard and navigate to (depending on your language):

WooCommerce > Settings > Tax

And scroll down to: ‘Price Display Suffix’ or in Dutch: Prijsweergave-achtervoegsel.

If you are displaying the prices including VAT, you’ll have to add the following to the field:

{price_excluding_tax}

If you are displaying the prices excluding VAT, you’ll need to add:

{price_including_tax}

By hovering over the question mark, you’ll receive some detailed explanation on it’s usage.

Applying tax/vat to all WooCommerce products

Whilst using the WooCommerce settings is the most easiest way, you can also achieve it by filtering the WooCommerce price by adding our own function. This allows us to add our own classes with which we can style our price with!

Copy the code below into your functions.php to display both product prices, with and without taxes.

function edit_price_display() {
    global $product;
    $price = $product->price;
    $price_incl_tax = $price + round($price * ( 21 / 100 ), 2);
    $price_incl_tax = number_format($price_incl_tax, 2, ",", ".");
    $price = number_format($price, 2, ",", ".");
    $display_price = '<span class="price">';
    $display_price .= '<span class="amount">€ ' . $price_incl_tax .'<small class="woocommerce-price-suffix"> incl BTW</small></span>';
    $display_price .= '<br>';
    $display_price .= '<span class="amount">€ ' . $price .'<small class="woocommerce-price-suffix"> excl BTW</small></span>';
    $display_price .= '</span>';
    echo $display_price;
}
add_filter('woocommerce_get_price_html', 'edit_price_display', 10, 2);

* Note that I live in the Netherlands, so we generally pay 21% taxes on most of our goods. To be sure, double check the tax percentage you pay in your country.

The ‘woocommerce_get_price_html’ hook is called everytime a product is displayed your screen.
– On line 2 and 3 we use the product ID to get it’s price.
– On the 4th line we calculate the amount of tax (21% of the normal price), round off the tax amount to 2 decimal behind the comma and add it to the original price.
– From line 6 to 12 we display the original price as well as the price including tax using the default WooCommerce price markup.
– Finally we echo the $display_price, in which we’ve save out HTML code.

Because we made use of the default WooCommerce classes, we let WooCommerce do all the hard work of styling the price output (we’re programmers, not designers :P).

Applying tax/vat only on the single WooCommerce product page

What if we only want to display the tax or vat on the single product page? Easy, just wrap the code into an if statement, checking if the page is a single product page. If so, calculate the price, if not return the normal price, passed as parameter in the function.

function edit_price_display($price, $instance) {
    global $product;

    if(is_singular('product')) {
        $price = $product->price;
        $price_incl_tax = $price + round($price * ( 21 / 100 ), 2);
        $price_incl_tax = number_format($price_incl_tax, 2, ",", ".");
        $price = number_format($price, 2, ",", ".");
        $display_price = '<span class="price">';
        $display_price .= '<span class="amount">€ ' . $price_incl_tax .'<small class="woocommerce-price-suffix"> incl BTW</small></span>';
        $display_price .= '<br>';
        $display_price .= '<span class="amount">€ ' . $price .'<small class="woocommerce-price-suffix"> excl BTW</small></span>';
        $display_price .= '</span>';
        echo $display_price;
    } else {
        echo $price;	
    }
}
add_filter('woocommerce_get_price_html', 'edit_price_display', 10, 2);

Applying tax/vat to specific WooCommerce products

Below is an edit of the code above, allowing the code to function only for specific products by using their ID.
I’ve only added an if statement that compares the current product with the desired ID. I would only apply this for a maximum of 5 products, to keep everything neat and clean and. For even more products you should look at adding custom meta fields (like a checkbox) to a WooCommerce product in the WordPress dashboard, which is a more user friendly solution for those who aren’t experienced programmers.

function edit_price_display() {
    global $product;
    if($product->id == 'ID'){
         // Note that the 'ID' must be replaced by the specific product ID you want to change.
        $price = $product->price;
        $price_incl_tax = $price + round($price * ( 21 / 100 ), 2); 
        $price_incl_tax = number_format($price_incl_tax, 2, ",", ".");
        $price = number_format($price, 2, ",", ".");
        $display_price = '<span class="price">';
        $display_price .= '<span class="amount">€ ' . $price_incl_tax .'<small class="woocommerce-price-suffix"> incl BTW</small></span>';
        $display_price .= '<br>';
        $display_price .= '<span class="amount">€ ' . $price .'<small class="woocommerce-price-suffix"> excl BTW</small></span>';
        $display_price .= '</span>';
        echo $display_price;
    }
}
add_filter('woocommerce_get_price_html', 'edit_price_display', 10, 2);

Include and exclude VAT to a WooCommerce variation product price

The code above only works for the regular entered price in WooCommerce, but what if we have price variations? Simple, we just add one line below the already existing ‘add_filter’ .

add_filter('woocommerce_get_variable_price_html', 'edit_price_display', 10, 2);

With this additional ‘add_filter’ apply our function when WooCommerce calls the price for a product with several variations. This allows us to keep our code clean; creating functionality once and adding it to several WooCommerce filters!

function edit_price_display() {
    global $product;
    $price = $product->price;
    $price_incl_tax = $price + round($price * ( 21 / 100 ), 2);  
    $price_incl_tax = number_format($price_incl_tax, 2, ",", ".");
    $price = number_format($price, 2, ",", ".");
    $display_price = '<span class="price">';
    $display_price .= '<span class="amount">€ ' . $price_incl_tax .'<small class="woocommerce-price-suffix"> incl BTW</small></span>';
    $display_price .= '<br>';
    $display_price .= '<span class="amount">€ ' . $price .'<small class="woocommerce-price-suffix"> excl BTW</small></span>';
    $display_price .= '</span>';
    echo $display_price;
}
add_filter('woocommerce_get_price_html', 'edit_price_display', 10, 2);
add_filter('woocommerce_get_variable_price_html', 'edit_price_display', 10, 2);

Cleaning up the variation product price

As the code above works, outputting all prices for every variation is an ugly solution. We can still use the same code for formatting the display, adding classes, custom messages, etc., we only need to change the hook we add our filter to from ‘woocommerce_get_variable_price_html’ to ‘woocommerce_available_variation’.

function edit_selected_variation_price( $data, $product, $variation ) {
    $price = $variation->price;
    $price_incl_tax = $price + round($price * ( 21 / 100 ), 2);  
    $price_incl_tax = number_format($price_incl_tax, 2, ",", ".");
    $price = number_format($price, 2, ",", ".");
    $display_price = '<span class="price">';
    $display_price .= '<span class="amount">€ ' . $price_incl_tax .'<small class="woocommerce-price-suffix"> incl BTW</small></span>';
    $display_price .= '<br>';
    $display_price .= '<span class="amount">€ ' . $price .'<small class="woocommerce-price-suffix"> excl BTW</small></span>';
    $display_price .= '</span>';
    $data['price_html'] = $display_price;
    return $data;
}
add_filter( 'woocommerce_available_variation', 'edit_selected_variation_price', 10, 3);

Reactions are closed / Reacties zijn gesloten

Due to the high amounts of spam and other hateful messages, reactions to my blogs have been closed. I would like to refer you to my contact form if you have questions about my code, in need of my services and wanting to request a quote.

Door de grote hoeveelheid spam en andere vervelende berichten heb ik moeten besluiten om reacties op mijn blogs uit te zetten. Ik zou je daarom door willen verwijzen naar mijn contactformulier als je vragen hebt over mijn code, gebruik wilt maken van mijn diensten en een offerte aan wilt vragen.