Jump to content

2nd button on product page aligned with "Add to cart" button?

Recommended Posts

Site URL: https://whale-apple-c5y9.squarespace.com/

I'm trying to place a "Checkout Now" button next to the "Add to cart" button on my product pages but nothing I've been able to find works. The "Checkout Now" button was added as a button block in the Additional Info field of the product. Would somebody mind helping me with this please? Thanks in advance

Page with example: https://whale-apple-c5y9.squarespace.com/shop/p/intentional-candle-ceremony
Password: ShuiFeng

Screenshot Product Page Buttons.png

Link to comment
  • Replies 18
  • Created
  • Last Reply

Top Posters In This Topic

Add to Settings > Advanced > Code Injection > Footer

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks so much for your response tuanphan! I've been reading the forums and your answers have always been useful, thanks for the time you put into this. 

The Checkout Now button is now below the Add to Cart button as opposed to next to it. Did I do something incorrectly?

Thanks.

Screenshot Product Page Buttons 2.png

Link to comment

I found out one of the errors - the closing bracket for the first <script> was missing. I replaced it and now it doesn't work at all, the checkout button is still centered at bottom. 

Screenshot Product Page Buttons 3.png

Link to comment
3 hours ago, ShuiFeng said:

I found out one of the errors - the closing bracket for the first <script> was missing. I replaced it and now it doesn't work at all, the checkout button is still centered at bottom. 

Screenshot Product Page Buttons 3.png

You edited some symbol make it invalid

Remove code You added, then I will check & give new code

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)

Thanks Tuan. I removed any additional code from the site, screenshots attached. The Checkout Now button is now below the Add To Cart button and moves with it on the page except it's not next to it.  

I also changed the internal squarespace domain to https://shuifeng.squarespace.com/  with the same password: ShuiFeng

 

Screenshot Product Page - Checkout Button 1.png

Screenshot Product Page Buttons 4 - Code Injection.png

Screenshot Product Page Buttons 4 - Page Header.png

Screenshot Product Page Buttons 4 - Custom CSS.png

Edited by ShuiFeng
Link to comment
Posted (edited)

OK. I've moved the button(s) up above the product description and below the price as the description became too long. Will this impact how we're going to move the Checkout Now button? Thanks.

I also changed the internal squarespace domain to https://shuifeng.squarespace.com/  with the same password: ShuiFeng

 

Screenshot Product Page Add to cart button moved.png

Edited by ShuiFeng
Link to comment

To make 2 buttons side by side, add this to Code Injection > Header

<style>
 .ProductItem-details .sqs-add-to-cart-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
  @media screen and (max-width:767px) {
  .ProductItem-details .sqs-add-to-cart-button-wrapper {
    width: 100%;
}
  }
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Awesome, it worked! Unfortunately now when I click the Add To Cart/Purchase button both buttons squish together. Is there a way to resolve that? I've tried setting a fixed width for Add To Cart/Purchase button but that doesn't resolve the issue. It's as if the Add To Cart/Purchase button shrinks on action? Thanks for your help w.this.

Fixed Width Add To Cart button:

