Jump to content

Hide Download Button on order confirmation page

Go to solution Solved by paul2009,

Recommended Posts

Hello squarespace community. Looking for a little help here, I offer a couple of lead gen items at £0 in the store. Im wanting to confirm emails at least for the download. But currently regardless of the info put into the form they get the download link on the order confirmation page. 

I've tried hiding this using custom css to target the element, but it seems to be overridden even when marked important. 

If anyone has managed this id love a little nudge in the right direction. 

Site for context - https://www.warriorsound.co.uk/store

 

Screenshot 2024-01-19 at 08.39.10.png

Link to comment

Is the issue is that users enter a fake email address in order to download the free item directly from the page?

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Try placing your CSS (with important) inside some Style tags and place it in the Code Injection panel for the Order Status Page.

<style>

(your CSS here)

</style>

Edited by paul2009
Corrected to 'Order Status Page'

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
5 minutes ago, paul2009 said:

Try placing your CSS (with important) inside some Style tags and place it in the Code Injection panel for Order Confirmation Page.

<style>

(your CSS here)

</style>

 

it's still persisting, i've even tried targeting different elements like the icon individually. seems beyond my scope at this point.

For example

.css-1kywwwk { display: none !important; }

#item-0-download { display: none !important; }

 

Link to comment

If you share a link to the item, I’ll take a quick look. 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • Solution

Firstly, my apologies for giving you some incorrect information above 😵‍💫.

Digital Download Products now use the Order Status Page, not the Order Confirmation Page. It's been this way since February last year but I hadn't had my first cup of coffee when I posted my first reply. Your screenshot (and the coffee) helped to wake me up!

Moving the CSS to the Order Status Page Code Injection (now corrected above) should resolve the issue in this specific case (see below). 

image.thumb.png.5e5992c39c29c0349ca478bfe6531019.png

 

That said, I'm going to suggest using JavaScript, instead of CSS, for a number of reasons:

  • The class css-1kywwwk is dynamically allocated. This means it will change whenever Squarespace engineers edit the Order Status page. If you use this class, the code will stop working at some point in the future. 
  • The ID #item-0-download is allocated to the first download button. If there are multiple buttons, they'll each get a sequential ID and, unless you account for each, the other items will still be visible.
  • It's easy for visitors (if they know how to use the browser tools) to uncheck the 'display: none" setting in their browser and make the button(s) appear.
  • With my JavaScript code below, all the buttons with class that ends in "download" will be removed from the page.

Here's what I suggest for the Order Status Page Code Injection panel, in place of the CSS:

<!-- Hide download buttons for digital products on Order Status Page ----------------------->
<!-- Copyright Soundfocus Digital [https://sf.digital] ------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log("Deleting digital download buttons");
    var buttons = document.querySelectorAll('button[id$="download"]');
    buttons.forEach(function(button) {
      button.remove();
    });
  });
</script>

Let me know how you get on.

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
14 minutes ago, paul2009 said:

Firstly, my apologies for giving you some incorrect information above 😵‍💫.

Digital Download Products now use the Order Status Page, not the Order Confirmation Page. It's been this way since February last year but I hadn't had my first cup of coffee when I posted my first reply. Your screenshot (and the coffee) helped to wake me up!

Moving the CSS to the Order Status Page Code Injection (now corrected above) should resolve the issue in this specific case (see below). 

image.thumb.png.5e5992c39c29c0349ca478bfe6531019.png

 

That said, I'm going to suggest using JavaScript, instead of CSS, for a number of reasons:

  • The class css-1kywwwk is dynamically allocated. This means it will change whenever Squarespace engineers edit the Order Status page. If you use this class, the code will stop working at some point in the future. 
  • The ID #item-0-download is allocated to the first download button. If there are multiple buttons, they'll each get a sequential ID and, unless you account for each, the other items will still be visible.
  • It's easy for visitors (if they know how to use the browser tools) to uncheck the 'display: none" setting in their browser and make the button(s) appear.
  • With my JavaScript code below, all the buttons with class that ends in "download" will be removed from the page.

Here's what I suggest for the Order Status Page Code Injection panel, in place of the CSS:

<!-- Hide download buttons for digital products on Order Status Page ----------------------->
<!-- Copyright Soundfocus Digital [https://sf.digital] ------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log("Deleting digital download buttons");
    var buttons = document.querySelectorAll('button[id$="download"]');
    buttons.forEach(function(button) {
      button.remove();
    });
  });
</script>

Let me know how you get on.

Did this help? Please give feedback by clicking an icon below  ⬇️

HERO! I had no idea it was using the wrong section tbh, Confirmation seems more logical that status.
But ironically if i had i wouldn't have gotten your tighter future proof solution, massive thanks.

Supplied with future coffee 👍

Edited by warriorsounduk
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.