Custom WooCommerce message/notice at checkout

I would like to display a custom message/notice at the WooCommerce checkout page for logged out users only. I would like the message to appear every time a non logged in user enters the checkout page and have a button/link inside the notice that would hide it.

Here’s an example on fiverr.com:

enter image description here

How can this be achieved?


EDIT:

$('.hide-notice').on('click', function(e) {
  e.preventDefault();
  $(this).parents('.checkout-notice').slideUp("slow", function() {
    $(this).parents('.checkout-notice').remove();
  });
});
.woocommerce-info {
  padding: 20px;
  background-color: #f5f5f5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<div class="checkout-notice">
  <div class="woocommerce-info">
    Custom message custom message custom message custom message.
    <a href="" class="hide-notice">Hide message</a>
  </div>
</div>

Answer

You can use woocommerce_before_checkout_form to add a custom message. check the below code. code goes in your active theme function.php file.

Add CSS as per your requirement.

add_action( 'woocommerce_before_checkout_form', 'add_custom_message_to_checkout', 1 );
function add_custom_message_to_checkout() {

    if( !is_user_logged_in() ){

        echo '<div class="custom-checkout-message">This is custom checkout message. you can add CSS as per your requirement. <a href="" class="hide-me">close me</a></div>';
        ?>
        <script type="text/javascript">
            (function($){
                $('.hide-me').on('click',function(e){
                    e.preventDefault();
                    $(this).parent('.custom-checkout-message').fadeOut(300, function() { 
                        $(this).parent('.custom-checkout-message').remove(); 
                    });
                });
            })(jQuery);
        </script>
        <?php
        
    }
}

Tested and works.

enter image description here

$('.hide-me').on('click',function(e){
    e.preventDefault();
    $(this).parent('.custom-checkout-message').fadeOut(300, function() { 
        $(this).parent('.custom-checkout-message').remove(); 
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-checkout-message">This is custom checkout message. you can add CSS as per your requirement. <a href="" class="hide-me">close me</a></div>