Click Pricing Table Button – Open Checkout Page

Suppose you have a Pricing Table like this.
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 a free plugin to create it.

#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 Page Header Code Injection

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

#7. Explain code