Jump to content

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

Go to solution Solved by Lesum,

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

@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? 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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! 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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>

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment

@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....'

Screenshot 2023-08-16 at 21.42.54.png

 

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 -->

 

Edited by victoria85
Adding more info
Link to comment
  • Solution

@victoria85 Here's is the updated code according to the mockup:

<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').append('<div class="customText"><p class="customMessage">Sorry you missed out on this design! Sign up for my newsletter to be the first to hear when new designs are released.</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\">JOIN THE LIST</a> </div>');
    }
});
</script>

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

Let me know how it goes. Thanks! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.