30th September 2014

Swap the Including & Excluding Tax Prices on a Bigcommerce Product Page

One of our clients has always displayed their prices excluding VAT because most of their business is done B2B (Business to Business).

Google Shopping’s policy regarding VAT in feeds is now:

The prices of the items submitted in the data feed must be inclusive of any applicable taxes such as value-added tax … The prices submitted in the data feed must be shown on the landing page.

So, our client asked us to enable display of the VAT inclusive price, and change the Price label we had modified to say “Price (ex VAT).

When we changed this, inc VAT price became the most prominent (in red) and was displayed above the ex VAT price.  This is OK for B2C (Business to Consumer i.e. to private individuals) but could potentially put them at a disadvantage if at a quick glance their prices seemed 20% more expensive!

Inc and Ex VAT Before

So, we styled these prices to make the ex VAT price bold and the inc VAT price grey instead of red, but still easily readable.

But the inc VAT price still displays above the ex VAT by default, so is the first price that someone would read.  They preferred that the prices were swapped.

First, I used some javascript in the product.html template and ProductDetails.html panel to swap the prices.  It worked, but we always test the changes we make and found that it only worked on the initial page display.  If any rules were triggered (e.g. the customer chooses a different product size) then the price didn’t update!

So, we had to find a different solution, and it turned out a simpler and more elegant one!

We had already created spans to style the inc and ex VAT prices, so we just added this CSS to the inclusive VAT span:

float: left;
clear: both;

Adding some additional code to tidy up the spacing etc. it works perfectly and of course, when any options are changed the price updates fine, as we’re not affecting the code, only the way it is displayed.

Inc and Ex VAT After

30th September 2014

Leave a Reply