Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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

Recommended Posts

So I found this code that works to display the currency (USD) in the product page, although once you make a change to the product (ie: size, colour) it disappears again. I need to be able to show the currency in my pricing, both on the product page and in checkout, otherwise its very confusing to customers (I'm a Canadian business selling in USD).

Here is the code I'm using to display USD in product pages, which works until you select modifiers:

".sqs-money-native:before { content: none !important; } .sqs-money-native:after { content: ' USD' !important; }"

This is the version for cart currency display, but I haven't had any luck with it at all:

.sqs-fullpage-shopping-cart-content .cart-container .item-price .price:first-letter, .sqs-fullpage-shopping-cart-content .cart-container .subtotal .price:first-letter { color: #fff; } .sqs-fullpage-shopping-cart-content .cart-container .item-price .price:after, .sqs-fullpage-shopping-cart-content .cart-container .subtotal .price:after { content: ' USD' !important; }

Can anyone help amend this to display for all product variants, but even more importantly "in cart"? It seems completely ridiculous that Squarespace doesn't display currency in cart, its causing me a ton of problems. Any help is greatly appreciated!

Edited by tgtstudios
Initial Revision

Share this post

Link to post

You can use the same code that worked. All you have to do is to replace the class to the one you want to change. i.e. change the words in bold:

.sqs-money-native:before { content: none !important; } .sqs-money-native:after { content: ' USD' !important; }

To find the class you want to change, if you're using chrome... you can right click on your webpage, and click "inspect". Now a window will appear, on the top left hand side, there's an arrow with a box (next to Elements), click on that, and then click on your price in your cart. It will highlight and tell you class = "whatever it is here". Just replace the words in bold with the new class. It should work.

In my case, it was:


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

//Cart subtotal

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

Not sure if the class is the same across the board. Hope this helps.

Edited by nicktiang
Initial Revision

Share this post

Link to post

@nicktiang Thank you for sharing

Really helpful and a lifesaver

I was just about to move the whole store to Shopify and couldn't believe that they do not have that simple feature!

Here is what I ended up using. Hope it helps someone else :)

/* CSS for Product USD -------- /.sqs-money-native:before { content: $ !important; } .sqs-money-native:after { content: ' USD' !important; } / End of CSS for Product USD -------- */

/* CSS for Cart USD -------- *///Cart.CartTableRow-itemPrice:before { content: $ !important; } .CartTableRow-itemPrice-26eXS:after { content: ' USD' !important; }

//Cart subtotal.CartTable-subtotalPrice:before { content: $ !important; } .CartTable-subtotalPrice-2JFeD:after { content: ' USD' !important; } /* End of CSS for Cart USD -------- */

Share this post

Link to post

Use nicktiang's code, it worked for me on Fulton template:

/*Adds USD after item prices in cart*/
.CartTableRow-itemPrice-26eXS:before { content: none !important; } .CartTableRow-itemPrice-26eXS:after { content: ' USD' !important; }

/*Adds USD after subtotal in cart*/
.CartTable-subtotalPrice-2JFeD:before { content: none !important; } .CartTable-subtotalPrice-2JFeD:after { content: ' USD' !important; }

Share this post

Link to post

Create an account or sign in to comment

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

  • Create New...