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

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!

I need to know the same thing.

I need to know the same thing.

Any luck with this? Trying to figure it out myself!

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:

//Cart

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

@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 -------- */

I would like to use this code, but where do I enter it? In Advanced/CSS or somewhere else? Maybe I typed wrong, but I couldn't get it to work. Thanks so much in advance!!

husseinhallak, your code is broken and incorrect. It does not work.

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

On 5/29/2019 at 10:07 AM, supraturbo1778 said:

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

what if I want to display "minimum order is $10" on the left side of the subtotal?

 

The code worked for me on the main product page, but it is not working in the cart. I tried all three codes on this feed. Is it possible that it isn’t working because it is in test mode right now? The site is using Pedro if that is important.

@Calmillusion

I think you'll find CSS only solutions won't get the job done. They appear to work at first then when you change a quantity or use a variant the CSS breaks.

There is nothing wrong with the initial CSS but SS is manipulating things in such a way as the underlying classes are being removed so the CSS has nothing to target anymore.

For the cart please see the following.

I have a solution for v7.1 Store pages for this issue. As to Product pages for v7.0 using the Brine template family I don't have one at this time. I may be able to adapt my v7.1 for v7.0/Brine. Give me until several days after Dec. 25th to see if I've posted back. Bump this thread if I've not.

Quote

I have a solution for v7.1 Store pages for this issue. As to Product pages for v7.0 using the Brine template family I don't have one at this time.

Now there is a solution. I have updated my code.

Please see the following.