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()">×</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); }
Preview:
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