Display custom text and link or button on out of stock products?

Hi!

I'm wondering if there's a way with custom code to display some custom text and a link or button on out of stock products?

I've tried the waitlist option and it would be great but I don't want customers signing up to that list, I'd like to send them to a different landing page and/or ask them to reach out on Instagram.

How can I display a custom message on out of stock items?

Thanks so much!

@victoria85 Additional info under Products Details can be used to add custom message. 

Where exactly on your product page you would like to display the custom message? Is the custom message going to be same for all out of stock products?

Would it be possible to share your site URL? 

Hi absolutely

It's https://stoneandspectra.com

The additional product section wouldn't be suitable. I'm looking to customise the sold out text or possibly the waitlist content (I don't want the waitlist form to show, i'd rather have my own text and link or button).

I need this custom info to show for all sold out products automatically.

Appreciate any ideas anyone might have!

Victoria

@victoria85 With custom code, sold out text can be customized and a custom button or link can also be added. Here's is an example code to give you an overview of the idea:

<script>
$(document).ready(function() {
    checkSoldOut();
    function checkSoldOut(){
      $('.product-mark.sold-out').text('Custom Message'); 
      $('.product-mark.sold-out').append('<div><a class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" href=\"https://www.instagram.com/stoneandspectra\">Next Page</a></div>');
    }
});
</script>

Custom code will replace the "Sold Out" text with "Custom Message" and add a button linking to your instagram page. Of course we can customize the design of the text and button. Let me know what you think. Thanks! 

Thanks @Lesum - where should I put this code? In the code injection for product pages? Or in the general code injection for the site?

I tried injecting in a few places but it didn't seem to show.

Thanks!

@victoria85 Sorry I missed a block of code when I copied from my Squarespace editor. You can add the code in general code injection or product page code injection. Here's the updated code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    checkSoldOut();
    function checkSoldOut(){
      $('.product-mark.sold-out').text('Custom Message'); 
      $('.product-mark.sold-out').append('<div class="customButton"> <a class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" href=\"https://www.instagram.com/stoneandspectra\">Next Page</a> </div>');
    }
});
</script>

<script>
$(document).ready(function() {
    checkSoldOut();
    function checkSoldOut(){
      $('#collection-64657692c798492fe5b97766 .product-mark.sold-out').text('SOLD OUT'); 
      $('.customButton div').remove(); 
    }
});
</script>

@Lesum Thank you so much - this worked!

How can I add some paragraph text in between the 'sold out' and the button as per this mock up? (see attached image) e.g. 'Sorry you missed out on this design....'

Edit: I think I have figured it out - could you check if my additions to the code you provided are ok? I'm not fluent in writing code. Thanks 🙂

I styled it a little using css (not shown here) as I'm comfortable using css 🙂 

<!-- Custom sold out message on product page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    checkSoldOut();
    function checkSoldOut(){
      $('.product-mark.sold-out').text('SOLD OUT'); 
	$('.product-mark.sold-out').append('<div class="customSoldOutText"> <p>Sorry you missed out on this design! <br> Sign up for my newsletter to be the first to hear when new designs are released (unsubscribe at any time).</p> </div>');
      $('.product-mark.sold-out').append('<div class="customButton"> <a class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" href=\"https://subscribepage.io/stone-and-spectra-newsletter">SIGN UP</a> </div>');
    }
});
</script>

<script>
$(document).ready(function() {
    checkSoldOut();
    function checkSoldOut(){
      $('#collection-64657692c798492fe5b97766 .product-mark.sold-out').text('SOLD OUT'); 
      $('.customButton div').remove(); 
    }
});
</script>
<!-- end Custom sold out message on product page -->

@Lesum Perfect! Thank you so much for your support. It's exactly how I wanted it 🙌