Adding HTML Code to Replace Text in PHP

Question

I want to change my download button for non logged in users. Instead of the download button I want to show a custom HTML code with message to login/register. The below code is hiding the button but the injection of the new HTML code is not working.

<?php if (!is_user_logged_in()) : ?>
<style>
    .product-purchase-box{
        display: none;
    }
</style>
<script>
<p><a href="https://ezcliparts.com/login">LOGIN</a> OR <a href="https://ezcliparts.com/register">REGISTER</a> FOR FREE TO ACCESS THIS AND ALL 1 MILLION+ DESIGNS</p>
</script>
<?php endif; ?>

Target Page: ezcliparts.com/downloads/seamless-geometric-digital-paper-pattern-abstract-hand-drawn-background

Original Download Button Output:

<div class="cart-box row product-purchase-box" style="user-select: auto;">
    <div class="col-md-12 paading-left-0 product-price" style="user-select: auto;">
        <h3 style="user-select: auto;"><span class="edd_price" id="edd_price_4701" style="user-select: auto;">$0.00</span></h3> </div>
    <div class="product_widget_inside" style="user-select: auto;"> <a href="#" class="edd-free-downloads-direct-download-link button white edd-submit" data-download-id="4701" style="user-select: auto;">Download</a> </div>
</div>

I created the website with the help of a developer but the contract is over so I have to do it myself now.

Answer 1

One way to handle this with the approach you've taken is to expand on the PHP code for the check to see if the user is logged in like so:

<?php if (!is_user_logged_in()) : ?>
<style>
  .product-purchase-box{display: none;}
  .linktologin{display: inline;}
</style>
<?php else : ?>
<style>
  .product-purchase-box{display: inline;}
  .linktologin{display: none;}
</style>
<?php endif; ?>

Then, remove the HTML code for the login link within the <script> tags and add it to where you have the button HTML with the class .linktologin (or whatever you chose). Something like this:

<div class="cart-box row product-purchase-box" style="user-select: auto;">
  <div class="col-md-12 paading-left-0 product-price" style="user-select: auto;">
    <h3 style="user-select: auto;"><span class="edd_price" id="edd_price_4701" style="user-select: auto;">$0.00</span></h3>
  </div>
  <div class="product_widget_inside" style="user-select: auto;"> <a href="#" class="edd-free-downloads-direct-download-link button white edd-submit" data-download-id="4701" style="user-select: auto;">Download</a></div>
</div>
<div class="linktologin">
  <a href="https://ezcliparts.com/login">LOGIN</a> OR <a href="https://ezcliparts.com/register">REGISTER</a> FOR FREE TO ACCESS THIS AND ALL 1 MILLION+ DESIGNS
</div>