How can I change $0.00 for a free product to 'Free'

Hi everyone,

I am looking for a way to get some digital products in my store to be 'Free' instead of viewing $0.00. The word free is very powerful in ecommerce, so I'm a little taken aback as to why you would ever want to display '0.00' for an item, other than the obvious fact of it's more to code.

Would it be best to use a Javascript code-injection which changes all instances of $0 set in price to the string 'Free'?

@paul2009 Good man, exactly what I was looking for with the code-injection.

@paul2009 Thanks for that, I have been using this and really happy with the result.

Do you know if there's an alternative way to get this to work for the summary blocks?

2 hours ago, JonJonJon said:

Do you know if there's an alternative way to get this to work for the summary blocks?

I can take a look. Can you provide a working link to the page where you want to do this?

@paul2009 that would be great! 

sure:

https://shop.jonathan-gallagher.com

pw:jonjonjon

On the homepage if you scroll just a little you will see a product summary where one item doesn't have the word FREE is it just blank

Also... when removing the price from a product page, it seems to also remove it from the related products

@paul2009I was wondering if you had managed to access the site and have a look?

@JonJonJon You can fix temporarily by adding this to Design > Custom CSS

div#block-yui_3_17_2_1_1622550702609_3301 a.summary-title-link:after {
    content: "Free";
    display: block;
    margin-top: 5px;
    pointer-events: none;
}

@tuanphan Thanks very much. I see what you have done there, and can understand why you say it is a temporary fix. It might be enough for now. thank you

On 10/31/2021 at 10:39 AM, paul2009 said:

I can take a look. Can you provide a working link to the page where you want to do this?

Was a solution for this found?

On 12/21/2020 at 7:51 PM, tuanphan said:

You can add tag: no-price for these products, then share url again. We will give the code to remove price.

Hi @tuanphan I have this same wondering. I have a summary block of items but I'd like the items with the tag "free" to hide/replace the "$0.00" with the word "FREEBIE!". I've figure out how to do this on the actual product page but not for the summary block itself. The page is www.theenrichededucator.com/resources

On 4/22/2022 at 9:35 AM, EnrichedEducator said:

Hi @tuanphan I have this same wondering. I have a summary block of items but I'd like the items with the tag "free" to hide/replace the "$0.00" with the word "FREEBIE!". I've figure out how to do this on the actual product page but not for the summary block itself. The page is www.theenrichededucator.com/resources

Hi,

I see you figured it out buy using Freebie tag?

10 hours ago, tuanphan said:

Hi,

I see you figured it out buy using Freebie tag?

 

Yup! With a little perseverance and trial and error, I think I found out a solution that would look good on most devices (perhaps not landscape mobile or portrait tablets).  I add the tags as meta data to the summary blocks and used a bit of code to make the "free" tags say "FREEBIE!" and then played around with the margins to cover the $0.00 price

Hi Everyone, 

Just a quick question, why when I put this code into the footer does it only work when I refresh the page? It doesn't work on the initial page load.

Thanks in advance!

23 hours ago, rmj1981 said:

why when I put this code into the footer does it only work when I refresh the page?

I'm thinking the curse of Ajax Loading strikes again! Try, temporarily, turning off Ajax Loading to see if the problem goes away.

Please note that turning off Ajax Loading will affect the performance of your site. Ajax Loading is designed to increase the loading speed of your site after it first loads.

If the problem goes away then it is likely the code has not been written to be Ajax compatible. It would need to be rewritten to be Ajax compatible, assuming it is even possible.

You have to decide whether the custom code you are trying to use is worth turning off Ajax Loading. Or, it is worth trying to get an Ajax compatible version of the code.

paul2009 has a great article on the ins and outs of Ajax Loading. Please see Why does Squarespace code only work on refresh?

On 12/30/2020 at 5:09 AM, paul2009 said:

I provided a guide for this here:

https://sf.digital/squarespace-solutions/how-can-i-make-some-prices-poa-on-squarespace-71

Does anybody know how to keep it saying "Free" even after a size (For clothing) is selected? It will say "Free," but after somebody clicks a size option it will go back to "$0.00"

1 hour ago, 26mlembeck said:

Does anybody know how to keep it saying "Free" even after a size (For clothing) is selected? It will say "Free," but after somebody clicks a size option it will go back to "$0.00"

I wrote that solution for sites that need to hide some prices by showing them as POA (Price on application). It can be used to show "Free" instead, but only if products don't have variants. This is because POA products never have variants (it would be pointless to have variants if the product could not be purchased online 🙂) and so this code doesn't take variants into account. 

Squarespace's own code changes the price whenever you interact with variant options so, if you are using variants, you'll need a developer to write some code that responds to these updates and reformats the price each time it has been updated. 

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

5 hours ago, paul2009 said:

Squarespace's own code changes the price whenever you interact with variant options so, if you are using variants, you'll need a developer to write some code that responds to these updates and reformats the price each time it has been updated. 

@26mlembeck

If you need such code, please see the following.

Let us know how it goes.