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

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

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>

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.

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. 

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. 

You edited some symbol make it invalid

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

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

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

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>

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;

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;

You mean add a space between 2 buttons??

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?

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?

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

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)

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)

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

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.

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.

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>

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

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

It looks like you solved this?

Yeah, thanks Tuan. I really appreciate all your help with this.