(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>
<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 the code
