Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • 0
acfphoto

Add another button to a product page?

Question

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>

Edited by acfphoto
Tidy
GregoryJ, GregoryJ, acfphoto and 1 other like this

Share this post


Link to post

17 answers to this question

Recommended Posts

  • 5

Without knowing what you want this pre-cart page to provide in order to know if there is a better solution – to achieve what you describe, you could try something like this:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>
   $(function() {
     $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper");        
   });
</script>

You can paste that code into the Header Code Injection area in your site settings, that way this same button will automatically get inserted after each add to cart button anywhere on your site.

Then paste this into the CSS Editor:


.checkoutbutton {
 font-family: arial;
 font-size: 12px;
 color: #fff;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 width: 250px;
 text-decoration: none;
 padding: 14px 18px;
 background-color: #292929;
}
.checkoutbutton:hover {
 color: #fff;
 background-color: #292929;
}

Revise this CSS to get it to look how you want it – change width, font, font size, colors, padding, etc. But, depending on what your goal is, there may be a better solution.

Hope that helps!

Edited by VUELA

Share this post


Link to post
  • 2

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:

Add a checkout button next to the “add to cart” button
Edited by GRSM

X-Gen born digital. Food Enthusiast. Traveler.

Share this post


Link to post
  • 2

@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.

Edited by rebeccastlynn

Share this post


Link to post
  • 1

@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!!

Edited by mtinnin

Share this post


Link to post
  • 1

@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?

Edited by This Guy

Share this post


Link to post
  • 1

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!

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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 !

Share this post


Link to post
  • 0

@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?

Share this post


Link to post
  • 0

@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.

Edited by Sebas

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...