Creating a Custom Checkout Button on Squarespace

Jan 11

Written By Lindsey

Ever want to use your shop and product section, but link it to an external checkout button or website?

Here are some examples:

You want to list your Teachable classes as products on your website, but you want to link them to your Teachable checkout button.
You’re a fitness studio and want to sell gift cards along with products, but you want your gift card linked to your fitness studio software.
You want to sell an in-person service along with your physical products, but you want your checkout button to go to your appointment site.

These are just a few examples of how this tutorial can be used to create a custom checkout button on a specific product.

Tutorial

In your product description (where you’d like to add the button) add a text link. The text will be what you want the button to say. The link will be where you want it to go. For example Purchase Gift Card.

At the top, go to Additional Info in your Product Settings. Here, you’ll add a Code Block. Add the following code:

Squarespace 7.1

<style>
.product-price { display: none; }
.variant-option { display: none!important; }
.ProductItem-details .sqs-add-to-cart-button-wrapper { display: none; }
.ProductItem-details .ProductItem-details-excerpt a { 
    background: black; 
    border-radius: 300px; 
    padding: 15px; 
    color: white; 
    text-decoration: none; }
</style>

Squarespace 7.0

<style>
.tweak-product-item-details-show-price .ProductItem-details .product-price { display: none; }
.variant-option { display: none!important; }
.tweak-product-item-details-show-add-to-cart-button .ProductItem-details .sqs-add-to-cart-button-wrapper { display: none; }
.ProductItem-details .ProductItem-details-excerpt a { 
    background: black; 
    border-radius: 300px; 
    padding: 15px; 
    color: white!important; 
    text-decoration: none; }
</style>