Jump to content

Reduce width of "add to cart" button on Product pages

Recommended Posts

  • Replies 6
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

@mphdesign You can try adding this code snippet under Website > Utilities > Website Tools > Custom CSS

.tweak-products-add-to-cart-button.plp-add-to-cart .products.collection-content-wrapper .plp-grid-add-to-cart {
	justify-content: center !important;
	align-items: center !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
	width: 35% !important;
}
@media only screen and (max-width: 640px) {
	.ProductItem-details .sqs-add-to-cart-button-wrapper {
		width: 50% !important;
	}
}

 

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

Awesome!

To adjust the width on the shop page, you can change the width "70%" inside this block of code. You've to add this block of code with the previous code.

section.plp-grid-add-to-cart .sqs-add-to-cart-button-wrapper {
    width: 70% !important;
}

And to adjust the width on the product page, you can change the width "35%" inside this block of code. You added this block of code already:

.ProductItem-details .sqs-add-to-cart-button-wrapper {
	width: 35% !important;
}

 

Edited by Lesum
Updated the first block of code

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

@mphdesign Can you try the updated code? Here's the entire version:

.tweak-products-add-to-cart-button.plp-add-to-cart .products.collection-content-wrapper .plp-grid-add-to-cart {
	justify-content: center !important;
	align-items: center !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
	width: 35% !important;
}
section.plp-grid-add-to-cart .sqs-add-to-cart-button-wrapper {
    width: 70% !important;
}
@media only screen and (max-width: 640px) {
	.ProductItem-details .sqs-add-to-cart-button-wrapper {
		width: 50% !important;
	}
}

 

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

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.