Prosty popup w function - raz na sesje

Prosty skrypt na popup ktory wklejamy w functions.php w stylu potomnym.

Popup pojawia sie raz na sesję czyli zamknecie przeglądarki resetuje licznik i pojawi sie ponownie, natomiast użytkownik będąc na stronie nie bedzje nękany ciągłym wyskakującym okienkiem.

Kod:

add_action('wp_footer', function () {
    ?>
    <style>
        #simple-popup {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        #simple-popup .popup-box {
            background: #fff;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            border-radius: 8px;
            text-align: center;
        }
        #simple-popup button {
            margin-top: 20px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>


    <div id="simple-popup">
        <div class="popup-box">
            <h3>Hej! 👋</h3>
            <p>To jest popup wyświetlany raz na sesję.</p>
            <button id="popup-close">Zamknij</button>
        </div>
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            if (!sessionStorage.getItem("simplePopupShown")) {
                const popup = document.getElementById("simple-popup");
                popup.style.display = "flex";


                document.getElementById("popup-close").addEventListener("click", function () {
                    popup.style.display = "none";
                    sessionStorage.setItem("simplePopupShown", "1");
                });
            }
        });
    </script>
    <?php
});

Działa z elementorem itp.

Popup któy pojawia się po kliknięciu w dany przycisk:
Usuwamy wszystko między

function () {
?>
------ kod
kod ----- Kod poniżej
------ kod
<?php 
});

Podmieniamy tylko to w tamtym kodzie:

<button id="open-popup">Pokaż popup</button>

<div id="simple-popup" style="display: none;">
    <div class="popup-box" style="padding: 20px; background: #fff; border-radius: 8px; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.3);">
        <h3>Hej! 👋</h3>
        <p>To jest popup wyświetlany po kliknięciu przycisku.</p>
        <button id="popup-close">Zamknij</button>
    </div>
</div>


<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("simple-popup");
    const openBtn = document.getElementById("open-popup");
    const closeBtn = document.getElementById("popup-close");

    
    openBtn.addEventListener("click", function () {
        popup.style.display = "flex";
        popup.style.justifyContent = "center";
        popup.style.alignItems = "center";
        popup.style.position = "fixed";
        popup.style.top = "0";
        popup.style.left = "0";
        popup.style.width = "100%";
        popup.style.height = "100%";
        popup.style.backgroundColor = "rgba(0,0,0,0.5)";
    });

    closeBtn.addEventListener("click", function () {
        popup.style.display = "none";
    });
});
</script>