How to Remove Decimals from Prices in BigCommerce

I was working on a custom jewelry shop hosted on BigCommerce and needed to improve the display of the prices on the homepage and category pages by removing decimals and including ranges. Here are the solutions I came up with.

Removing the Decimals from Prices

I wanted to clean things up by using whole dollars ($88 instead of $88.00, for example). I started by logging into the BigCommerce admin panel, going to Store Setup > Currencies, and editing USD from there. There is an option to change Decimal Places, but after I changed it from 2 to 0, I put an item in the cart and found that sales tax was being rounded to the whole dollar! So, that approach wouldn’t work. (I went back and changed the value to 2.)

Next, I went hunting through the template files and found price.html, which seemed promising, but soon found that it wouldn’t help either — the price was coming in already formatted as {{price.rrp_without_tax.formatted}}. And, I didn’t have access to where that formatting was happening. I’d have to come up with something after the page loaded.

JavaScript (and jQuery) to the rescue! I put together this script that searches for “.00” and replaces it with an empty string, and included it in the footer via Admin > Storefront > Footer Scripts:

That did the trick. Decimals are removed from the homepage and category pages, but remain on the product pages and in the shopping cart. Sure, it’s a bit of a hack, but it gets the job done.

Including a Price Range on the Homepage

Each product in this store has multiple options that can change the price, so it was misleading to include just one price for each product on the homepage and category pages. Unfortunately, there is no straightforward way of making this happen in BigCommerce. But… I did come up with a creative workaround.

The price that appeared for each product is the base price, so rather than a range, I could just say “from $88” or something like that. Adding that from is easy with a bit of CSS:

Just paste that at the bottom of theme.scss by going to Admin > Storefront > My Themes > Advanced > Edit Theme Files and then browsing into assetts > scss.

Hopefully this helps save you some time!

Note: The class names for both of these might be different depending on what theme you’re using, so you might have to track down your own class names and update the code.

Comments

Loading…

This article was published on March 16th, 2018 by Robert James Reese in the following categories: BigCommerce, CSS, JavaScript, and jQuery. Before using any of the code or other content in this post, you must read and agree to our terms of use.