(Squarespace) How to show custom button on Product Block

To show custom button on Product Block, like this.

#1. First, you can edit Product > Additional Info

#2. Add a Button Block

#3. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
var tpProductCustomFields=function(){if($('.product-block').length>0){var a=$('.product-block'),b=a.length,c=5,d=500;function e(f){var g=Math.min(f+c,b);for(var h=f;h<g;h++){(function(i){var j=$(a[i]),k=j.find('a.product-title'),l=k.attr('href'),q=j.find('.productDetails');if(l&&k.length&&q.find('.product-custom-field').length===0){var m='?nocache='+new Date().getTime()+Math.random();$.get(l+m,function(n){var o=$(n).find('.ProductItem-additional .button-block').clone();if(o.length){if(q.find('.product-custom-field').length===0){o.addClass('product-custom-field');q.append(o);o.css({opacity:'0.8'})}}})}})(h)}if(g<b){setTimeout(function(){e(g)},d)}}e(0)}},tpProductFieldsInitialized=false;function initializeProductFields(){if(!tpProductFieldsInitialized){tpProductFieldsInitialized=true;setTimeout(function(){tpProductCustomFields()},1000)}}$(document).ready(function(){initializeProductFields()});$(window).on('load',function(){initializeProductFields()});
</script>