How to make a Wishlist listing page like your theme pages?

How to use the Wishlist listing section in the theme customiser #

1. Go to the theme, click on the customise
2. Choose the Page from the dropdown
3. You can choose the page template where you want to add the Wishlist Listing Section
4. Click Add section, choose APP tab
5. Click on Wishlist Listing Section
6. Click save

Here is a short video of the Wishlist listing section #

HTML structure for the wishlist listing #

Below is the HTML code that you can modify as per your preference

<div>
                <div class="wishlist-page-main page-width">
                    <h2 class="modal-heading"></h2>
                    <p class="modal-page-auth"></p>
                    <div class="grid-outer-main">
                        <div class="grid-option">
                            <h5 class="gridText"></h5>
                            <div class="grid-option-img1 grid1" onclick="gridFxn('1')">
                                <span></span>
                            </div>
                            <div class="grid-option-img2 grid2" onclick="gridFxn('2')">
                                <span></span>
                            </div>
                            <div class="grid-option-img3 grid3" onclick="gridFxn('3')">
                                <span></span>
                            </div>
                            <div class="grid-option-img4 grid4" onclick="gridFxn('4')">
                                <span></span>
                            </div>
                        </div>
                        <div class="searchData"><h4>Search Here</h4><input placeholder="Search" onkeyup="handleSearchData(event)" value="" class="searchbar_Input" /></div>
                        <div class="share-div"></div>
                    </div>

                    <div id="wg-myModal1" class="wg-modal1">
                        <div class="wg-modal-content1">
                            <div class="close1"></div>
                            <div id="main-Modal-form1">
                                <h3 class="sharable-link-heading"></h3>
                                <span class="modal-inside"></span>
                                <br/>
                            </div>
                        </div>
                    </div>

                    <div class="show-title"><div class="loader-css" ><span></span></div> </div>
                    <div class="modal-button-div"></div>

                    <p class="powered-by-text">Powered by<span>Web Framez Pvt. Ltd.</span></p>
                </div>
                <script>
                    (function newAutoFxn(){
                        document.querySelector('.powered-by-text').innerHTML = "";
                    let headingDiv = document.querySelector('.main-page-title');
                    if (headingDiv) {
                        headingDiv.innerHTML = "";
                       }
                     })();
                 setTimeout(() => {
                        pageTypeFunction();
                        pageTypeStyle();

                    const elementForPageWidth = document.querySelector('.page-width--narrow');
                    if (elementForPageWidth && elementForPageWidth.classList.contains('page-width--narrow')) {
                        elementForPageWidth.classList.remove('page-width--narrow');
                   }
                 }, [1000])
                </script>
            </div>