Jump to content

add to cart button reducing once added

Recommended Posts

Site URL: https://www.sundayseltzer.co.uk/barge-drinks

Hi there,

 

I have managed to re label all my 'add to cart buttons' and the are looking great however once the button has been pressed and the product 'added!' to cart the button reduces in size by approx 25% . if you press the button again, it reduces by a further 25% etc etc.
 

how can I stop the button reducing every time the product has been added to cart. in the images you can see the 'beer can' product has reduced.

regards,

Elvin 

Screenshot 2021-07-06 at 16.33.32.png

Screenshot 2021-07-06 at 16.33.22.png

Link to comment
  • Replies 6
  • Views 615
  • Created
  • Last Reply
2 hours ago, sundayseltzer said:

Site URL: https://www.sundayseltzer.co.uk/barge-drinks

Hi there,

 

I have managed to re label all my 'add to cart buttons' and the are looking great however once the button has been pressed and the product 'added!' to cart the button reduces in size by approx 25% . if you press the button again, it reduces by a further 25% etc etc.
 

how can I stop the button reducing every time the product has been added to cart. in the images you can see the 'beer can' product has reduced.

regards,

Elvin 

Screenshot 2021-07-06 at 16.33.32.png

Screenshot 2021-07-06 at 16.33.22.png

Looks like for some reason the button get's applied an inline style that continues to reduce the width. That might be a Squarespace bug. However, try adding this to Custom CSS:

.product-block .productDetails.center .sqs-add-to-cart-button-wrapper {
  width: 100% !important;
} 

 

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
44 minutes ago, sundayseltzer said:

Hi @NickScola

that worked perfect for the size reduction, however the button, once pressed, shoots off to a left alignment.
is there anyway to keep it centre aligned after being pressed?

 

thanks

Elvin

That's so strange. Add this:

.sqs-add-to-cart-button { margin: 0 auto; }

 

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
4 minutes ago, sundayseltzer said:

@NickScola Fantastic, that has worked perfectly!!

Do you know a code to reduce the block padding around the 'add to cart button'?
I am trying to stack the buttons closer together.

thanks,

Elvin

Yes, there's a few ways to go about this. Have a go at this:

.product-block .buy-button, .product-block .sqs-add-to-cart-button-wrapper {
  margin-top: 5px;
  margin-bottom: 5px;
}

Also, if your'e wondering why the checkout button is not moving closer its because there's a blank Squarespace block before the checkout button

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
On 7/6/2021 at 10:39 PM, sundayseltzer said:

Site URL: https://www.sundayseltzer.co.uk/barge-drinks

Hi there,

 

I have managed to re label all my 'add to cart buttons' and the are looking great however once the button has been pressed and the product 'added!' to cart the button reduces in size by approx 25% . if you press the button again, it reduces by a further 25% etc etc.
 

how can I stop the button reducing every time the product has been added to cart. in the images you can see the 'beer can' product has reduced.

regards,

Elvin 

Screenshot 2021-07-06 at 16.33.32.png

Screenshot 2021-07-06 at 16.33.22.png

Hi. I see some small problems. Do you want to fix these?

Site URL: https://www.sundayseltzer.co.uk/

1. (Tablet/Mobile – Overlay menu) Increase font size?

sundayseltzer.co_.uk-01-min.png

2. (Tablet – Footer) “Competition” (in T&C’s column) don’t lie on the same row. (Email too)

sundayseltzer.co_.uk-02-min.png

3. (Desktop/Tablet – homepage) Make 3 buttons on the same line

www.sundayseltzer.co_.uk-03-min.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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