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>