acfphoto Posted September 29, 2013 Share Posted September 29, 2013 (edited) 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 October 9, 2014 by acfphoto Tidy GregoryJ, paul2009, acfphoto and 1 other 5 Link to comment
VUELA Posted September 30, 2013 Share Posted September 30, 2013 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? Link to comment
Solution VUELA Posted September 30, 2013 Solution Share Posted September 30, 2013 (edited) 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 September 30, 2013 by VUELA zajormita 1 Link to comment
acfphoto Posted November 5, 2013 Author Share Posted November 5, 2013 Just what I need. Thanks so much VUELA! Link to comment
Guest Posted October 9, 2014 Share Posted October 9, 2014 (edited) 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: Edited October 9, 2014 by GRSM Link to comment
Milena Posted October 13, 2015 Share Posted October 13, 2015 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! Link to comment
mtinnin Posted December 29, 2015 Share Posted December 29, 2015 (edited) @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 December 29, 2015 by mtinnin Link to comment
Guest Posted March 20, 2016 Share Posted March 20, 2016 (edited) @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 March 20, 2016 by Guest Link to comment
stephaniemcn Posted August 1, 2016 Share Posted August 1, 2016 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! Link to comment
zinzin Posted July 14, 2017 Share Posted July 14, 2017 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 ! Link to comment
willryan042 Posted July 15, 2017 Share Posted July 15, 2017 @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? Link to comment
rebeccastlynn Posted July 15, 2017 Share Posted July 15, 2017 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! Link to comment
rebeccastlynn Posted July 15, 2017 Share Posted July 15, 2017 (edited) @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 July 15, 2017 by rebeccastlynn Link to comment
rebeccastlynn Posted July 15, 2017 Share Posted July 15, 2017 Also is there a way to make it so the link opens in a new window instead of the same window? Link to comment
zinzin Posted July 16, 2017 Share Posted July 16, 2017 Wow, @rebeccastlynn, thank you so so much!! It works perfectly :) Link to comment
sebastienhuard Posted January 31, 2018 Share Posted January 31, 2018 (edited) @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 January 31, 2018 by Sebas Lizzy91 1 Link to comment
Sequoia Posted March 9, 2018 Share Posted March 9, 2018 This is very helpful however, I still can't figure out how to add spacing between the 2 buttons. Can you help? Sequoia Mulgrave | Email Boss Lady + Web Design Strategist → Automating businesses through smart web design and email marketing → Freebie Center | Join E-School | Work With Me Link to comment
dearcharliemarketing Posted August 29, 2019 Share Posted August 29, 2019 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! Link to comment
Guest Posted February 24, 2020 Share Posted February 24, 2020 (edited) HI @VUELA @GRSM I’m also looking for a second button alternative I sell wallpapers and each product has a roll and a sample, I need the second button to be ‘ORDER SAMPLE’ next to roll "ADD TO CART” When I inject the code below on the header, the second button is displayed, but because each wallpaper has its respective different sample I need the href to be different for each product, how can I inject individually on each product. Any help would much appreciated. Thank you <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(function() { $("<a class='checkoutbutton' href='/commerce/show-cart'>ORDER SAMPLE</a>").insertAfter(".sqs-add-to-cart-button"); }); </script> Edited February 24, 2020 by Esquirebr Link to comment
taylor123 Posted April 24, 2020 Share Posted April 24, 2020 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; Link to comment
Lizzy91 Posted May 18, 2020 Share Posted May 18, 2020 (edited) 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! Edited May 18, 2020 by Lizzy91 I unchecked the Ajax button and it worked! Link to comment
zajormita Posted July 8, 2020 Share Posted July 8, 2020 @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! Link to comment
Beautifully-You Posted April 17, 2021 Share Posted April 17, 2021 @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 Link to comment
Lalat Posted October 6, 2021 Share Posted October 6, 2021 Is it possible to add this button in quick view page also next to add to cart button? EnrichedEducator 1 Link to comment
famm Posted September 7 Share Posted September 7 (edited) 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. Edited September 7 by famm Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment