LotNotes Posted April 1, 2021 Share Posted April 1, 2021 (edited) On 3/30/2021 at 9:47 PM, tuanphan said: Can you share link to your cart page? We can give new code The site is live: debbiemomof4.com/cart thank you. Edited April 1, 2021 by LotNotes Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 On 4/2/2021 at 12:01 AM, LotNotes said: The site is live: debbiemomof4.com/cart thank you. Add to Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a class="sqs-editable-button checkout-button t-continue" href="/tienda"><span>CONTINUAR COMPRANDO </span></a>').appendTo('._28MW26vhi.checkout'); }); </script> <style> a.t-continue { margin-left: 10px; padding-top: 1rem !important; padding-bottom: 1rem !important; } </style> ruthob93, SofiaN and artpimpress 2 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LotNotes Posted April 5, 2021 Share Posted April 5, 2021 10 hours ago, tuanphan said: Add to Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a class="sqs-editable-button checkout-button t-continue" href="/tienda"><span>CONTINUAR COMPRANDO </span></a>').appendTo('._28MW26vhi.checkout'); }); </script> <style> a.t-continue { margin-left: 10px; padding-top: 1rem !important; padding-bottom: 1rem !important; } </style> Thank you very much, @tuanphan It works. I just need to adjust the button size to be same size of the checkout button. Link to comment
nicolettely Posted June 21, 2021 Share Posted June 21, 2021 On 4/5/2021 at 2:48 PM, LotNotes said: Thank you very much, @tuanphan It works. I just need to adjust the button size to be same size of the checkout button. @LotNotes Did you figure how to adjust the button size? Link to comment
tuanphan Posted June 22, 2021 Share Posted June 22, 2021 11 hours ago, nicolettely said: @LotNotes Did you figure how to adjust the button size? Can you share link to cart page? We can check code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SofiaN Posted July 8, 2021 Share Posted July 8, 2021 On 4/5/2021 at 4:04 PM, tuanphan said: Add to Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a class="sqs-editable-button checkout-button t-continue" href="/tienda"><span>CONTINUAR COMPRANDO </span></a>').appendTo('._28MW26vhi.checkout'); }); </script> <style> a.t-continue { margin-left: 10px; padding-top: 1rem !important; padding-bottom: 1rem !important; } </style> Hi Tuanphan! Am currently trying to use this for my site! The code works! 😄 May I ask how to adjust the code to adjust the button size and to change the font of the button so that it matches the font of my Checkout button? Was also hoping to change the position of the "Continue Shopping" button as well. Please let me know if this is possible. Thank you very much! Link to comment
tuanphan Posted July 10, 2021 Share Posted July 10, 2021 On 7/8/2021 at 8:45 PM, SofiaN said: Hi Tuanphan! Am currently trying to use this for my site! The code works! 😄 May I ask how to adjust the code to adjust the button size and to change the font of the button so that it matches the font of my Checkout button? Was also hoping to change the position of the "Continue Shopping" button as well. Please let me know if this is possible. Thank you very much! With font, color, edit this code a.t-continue { margin-left: 10px; padding-top: 1rem !important; padding-bottom: 1rem !important; } to this a.t-continue { margin-left: 10px; padding-top: 1rem !important; padding-bottom: 1rem !important; font-size: 10px !important; font-family: monospace !important; } With position, can you share link to cart page on your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CHolm Posted August 21, 2021 Share Posted August 21, 2021 I need the extension for my website please. Thatskincareco.com I have tried to click on the link in this thread to purchase the code but when I click it goes nowhere. I’ve had so many customers complain that we don’t have the continue shopping link. Squarespace should definitely refine this problem. My email is carolyn@thatskincareco.com if you need other information. Thank you so much. Link to comment
tuanphan Posted August 22, 2021 Share Posted August 22, 2021 13 hours ago, CHolm said: I need the extension for my website please. Thatskincareco.com I have tried to click on the link in this thread to purchase the code but when I click it goes nowhere. I’ve had so many customers complain that we don’t have the continue shopping link. Squarespace should definitely refine this problem. My email is carolyn@thatskincareco.com if you need other information. Thank you so much. If you need to purchase plugin, you should contact Paul via his site. If you need free solution, you can share link to cart page on your site, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
paul2009 Posted August 22, 2021 Share Posted August 22, 2021 14 hours ago, CHolm said: I need the extension for my website please. I have tried to click on the link in this thread to purchase the code but when I click it goes nowhere. Hey @CHolm. I believe the Squarespace platform was experiencing an outage when you tried. You can purchase it here. tuanphan 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
ktherria Posted September 9, 2021 Share Posted September 9, 2021 Hi All, The following code worked for me to add the continue shopping button to the left above the words "shopping cart." Is there extra code I can add to put this below the items in the cart instead of above? Thanks! <script> var d1 = document.getElementById('sqs-cart-container'); function goBack() { window.history.back(); } d1.insertAdjacentHTML('beforebegin', '<p><button onclick="goBack()" align="right">← Continue Shopping</button></p>'); </script> Link to comment
tuanphan Posted September 12, 2021 Share Posted September 12, 2021 On 9/10/2021 at 4:05 AM, ktherria said: Hi All, The following code worked for me to add the continue shopping button to the left above the words "shopping cart." Is there extra code I can add to put this below the items in the cart instead of above? Thanks! <script> var d1 = document.getElementById('sqs-cart-container'); function goBack() { window.history.back(); } d1.insertAdjacentHTML('beforebegin', '<p><button onclick="goBack()" align="right">← Continue Shopping</button></p>'); </script> Can you share link to cart page? We can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SSong Posted October 29, 2021 Share Posted October 29, 2021 (edited) On 4/5/2021 at 4:04 AM, tuanphan said: Add to Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a class="sqs-editable-button checkout-button t-continue" href="/tienda"><span>CONTINUAR COMPRANDO </span></a>').appendTo('._28MW26vhi.checkout'); }); </script> <style> a.t-continue { margin-left: 10px; padding-top: 1rem !important; padding-bottom: 1rem !important; } </style> How can I put the button to the left of the checkout button instead of the right on desktop only? And make the continue shopping button on mobile the same width as the checkout button? Thank you! Edited October 29, 2021 by SSong change of mind Link to comment
tuanphan Posted October 31, 2021 Share Posted October 31, 2021 On 10/30/2021 at 3:03 AM, SSong said: How can I put the button to the left of the checkout button instead of the right on desktop only? And make the continue shopping button on mobile the same width as the checkout button? Thank you! Can you share link to cart page? We can check it again easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SSong Posted November 11, 2021 Share Posted November 11, 2021 On 10/31/2021 at 10:01 AM, tuanphan said: Can you share link to cart page? We can check it again easier This is the link. Thank you! Link to comment
creedon Posted November 12, 2021 Share Posted November 12, 2021 (edited) @SSong Add the following to Design > Custom CSS. /* begin cart checkout buttons change Version : 0.2d0 SS Version : 7.0 v7.0 Templates : Brine ( Aria, Blend, Burke, Cacao, Clay, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West ) Dependancies : LESS By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ #cart { .checkout { display : flex; gap : 1.5rem; text-align: unset; .checkout-button { margin : unset; } .checkout-button:not( .t-continue ) span { display : inline-block; width : 10rem; } } // .checkout &:not( .button-style-default ).button-style-outline .sqs-editable-button.t-continue { border-width : 0; &:hover { background-color : unset; color : black; } } } // #cart @media screen and ( min-width : 640px ) { // desktop #cart .checkout { flex-direction : row-reverse; .checkout-button:not( .t-continue ) span { display : inline-block; width : 10rem; } } } @media screen and ( max-width : 639px ) { // mobile #cart .checkout { flex-direction : column; } } // end cart checkout buttons change Let us know how it goes. Edited November 13, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
SSong Posted November 12, 2021 Share Posted November 12, 2021 18 hours ago, creedon said: @SSong Add the following to Design > Custom CSS. /* begin cart checkout buttons change Version : 0.1d0 SS Version : 7.0 v7.0 Templates : Brine ( Aria, Blend, Burke, Cacao, Clay, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West ) Dependancies : LESS By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ #cart { .checkout { display : flex; gap : 1.5rem; .checkout-button { margin : unset; } } // .checkout } // #cart @media screen and ( min-width : 640px ) { // desktop #cart .checkout { flex-direction : row-reverse; } } @media screen and ( max-width : 639px ) { // mobile #cart .checkout { justify-content : flex-end; .checkout-button:not( .t-continue ) span { display : inline-block; width : 10rem; } } } // end cart checkout buttons change Let us know how it goes. It worked, but I still want the button to be stacked on mobile, which currently, they are not (see pic). Now that I look at it, I would like to replace the Continue Shopping button into just a linked text on mobile with an added arrow, beneath the Check Out button. Thank you thank you! Link to comment
creedon Posted November 13, 2021 Share Posted November 13, 2021 8 hours ago, SSong said: It worked, but... I have updated my code post. Not sure it is 100% what you want but should be closer, hopefully. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
SSong Posted November 16, 2021 Share Posted November 16, 2021 On 11/13/2021 at 12:15 AM, creedon said: I have updated my code post. Not sure it is 100% what you want but should be closer, hopefully. Let us know how it goes. Not sure what I did wrong but the button reversal is not working at all. Link to comment
creedon Posted November 16, 2021 Share Posted November 16, 2021 1 hour ago, SSong said: Not sure what I did wrong but the button reversal is not working at all. I'm not seeing the code installed. If it is not installed please install it so we can see what might be wrong. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
SSong Posted November 19, 2021 Share Posted November 19, 2021 On 11/16/2021 at 12:59 PM, creedon said: I'm not seeing the code installed. If it is not installed please install it so we can see what might be wrong. So this is what I see on my phone. The two button are in the same row instead of stacked, but I'm actually ok with that. I don't want the row reverse on mobile anymore, it's better if the continue shopping button is on the left on mobile, but something is weird with the padding of the checkout button, and there's also no margin in between for some reason. Would also love bigger margin at the top of the whole thing. Thank you!! Link to comment
creedon Posted November 19, 2021 Share Posted November 19, 2021 2 hours ago, SSong said: So this is what I see on my phone. The two button are in the same row instead of stacked Please update my code per my Nov 12th post that is why it doesn't look right. When updated it should look something like the following on mobile. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
67Chevy Posted September 21, 2022 Share Posted September 21, 2022 @paul2009 do you have a solution for adding a continue shopping button to the check out page when using express checkout on a Version 7.0– Montauk family (Montauk template) ? Link to comment
creedon Posted September 21, 2022 Share Posted September 21, 2022 9 minutes ago, 67Chevy said: continue shopping button to the check out page The checkout page can not be altered. It is an SS security feature. paul2009 and 67Chevy 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
paul2009 Posted September 22, 2022 Share Posted September 22, 2022 13 hours ago, 67Chevy said: do you have a solution for adding a continue shopping button to the check out page when using express checkout As @creedon explained, this isn't possible because the checkout cannot be modified. That said, if you think that customers may want to go back and select a second product, I do not recommend using the Express Checkout because it isn't designed for this purpose. creedon 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? 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