.sqs-add-to-cart-button {
    width: 155px !important;

7 Day Clutter Clear Challenge Buttons 1.png

Link to comment
On 5/28/2022 at 2:04 AM, ShuiFeng said:

Awesome, it worked! Unfortunately now when I click the Add To Cart/Purchase button both buttons squish together. Is there a way to resolve that? I've tried setting a fixed width for Add To Cart/Purchase button but that doesn't resolve the issue. It's as if the Add To Cart/Purchase button shrinks on action? Thanks for your help w.this.

Fixed Width Add To Cart button:

.sqs-add-to-cart-button {
    width: 155px !important;

7 Day Clutter Clear Challenge Buttons 1.png

You mean add a space between 2 buttons??

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)

Yeah, a space between the buttons that stays a specific width. Picture #1 is how it looks when the page first loads which is how I want the buttons to look. Picture #2 is how it looks after I click the Add To Cart button - the buttons squish together on action for some reason?

Picture #3 is what it looks like on mobile - the space between buttons is huge but when I click the Add To Cart button on mobile, the huge space disappears and the buttons squish together again (Picture #4)

Thanks.   

EDIT: I got it, thanks! I had to change jutify-content to normal and add a right margin.

justify-content: normal;
margin-right: 10px;

How do I replicate these buttons in Product Boxes also?

Add to Cart Button Checkout Now 1.png

Add to Cart Button Checkout Now 2.png

Add to Cart Button Checkout Now Mobile 1.png

Add to Cart Button Checkout Now Mobile 2.png

Edited by ShuiFeng
Link to comment
On 5/30/2022 at 2:57 AM, ShuiFeng said:

Yeah, a space between the buttons that stays a specific width. Picture #1 is how it looks when the page first loads which is how I want the buttons to look. Picture #2 is how it looks after I click the Add To Cart button - the buttons squish together on action for some reason?

Picture #3 is what it looks like on mobile - the space between buttons is huge but when I click the Add To Cart button on mobile, the huge space disappears and the buttons squish together again (Picture #4)

Thanks.   

EDIT: I got it, thanks! I had to change jutify-content to normal and add a right margin.

justify-content: normal;
margin-right: 10px;

How do I replicate these buttons in Product Boxes also?

Add to Cart Button Checkout Now 1.png

Add to Cart Button Checkout Now 2.png

Add to Cart Button Checkout Now Mobile 1.png

Add to Cart Button Checkout Now Mobile 2.png

"How do I replicate these buttons in Product Boxes also?" >> What do you mean?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)

Sorry, I should have said Product Blocks. Within Product Blocks I need to add a Checkout button next to the Add To Cart button just like we did here for the Product Pages. 

The Product Blocks are on the page linked below:
https://shuifeng.squarespace.com/classes
Password: ShuiFeng

(the checkout button that's there now is copy/pasted into the image)

Product Blocks 1.png

Edited by ShuiFeng
Link to comment
On 6/1/2022 at 10:25 AM, ShuiFeng said:

Sorry, I should have said Product Blocks. Within Product Blocks I need to add a Checkout button next to the Add To Cart button just like we did here for the Product Pages. 

The Product Blocks are on the page linked below:
https://shuifeng.squarespace.com/classes
Password: ShuiFeng

(the checkout button that's there now is copy/pasted into the image)

Product Blocks 1.png

Can you add a text link on top of excerpt text? Then we will give code to turn it to button & move its position

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)

Sure. When you say Excerpt text do you mean the Description section (red arrow in screenshot) or the Additional Info section (in yellow)? I've created a Checkout link in both just in case and will remove the unused one.

1295812378_CheckoutButtonProductBlock1.png.49b4fed0d242624d03d9ea86e385d9e4.png

Edited by ShuiFeng
Link to comment
13 hours ago, ShuiFeng said:

Sure. When you say Excerpt text do you mean the Description section (red arrow in screenshot) or the Additional Info section (in yellow)? I've created a Checkout link in both just in case and will remove the unused one.

1295812378_CheckoutButtonProductBlock1.png.49b4fed0d242624d03d9ea86e385d9e4.png

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() {
 $('.product-block').each(function(i, e) {
     $('.product-excerpt a').appendTo('.sqs-add-to-cart-button-wrapper');
 })
});
</script>
<style>
  div.sqs-add-to-cart-button + a + a {
    display: none;
}
  div.sqs-add-to-cart-button + a {
    font-family: kepler-std;
    font-weight: 400 !important;
    font-style: normal;
    text-transform: none;
    color: #fff;
    background-color: #316684;
    border-color: #fff;
    border-radius: .4rem;
    width: 155px !important;
    min-width: 155px !important;
    margin-right: 5px;
    box-shadow: 1px 2px 10px 4px rgb(0 0 0 / 50%);
    display: inline-block;
    text-align: center;
    padding: .8em 1em;
}
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 6/4/2022 at 3:29 AM, ShuiFeng said:

Aaaha!, it works beautifully for the Product Blocks! Thank you! Except I'm left with a text based checkout link on the Product Page at the top of the item description. Is there a way to hide it or remove it? Thanks

EDIT: This is located on the Product Page for "What The Feng Do I Do With All This Shui?"   https://shuifeng.squarespace.com/shop/p/what-the-feng

Product Page Checkout Text 1.png

It looks like you solved this?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.