In B2B e-commerce, it's common to show prices with and without VAT and a way for customers to toggle between the two.

Our recommended solution to make this possible:

Show both prices in the markup of your product tile, each with different CSS class applied.
Depending on the classes you may then toggle the visibility.

Example

<html>
  <head>...</head>
  <body class="pricing-vat-included">
    ...
  </body>
</html>

 /* Pricing including VAT */
.pricing-vat-included .price-excluding {
	display: none;
}

.pricing-vat-included .price-including {
	display: block;
}

 /* Pricing excluding VAT */
.pricing-vat-excluded .price-excluding {
	display: block;
}

.pricing-vat-excluded .price-including {
	display: none;
}

/*
 * Do not forget to set the right class on each page load based on the value of your switcher
 */

// Function to toggle between classes
function togglePricing(value) {
  if (value === 'excluding') {
    document.body.classList.remove("pricing-vat-included");
    document.body.classList.add("pricing-vat-excluded");
  } else {
    document.body.classList.remove("pricing-vat-excluded");
    document.body.classList.add("pricing-vat-included");
  }
}

Note that this is just a raw example of a possible solution and it may differ, including the CSS class names, based on the details of your implementation.

📘
If you use Recommendations JS or Guided Selling JS together with the JS Implementation these plugins will by default inherit your product tile, therefore this will apply to them as well.

Price filters

Filters in your filter templates are always linked to only one attribute. Therefore, if you have a price filter it will only be relevant for one type of price that your feed contains. For your other attribute simply create another price filter, place it right underneath the first one and add relevant CSS classes in the Advanced options tab in the detail of both filters. Then you will be able to toggle the visibility of the relevant filter together with prices on your product tiles with your switcher.

Suggestions JS

The product suggestions in this plugin do not use the same product tile and it is not possible to add more than the default price in the component's markup. If you wish to show different pricing here you will need to use some custom JavaScript. To make this easier this plugin fires an event when everything is ready:

tweakwiseSuggestions({  
  on: {    
    // You can use this event to manipulate content within suggestions container
    'twn.suggestions.container.open': function () {  
      var shouldChangePricing = ... // Based on your VAT switcher value 
      if (!shouldChangePricing) return;
      
      // Query product suggestion container block
      var block = document.querySelector("[data-suggestion-type='Product']");
      if (!block) return;
      
      // Query product suggestions
      var suggestions = block.getElementsByClassName('twn-product-suggestion');
      // Iterate suggestion elements
      for (var suggestion of suggestions) {
        // Query price element
        var price = suggestion.getElementsByClassName('twn-product-suggestion__price');
        if (!price[0]) return;
        
        price[0].innerHTML = ... + " €"; // Modify element's content
      }
    },  
  }  
});

Need more control? Consider integrating Suggestions using API.