Checkout Button Appears after Clicking Add to Cart
Several of my clients convinced me that people were too dumb to realize that after they clicked “Add to Cart,” they had not actually purchased the product until they had checked out. My clients convinced me that a Checkout button should appear below the “Add to Cart” button after it was clicked. Thus I created what I call my “Magic Checkout Button,” which I now offer to all my clients who use Squarespace commerce. This works both on product pages and in product blocks.
It’s not that we’re assuming all online shoppers are dumb. We’re just making it easier for the ones who are.
Here’s how to add my Magic Checkout Button:
Note (added 3/24/20): If you have Ajax Loading enabled in your 7.0 Site Styles, this button will not work outside of admin mode. Either disable Ajax Loading in Design—>Site Styles, or seek a different solution. Here’s a popup solution by Thompson Web Design that works with Ajax.
Step 1: In your Squarespace admin panel, click on Settings—>Advanced—>Code Injection. Paste the following code into the Header Injection area:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".sqs-add-to-cart-button").one("click", function(){
$("<a class='checkoutbutton' href='/commerce/show-cart'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
});
</script>Note: This code updated on 4/3/20 so that the button only appears once and not every time the add to cart button is clicked. (For example, if client puts multiple variants in cart, button only appears the first time they click “Add to Cart.”) Thanks Roberta for your comment that inspired me to make this improvement!
Step 2: You will then need to style the button so that it matches the “Add to Cart” button. Because we’ve given our magic checkout button the class ‘checkoutbutton,’ we can now style it by going to Design—>Custom CSS. Paste the following into the CSS area, and adjust the styles until it matches your Add to Cart button:
/*checkout button that appears below add to cart when you click on it*/
.checkoutbutton {
display:block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color:#19435D;
font-weight: 500;
font-style: normal;
line-height: normal;
opacity:1;
text-align: center;
width: auto;
height: auto;
text-decoration: none;
padding: 9px 20px;
background-color: white;
border-radius: 3px;
transition: .1s opacity linear;
cursor: pointer;
border-color: #19435D;
border-width:2px;
border-style:solid;
margin-top:10px;}
.checkoutbutton:hover {color: #fff; background-color: #19435D;}
Did I help you out? Want to say thanks?
Send me a little donation that reflects the value you found in this solution. I really appreciate it!
