Jump to content

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

Recommended Posts

  • 2 weeks later...

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: "$";
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...

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; }

Bildschirmfoto 2021-01-13 um 11.59.33.png

Link to comment
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:

 

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 months later...
  • 3 months later...
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,

 

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 6 months later...
  • 10 months later...

@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?

Link to comment

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. 

image.gif.47f707aadfd22af8c4a3a8e909c3e7bd.gif

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

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.