Hide Download Button on order confirmation page

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

 

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

Hi Paul thanks for replying.
It is indeed, I believe it's been shared somewhere an i'm getting multiple gibberish emails each day, not had a problem for years prior.

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>

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

 

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

🙏

Here's a confirmation page - https://www.warriorsound.co.uk/commerce/orders/b8c570c1-09b7-44fa-9b9e-2d32a5d28152

Here's a no cost item to test ( put paul2009 an il delete you 👍) - https://www.warriorsound.co.uk/store/p/fsdnb

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

 

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 👍