Beth_King

Me too, Come on Squarespace, this isn't good enough we need first and surname fields at the very least.

Hello, this is exactly what I want to do on this page but with swatches. So that when you hover on a small circle the word above changes to what that marterial is. The page is here:
https://clavichord-trout-3tzg.squarespace.com/product-template
Please can you help?

Yes. It would hide them all.
Do I understand that you need to control the display at the each button level? Not as a group?

The first form is what is entered in the product detail. The second form is what SS produces for CSS from your input.
Yes. The code you show in your last post is not the full code. Please install all the code I provided. It only works if it is all there.
 

Although you can hide specific atc buttons with CSS one by one. I suggest a different method. Please see the following.
Let us know how it goes.
 

Creedon! That's brilliant thank you. I just need to add a gap/padding between the buttons. Nearly there! Thank you so much for your help. You Legend! 🙂

Ah I get it now.
I see that you installed my code but that it is not running because jQuery needs to load before my code. I think I can help you get things sorted.
In Settings > Advanced > Code Injection > FOOTER you should see a couple of lines like the following. Cut those two line out.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Paste the two lines into Settings > Advanced > Code Injection > HEADER. Remove the first line. In most cases you only need one copy of jQuery installed.
Then you'll need to do is remove the code blocks containing the current code you have for adding a button.
Let us know how it goes.

@Beth_King
If you don't want to rewrite the code you may find my code of use.
Please see the following.
 

If you go back to the 'Simple' layout it will continue to work. However on newer layouts there are now two 'product detail' sections to the page - one desktop version (that comes first) and a mobile version (that follows). Depending on the device, Squarespace hides one or other of these designs from the user. The script you've used on the site is looking for just one section and adding the button to this. As the desktop section comes first, it receives the button. The script will now need to add the button to both sections instead. Note that the code you've posted above is the CSS styles that format the button, whereas you'll need to rewrite the script that adds the button.
I hope that helps.

Did someone change the Product Detail Page design from “Simple” to one of the newer designs like Wrap, Half or Full? If so, coding will need to be changed as mobile is handled differently.

I am so disappointed and so is my client. Didn't know it applied to US and Canada only until it was too late. Already someone outside the free local shipping zone has bought a product and there's no way for them to return to pay just shipping. It makes the Squarespace eCommerce platform a poor solution for the UK. Needs automated shipping based on postcode as standard. I really hope Squarespace resolve the issue fast. https://booyavitality.co.uk We will probably have to revert to a third party like Ecwid which effects the user experience and SEO. Come on Squarespace!

I have a workaround that I use for my UK clients who need to charge more for shipping to Scottish Highlands & Islands (for example) - it could be used for any region. You can use Product Variants to fudge the system. You can see an example and explanation of the steps here:
https://www.square-help.com/products/va-va-voom
P.S. @Beth_King You could create a Service product in a hidden page to charge the shipping for that person who bought without the shipping charge being added. Just set the price to be whatever the shipping was, and send them the link to pay (if you want to). Service products can be used to charge for anything - shipping, surcharges, deposits, whatever.

This is ridiculous! We pay the full amount every year but essential features (such as this one) are limited to US and Canada. Why?? Just give the possibility to manually insert the ZIP codes if you don't have a database available. Simple and fast.