(Squarespace) Click Pricing Table Button – Open Checkout Page

(It is a bit complex so if you can’t make it work, you can share link to page where you added Pricing Table, Product Block, I can adjust code for your case.
You can use this for both Squarespace or WordPress, but with WordPress, it will require a different code)

Suppose you have a Pricing Table like this. (Here I used Pricing Table Widget)
You want: when users click on the “Pay Monthly” button >> It will add the product to the cart and open the checkout page.

#1. First, you need to create a Pricing Table. (Here I used Pricing Table Widget)

#2. Edit 3 Pricing table buttons > Enter this URL (you can use the same format, whether you use the widget I shared above or any other tool)




and make sure this option “Open Link in a New Tab” is disabled.

#3. Enable Express Checkout

#4. Add 3 Product Blocks under the Pricing Table.
My intention is, when users click on each button, the code will click the “Add to Cart ” button of the corresponding product.

#5. Use the Squarespace ID Finder Tool (Free) to find the ID of 3 Product Blocks. In my example, we will have:

  • Product 01: #block-yui_3_17_2_1_1709352666141_2217
  • Product 02: #block-yui_3_17_2_1_1709352666141_2878
  • Product 03: #block-yui_3_17_2_1_1709352666141_4615

#6. Use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
$(document).on('click', 'a[href="#product01"]', function(event) { 
    $('div#block-yui_3_17_2_1_1709352666141_2217 .sqs-add-to-cart-button').click(); 
  $(document).on('click', 'a[href="#product02"]', function(event) { 
    $('#block-yui_3_17_2_1_1709352666141_2878 .sqs-add-to-cart-button').click(); 
  $(document).on('click', 'a[href="#product03"]', function(event) { 
    $('#block-yui_3_17_2_1_1709352666141_4615 .sqs-add-to-cart-button').click(); 

#7. Explain the code