Jump to content

Help with customizing Add to Cart Buttons

Recommended Posts

I came across this bit of code that reduces the width of Add to Cart Buttons. It works, but then makes them left adjacent. Is there a way to make it so the button is still centered under the product? I really appreciate the help!

.sqs-add-to-cart-button {
    width: 50% !important;
}

Link to comment

@Stacysays8 Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to center the Add to Cart button

.ProductItem-details .sqs-add-to-cart-button-wrapper {
    display: flex !important;
    justify-content: center;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
10 minutes ago, Lesum said:
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    display: flex !important;
    justify-content: center;
}

Hi, unfortunately this one didn't work, but I really appreciate you trying!

Link to comment

@Stacysays8 You can add this code to center the Add to Cart buttons on Shop pages. 

.products.collection-content-wrapper .sqs-add-to-cart-button-wrapper {
    display: flex !important;
    justify-content: center;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
7 minutes ago, Lesum said:

@Stacysays8 You can add this code to center the Add to Cart buttons on Shop pages. 

.products.collection-content-wrapper .sqs-add-to-cart-button-wrapper {
    display: flex !important;
    justify-content: center;
}

 

It worked!! Thank you so much for all of your help 🙂

Link to comment

Create an account or sign in to comment

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

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