Preview:
document.addEventListener('DOMContentLoaded', function() {

    var wishlistButton = document.getElementById('wishlistBtn');

​

    wishlistButton.addEventListener('click', function() {

        // Create or toggle popup container

        var popupContainer = document.querySelector('.popup');

        if (!popupContainer) {

            popupContainer = document.createElement('div');

            popupContainer.className = 'popup';

            popupContainer.innerHTML = `

                <div class="popup-content">

                    <span class="close" onclick="closePopup()">&times;</span>

                    <h2>Wishlist</h2>

                    ${getWishlistContent()} <!-- Insert WooCommerce Smart Wishlist shortcode content here -->

                    <p><a href="#" id="wishlistLink">View Wishlist</a></p>

                </div>

            `;

            // Set the link to the wishlist page (replace with your wishlist link)

            var wishlistLink = popupContainer.querySelector('#wishlistLink');

            wishlistLink.href = '#'; // replace with your wishlist page URL

            // Append the popup container to the body

            document.body.appendChild(popupContainer);

        } else {

            // Toggle display property

            var currentDisplay = window.getComputedStyle(popupContainer).getPropertyValue('display');

            popupContainer.style.display = currentDisplay === 'none' ? 'block' : 'none';

        }

    });

​

    // Function to close the popup

    window.closePopup = function() {

        var popupContainer = document.querySelector('.popup');

        if (popupContainer) {

            document.body.removeChild(popupContainer);

        }
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter