How To Display Currency Type (USD) After Price and In Cart

Site URL: http://afexancosmetics.com/shop-online/

How do I display the currency of my site on items in the commerce section? I want people to immediately know that the items are listed in USD. I am wanting to have the USD display on the items wherever the prices are listed. 

Add to Home > Design > Custom CSS

body.native-currency-code-usd .sqs-money-native:before {
   display: none;
}
body.native-currency-code-usd .sqs-money-native:after {
   content: "$";
}

Hi there, 

This code works perfectly for products on the page but when the price is displayed in the cart the currency is still shown before the price. 

I tried to use this code and can display the currency after the price but I cannot seem to hide the currency before. 

Any thoughts?

.CartTableRow-itemPrice-26eXS:before { content: none !important; }
.CartTableRow-itemPrice-26eXS:after { content: '€' !important; }

.CartTable-subtotalPrice:before { content: none !important;} 
.CartTable-subtotalPrice-2JFeD:after { content: '€' !important; }

On 1/13/2021 at 10:59 AM, savannahjanssen said:

I tried to use this code on the cart page and can display the currency after the price but I cannot seem to hide the currency before. 

See my updated solution below:

Makes absolute sense! Thanks for the reply. 

Do you by any chance know of any JavaScript that has targeted this specific problem yet? Or a plugin available for Squarespace 7.1?

On 1/13/2021 at 8:16 AM, savannahjanssen said:

Makes absolute sense! Thanks for the reply. 

Do you by any chance know of any JavaScript that has targeted this specific problem yet? Or a plugin available for Squarespace 7.1?

https://www.multilingualizer.com/

I used this on Squarespace 7.1 and it works perfectly!

On 7/8/2020 at 4:47 AM, tuanphan said:

Add to Home > Design > Custom CSS

body.native-currency-code-usd .sqs-money-native:before {
   display: none;
}
body.native-currency-code-usd .sqs-money-native:after {
   content: "$";
}

 

Hello Tuanphan, is it possible to do this with Mexican Pesos (MXN)? 

I'm struggling with US customers visiting my website (loesencial.mx) and thinking everything is (hyper expensive) in USD when it really is MXN. 

Thanks in advance,

@axelvargas

This actually turns out to be a little trickier with products that have variants. The following code will change the symbol for Mexican pesos when no variants are selected. It would go in Design > Custom CSS.

body.native-currency-code-mxn .sqs-money-native::before {

  content : 'MX$';
  
  }

However. When a variant is selected SS does not use similar underlying structures that allow the above CSS to work. This issue has been reported to SS in the past. It appears that this is something SS will not be changing anytime soon.

Here is one possible solution. Please see Store Product Detail Price Add Sqs-Money-Native for Variants.

If you decide to use it let us know how it goes.

Mexican peso.

Hello thanks for your help, I added the code but there's no space between the price and the currency type. Can someone send me coding so there can be a space> Thank you

@MoodLiving

Don't know which code you are using as you didn't provide a URL for us to look at. But if you use a variation on the CSS mentioned previously did you put a space in the content property value?

content : ' USD';

Let us know how it goes.

@creedon I'm struggling to figure out how to add my pricing in this format: $450.00 USD

Here's the link to my site: carolinepinney.com 

I currently have custom CSS set up by someone else so I'm not sure a) what to add to the CSS and b) where to add it. would it be at the very end?

Hi Caroline

You don't need to use custom code to customise the currency format like this: US$450.00. You can use the built-in currency formats and avoid all the issues with custom code not formatting correctly on different pages.

Squarespace formats the currency according to the Site Language and Region Format setting. You'll find this in Settings > Language & Region. The next step may sound counter intuitive so please bear with me 🙂

If you set the Site Language and Region Format to English (Canada) instead of English (United States) Squarespace will show your prices with US$ instead of $, because it assumes that your Canadian audience will need to know that the currency is in US Dollars and not their native currency. When it is set to your own country, it assumes your audience will not require the additional letters. 

Did this help? Please give feedback by clicking an icon below  ⬇️

Hey Paul,

Thanks for your reply! I'm hoping to be able to have the formatting with "USD" displayed after the pricing like this:

$450.00 USD

How would I go about that?

Caroline

@paul2009

@creedon do you have a resolution for the above? ^

8 hours ago, Cppinney said:

do you have a resolution for the above?

Remove any previous attempts at this effect. Keep in mind this effect is only skin deep. It will not change how SS shows prices in the backend.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .collection-type-products .grid-prices {
  
    display : flex;
    font-size : inherit;
    gap : 0.5em;
    
    }
    
  .products.collection-content-wrapper .grid-prices::after,
  .ProductItem .ProductItem-details .product-price::after, /* simple */
  .pdp-layout .pdp-details .product-price::after /* full, half, wrap */
  
    {
    
      content : ' USD';
      
      }
      
  </style>

Let us know how it goes.

@creedon yep that did it-- thank you! Only issue is the USD showing below pricing on shop landing page now: https://www.carolinepinney.com/shop-available-work

It does show up next to pricing on the PDPs though

On 1/31/2023 at 4:27 AM, Cppinney said:

@creedon yep that did it-- thank you! Only issue is the USD showing below pricing on shop landing page now: https://www.carolinepinney.com/shop-available-work

It does show up next to pricing on the PDPs though

Add this under above code

<style>
  .grid-prices {
    display: flex;
}
.grid-prices .product-price {
    padding-right: 5px;
}
</style>

On 1/30/2023 at 1:27 PM, Cppinney said:

Only issue is the USD showing below pricing on shop landing page now

I have updated my code post.

I updated my post on Monday and attempted to post that I had done so but apparently it didn't go through.

I have just figured out that if I set my website settings Language & Region to Canada, that all prices and checkout will list in USD. YAY for me!!. I was having this issue as a Canadian that was trying to sell in USD as most of my customers are from the US. I just had a Canadian customer complain to me after they were stung for a conversion fee and had no idea until after the fact that it was in USD the whole time. Hope this helps someone