Remove Trailing Zeros From Storefront Price

scedelstein · ‎08-21-2020

Hi there! I'm using the Debut theme and would like to remove the trailing zeros from my whole number product prices in the storefront. Here's an example of another brand doing it successfully in their product recommendation section.

Can anyone advise how to tackle this?

diego_ezfy · ‎08-21-2020

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function updatePrice(){
var prices = document.querySelectorAll(`.price-item`);


if (!prices)return;

for (var each of prices){
each.innerText = each.innerText.replace('.00', '');
}
}

 window.onload = function() {
setTimeout(updatePrice, 50);
            }

</script>

Ideally you'd want to get a developer to code it in a cleaner way into your theme via Liquid, but this will do the trick.

Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

View solution in original post

diego_ezfy · ‎08-21-2020

Hello,

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

diego_ezfy · ‎08-21-2020

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function updatePrice(){
var prices = document.querySelectorAll(`.price-item`);


if (!prices)return;

for (var each of prices){
each.innerText = each.innerText.replace('.00', '');
}
}

 window.onload = function() {
setTimeout(updatePrice, 50);
            }

</script>

Ideally you'd want to get a developer to code it in a cleaner way into your theme via Liquid, but this will do the trick.

Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

scedelstein · ‎08-21-2020

Diego, thank you so much. It worked beautifully!

diego_ezfy · ‎08-21-2020

@scedelstein hey, glad to hear. You're welcome!

Next time you need something feel free to contact me personally via e-mail, I'll be happy to help.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

Chemistry · ‎11-11-2023

Hey Diego,

i wanted to add that when i choose another size for example from my website, the extra two zeros are added again at the end of the price.

is there a way to avoid that ?

DaanKroon · ‎10-08-2022

Hi Diego,

Thanks for the solution! But on the theme Optimal I don't see the codes over there. Can you maybe help me where to find the and copy paste this code?

Cheers! 🙂

PacificOaks · ‎11-14-2022

Hi Diego
Ive tried the above step but didn't work for my store, I am working with minimal theme and below is my code, please let me know if its adjustable to remove those two extra zeros from the prices.. thanks a lot in advance.

<!doctype html>

<head>

{% if settings.favicon %}

{% endif %}

<title>

{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

</title>

{% if page_description %}

{% endif %}

{% include 'social-meta-tags' %}

window.theme = window.theme || {};

var theme = {

strings: {

addToCart: {{ 'products.product.add_to_cart' | t | json }},

soldOut: {{ 'products.product.sold_out' | t | json }},

unavailable: {{ 'products.product.unavailable' | t | json }},

zoomClose: {{ "products.zoom.close" | t | json }},

zoomPrev: {{ "products.zoom.prev" | t | json }},

zoomNext: {{ "products.zoom.next" | t | json }},

addressError: {{ 'map.errors.address_error' | t | json }},

addressNoResults: {{ 'map.errors.address_no_results' | t | json }},

addressQueryLimit: {{ 'map.errors.address_query_limit_html' | t | json }},

authError: {{ 'map.errors.auth_error_html' | t | json }}

},

settings: {

// Adding some settings to allow the editor to update correctly when they are changed

enableWideLayout: {{ settings.enable_wide_layout }},

typeAccentTransform: {{ settings.type_accent_transform }},

typeAccentSpacing: {{ settings.type_accent_spacing }},

baseFontSize: '{{ settings.type_base_size }}',

headerBaseFontSize: '{{ settings.type_header_size }}',

accentFontSize: '{{ settings.type_accent_size }}'

},

variables: {

mediaQueryMedium: 'screen and (max-width: 768px)',

bpSmall: false

},

moneyFormat: {{ shop.money_format | json }}

}

document.documentElement.className = document.documentElement.className.replace('no-js', 'supports-js');

</script>

{% comment %}

If you store has customer accounts disabled, you can remove the following JS file

{% endcomment %}

{% if request.page_type contains 'customers/' %}

{% endif %}

{%- render 'asl_snippet' -%}

</head>

{% section 'header' %}

</div>

</main>

{% section 'footer' %}

{%- if request.page_type == 'index' -%}

</p>

{%- endif -%}

{% if request.page_type == 'product' or request.page_type == 'index' %}

{% endif %}

<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>

<li id="a11y-external-message">{{ 'general.accessibility.new_window' | t }}</li>

<li id="a11y-new-window-external-message">{{ 'general.accessibility.new_window_and_external' | t }}</li>

</ul>

</body>

</html>

Chemistry · ‎11-10-2023

My god man, you're a freaking life saver !

Remove Trailing Zeros From Storefront Price

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links