Jump to content

Continue Shopping Button - Custom Code

Go to solution Solved by paul2009,

Recommended Posts

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>

 

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
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
  • 2 months later...
  • 3 weeks later...
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
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
  • 1 month later...

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

image.png.738c7f3bfb6dde3a03a6db92736ff2c3.png

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 3 weeks later...

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>

 

 

Screen Shot 2021-09-09 at 5.05.29 PM.png

Link to comment
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>

 

 

Screen Shot 2021-09-09 at 5.05.29 PM.png

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
  • 1 month later...
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!

Screen Shot 2021-10-29 at 4.03.32 PM.png

Screen Shot 2021-10-29 at 4.03.19 PM.png

Edited by SSong
change of mind
Link to comment
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!

Screen Shot 2021-10-29 at 4.03.32 PM.png

Screen Shot 2021-10-29 at 4.03.19 PM.png

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
  • 2 weeks later...

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

Screen Shot 2021-11-12 at 3.38.35 PM.png

Link to comment
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
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
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!!

IMG_4727.jpg

Link to comment
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.

872099418_ScreenShot2021-11-19at10_54_17AM.thumb.png.1ca242dfeae13472c33f38ea4584a357.png

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
  • 10 months later...
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.

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.