victoria85 Posted August 15, 2023 Share Posted August 15, 2023 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
Lesum Posted August 15, 2023 Share Posted August 15, 2023 @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 Posted August 15, 2023 Author Share Posted August 15, 2023 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 Link to comment
Lesum Posted August 16, 2023 Share Posted August 16, 2023 (edited) @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 August 16, 2023 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 Posted August 16, 2023 Author Share Posted August 16, 2023 (edited) 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! Edited August 16, 2023 by victoria85 Link to comment
Lesum Posted August 16, 2023 Share Posted August 16, 2023 @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
victoria85 Posted August 16, 2023 Author Share Posted August 16, 2023 (edited) @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 -->  Edited August 16, 2023 by victoria85 Adding more info Link to comment
Solution Lesum Posted August 16, 2023 Solution Share Posted August 16, 2023 @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
victoria85 Posted August 16, 2023 Author Share Posted August 16, 2023 @Lesum Perfect! Thank you so much for your support. It's exactly how I wanted it 🙌 Lesum 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment