Jump to content

Remove "Add to cart" button & replace with product buttons

Recommended Posts

How do I remove the add to cart button and move the product buttons up? I want to maintain the 2 columns in the product buttons if possible, and decrease the top/bottom spacing between buttons. I had to create product buttons as a workaround since you can't add variants to digital downloads.

https://eagle-round-fz74.squarespace.com/music/p/all-in-his-hands-choir

pw is test

Thanks!

image.png.a60ce0f40bad5c786270c7fba8e6fb0f.png

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get weekly Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

Link to comment
  • Replies 15
  • Views 722
  • Created
  • Last Reply

Top Posters In This Topic

Ok, I'm 98% of the way there...  

I came up with this code, which works... but I'm wondering if I can do something better than "margin-top: -120px" so that the spacing is consistent when a window is resized.

 

//customize add to cart for choral buttons//
.tag-choral .ProductItem-details .sqs-add-to-cart-button-wrapper
  {
  display: none !important
}

.tag-choral .ProductItem-additional{
 margin-top: -120px !important;
}

.tag-choral .sqs-add-to-cart-button-wrapper {
    margin: 0px !important;
}

@media screen and (max-width:767px) {
.tag-choral .ProductItem-additional{
 margin-top: -40px !important;
}
}

 

This is how it looks now:

image.thumb.png.c417c0358cf12caad19216277b485b9c.png

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get weekly Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

Link to comment

@tuanphan I tried using JS originally, but it removed all of the buttons because of this code:

.tag-choral .ProductItem-details .sqs-add-to-cart-button-wrapper
  {
  display: none !important;
}

Here's the code I was using for the footer -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
})
</script>

 

Any suggestions?

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get weekly Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

Link to comment

@tuanphan Is there a way to make sure the .ProductItem-additional clears .ProductItem-details so that it doesn't overlap when the screen is smaller? 

 

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get weekly Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

Link to comment
On 5/21/2024 at 10:49 PM, JessicaM said:

@tuanphan I tried using JS originally, but it removed all of the buttons because of this code:

.tag-choral .ProductItem-details .sqs-add-to-cart-button-wrapper
  {
  display: none !important;
}

Here's the code I was using for the footer -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
})
</script>

 

Any suggestions?

Use this code to Custom CSS box to override .tag-choral code

.tag-choral .ProductItem-details .ProductItem-additional .sqs-add-to-cart-button-wrapper {
    display: block !important;
}

 

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

I added that code, but it's still overlapping when the screen is shrunk -

image.thumb.png.3a57c039d8ea55bc33a366cee056fb53.png

 

Was I supposed to remove some other code, or add back the JS (that didn't work either...)? To be fair, the screen has to be pretty small before it starts overlapping, but I'm afraid it will overlap on an ipad.

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get weekly Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

Link to comment
Posted (edited)

@tuanphan This is the code I'm using... what needs to be changed so that it doesn't overlap?

//customize add to cart for choral buttons//
.tag-choral .product-price
  {
  display: none !important
}

.tag-choral .ProductItem-details .sqs-add-to-cart-button-wrapper
  {
  display: none !important
}

.tag-choral .ProductItem-details .ProductItem-additional .sqs-add-to-cart-button-wrapper {
    display: block !important;
}

.tag-choral .ProductItem-additional{
 margin-top: -13% !important;
}

.tag-hosanna-choral .ProductItem-additional{
 margin-top: -8% !important;
}

.tag-choral .sqs-add-to-cart-button-wrapper {
    margin: 0px !important;
}

 

image.png

Edited by JessicaM

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get weekly Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

Link to comment
On 5/27/2024 at 10:58 PM, JessicaM said:

@tuanphan This is the code I'm using... what needs to be changed so that it doesn't overlap?

//customize add to cart for choral buttons//
.tag-choral .product-price
  {
  display: none !important
}

.tag-choral .ProductItem-details .sqs-add-to-cart-button-wrapper
  {
  display: none !important
}

.tag-choral .ProductItem-details .ProductItem-additional .sqs-add-to-cart-button-wrapper {
    display: block !important;
}

.tag-choral .ProductItem-additional{
 margin-top: -13% !important;
}

.tag-hosanna-choral .ProductItem-additional{
 margin-top: -8% !important;
}

.tag-choral .sqs-add-to-cart-button-wrapper {
    margin: 0px !important;
}

 

image.png

You try remove this

or change -13% to 0px

image.png.3afec94dd0a31bfafe63f6bbd060a746.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

@tuanphan I removed it, but that defeats the purpose of the code because then it puts it back underneath the product item summary. I don't want the big space, which is why I had margin-top: -13%.

image.thumb.png.ebcb3491474409b8d24ebccca700a4ee.png

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get weekly Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

Link to comment
On 5/21/2024 at 10:49 PM, JessicaM said:

@tuanphan I tried using JS originally, but it removed all of the buttons because of this code:

.tag-choral .ProductItem-details .sqs-add-to-cart-button-wrapper
  {
  display: none !important;
}

Here's the code I was using for the footer -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
})
</script>

 

Any suggestions?

Use this script code

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

Use this new code to bottom of Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .span-12>.row:nth-child(1)').appendTo('.ProductItem .ProductItem-details');
});
</script>
<style>
.ProductItem .ProductItem-additional {
    margin-top: unset !important;
}
.ProductItem-details .row .productDetails .sqs-add-to-cart-button-wrapper {
    display: block !important;
     width:auto !important;
}
</style>

image.thumb.png.ac57d1fbd2e38a2385a33d5885d7e329.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

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.