You can follow these to replace Sold Out with a button on Product Detail Page
#1. All Sold Out Products
Use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content"><div class="sqs-block-button-container sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary"><a href="http://bostonsaxshop.com/course" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" target="_blank" data-initialized="true">GO TO COURSE</a></div>').insertBefore('body.view-item .product-mark.sold-out');
});
</script>
<style>
section.product-details .button-block div {
justify-content: flex-start !important;
}
.product-mark.sold-out {
display: none !important;
}
</style>

Result

Change button text/url here

#2. One Product
You can edit Product Additional Info

Add a Code Block

Then paste the code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content"><div class="sqs-block-button-container sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary"><a href="http://bostonsaxshop.com/course" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" target="_blank" data-initialized="true">GO TO COURSE</a></div>').insertBefore('body.view-item .product-mark.sold-out');
});
</script>
<style>
section.product-details .button-block div {
justify-content: flex-start !important;
}
.product-mark.sold-out {
display: none !important;
}
</style>
