Add another button to a product page?

I am using the Ishimoto template: Although the product page displays an “ADD TO CART” button, I need to add an additional button directly below this one that says “CHECKOUT”, and I need it to be identical (if possible) to the add to cart button.

I do realize that once a customer adds an item to the cart, the Squarespace template will then automatically display a “cart” button floating at the top of the page. However, I still need to add my own checkout button so that I can send customers to a page with more instructions before they go to the cart.

ANY help appreciated, I think I’m on the right track because I already have the following code, but I know the positioning code here is not going to align it directly under the ADD TO CART button like I need it to (because I need for my CHECKOUT button to automatically align itself with the add to cart button no matter what the browser window size is, etc):

<style>
.checkoutbutton {
 background-color: #292929;
 text-indent: 0;
 display: inline-block;
 color: #fff;
 font-color: #fff;
 font-family: arial;
 font-size: 12px;
 font-weight: normal;
 font-style: normal;
 height: 50px;
 line-height: 50px;
 width: 250px;
 text-decoration: none;
 text-align: center;
}
.checkoutbutton:hover {
 background-color: #292929;
 font-color: #fff;
}
.checkoutbutton:active {
 position: relative;
 top: 1px;
 color: #fff;
}
</style>

<p align="right"><a href="/pagelink" class="checkoutbutton">CHECKOUT >></a></p>

It may be possible that there is a better solution for what you need. Can you provide some information about what you need this pre-shopping cart page to provide?

Just what I need. Thanks so much VUELA!

If you want the Checout button to be displayed next to the “Add to Cart” and not after the wrapper (which pushes the checkout button to the next line), change part of the code to:

$("<a class='checkoutbutton' href='/commerce/show-cart'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");

Then just add some padding to the CSS and you will get something like this:

Any hint on how to add buttons like this to only one product page vs. all of them? Or how to change the link for each page? I want two buttons in each page, one that goes to cart and the other one to "customize". Each product has a different "customize" page. Does that make sense? (also, I have tried to post this question several times but it hasn't worked so I apologize beforehand if it gets duplicated.)Thanks!

@GRSM I am loving your button alternative, thank you! However I'm having a few issues. Tweaked the padding to my liking, but I'd love a space between the two buttons?

This is the page:

https://mekala-tinnin.squarespace.com/collection/lula

This is the code I'm embedding:

<script>
$(function() {
 $("<a class='checkoutbutton' href='/LINK/'>ORDER A SAMPLE</a>").insertAfter(".sqs-add-to-cart-button");
});

I'm simply trying to create space between the add to cart and order a sample button.

It's also bugging me that the text isn't the same color, but I've adjusted "color: #cccccc;" a zillion times and it makes no difference. I assume I'm not missing anything there...

.checkoutbutton { font-family: proxima-nova; font-size: 13px; font-weight: normal; color: #cccccc; letter-spacing: 3px; font-style: light; text-align: center; width: 40px; text-decoration: none; padding: 18px 32px 18px 32px; background-color: #fef5f0;}.checkoutbutton:hover { color: #cccccc; background-color: #fef7f3;}

Thank you!!

@VUELA Wanted to make use of this on my client site and found that it works perfectly to create the button. However the jquery .insertAfter function only allows and items to be placed immediately below the item in question. How would you place it to the immediate right or left on a responsive page?

Hi VUELA, Your solution for this was great, however do you know how to modify this so that the Checkout Button only appears after an item is added to the cart? Perhaps I didn't use the original code properly, but the check out link appears regardless of wether an item was added or not. Thanks!

Hi! I know close to nothing about coding so I'm counting on you folks to help me find a solution!

I'd like for my customers to be able to choose between (i) paying directly through the website (as configured by squarespace) and (ii) contacting us in order to arrange payments by check. That's why I would like to add a button next or under the already existing "add to cart" button. I would like the new button to say "Nous contacter (paiement par chèque, virement, espèces)" and to redirect customers to my contact page where there is a form where they will write their request. Thanks !

@vuela

Thanks so much for that code! It works ALMOST perfectly.

For some reason the second button only shows after I refresh the page. Then if I navigate to a different page and back to that product page, it's gone again. But if I refresh, it's there. This is happening on all my product pages.

I tried several different browsers, incognito mode, and mobile, so it seems like it's not a cache issue.

Any ideas?

Hello @VUELA , this is great! However my button is adding to the top of the page and not below the "Add to Cart" button. I copied your code exactly... I also tried @GRSM solution of adding next to the Add to Cart button instead. This worked and brought the button down from the top of the page, but I don't know how to add spacing in between the buttons. Either solution would work for me. Can either of you help? Thank you!

@zinzin this is the part of the code that is the link

'/commerce/show-cart'

so just change the link according to what your contact page is named... you can find the URL of your contact page by going to the Settings on your Contact Page.

And where is says CHECKOUT after the link, this is the part of the code that displays what is on your button, so just change the wording to whatever you'd like in this part of the code.

Also is there a way to make it so the link opens in a new window instead of the same window?

Wow, @rebeccastlynn, thank you so so much!! It works perfectly :)

@willryan042

Once something like that happened to me, and I had to turn off the Ajax option off in the design menu ; after, I did not have to refresh the page to have the element(s). Sorry if this does not help ; but for some, maybe it will.

This is very helpful however, I still can't figure out how to add spacing between the 2 buttons. Can you help?

Hi everyone, Any way to make this button responsive? I.e. Currently the view cart button looks awesome, but is splitting across two lines on mobile. Thanks in advance!

to add spacing between the buttons, add:

margin: 15px;

inside the css code, adjust px to your desired spacing and it will work

Here is my css for borders as well:

border-style: solid;
border-width: thin;
border-radius: 5px;

Hi everyone

I followed the guidelines and it worked great for me

However, the second button does not show up when I open the page. I need to refresh the page for it to show. Any suggestions on how to fix this?

Thank you!

@VUELA Thanks sooo much! I used this to add different "back to shop" link to my products, as I'm using summary pages, and didn't want the original breadcrumbs shown, as they lead back to the original product page. I love how I learn something new every time I work on my site :)) Thank you again!

@VUELA thanks for all your help with this. I have added the code as above and what has happened is that the checkout button has no link. I need it to link to the advertisers website.

And then the issue is that each product will need its own checkout button link as they'll be going to different products. Can this be done?

www.saggyandsage.com/shop-2

Is it possible to add this button in quick view page also next to add to cart button?

Is it possible to link this button to another URL instead of a checkout or add-to-cart page? 

I tried using Additional info and adding a button block there, which achieves this, but I can't get it to align properly with the half format I have applied to my product pages. See the screenshot for context.