use my custom code in woocommerce product image

Question

I want to use my custom code in woocommerce products gallery image , I have done that before for a simple gallery but this time my code is little more professional and i want use the tag in woocommerce products gallery , here is the code:

<div class="product-gallery">
                            <span class="badge">Offer</span>
                            <div class="product-carousel owl-carousel">
                                <div class="item">
                                    <a class="gallery-item" href="./assets/img/single-product/thumbnail-1.jpg"
                                        data-fancybox="gallery1" data-hash="one">
                                        <img src="./assets/img/single-product/thumbnail-1.jpg" alt="Product">
                                    </a>
                                </div>
                                <div class="item">
                                    <a class="gallery-item" href="./assets/img/single-product/thumbnail-2.jpg"
                                        data-fancybox="gallery1" data-hash="two">
                                        <img src="./assets/img/single-product/thumbnail-2.jpg" alt="Product">
                                    </a>
                                </div>
                                <div class="item">
                                    <a class="gallery-item" href="./assets/img/single-product/thumbnail-3.jpg"
                                        data-fancybox="gallery1" data-hash="three">
                                        <img src="./assets/img/single-product/thumbnail-3.jpg" alt="Product">
                                    </a>
                                </div>
                                <div class="item">
                                    <a class="gallery-item" href="./assets/img/single-product/thumbnail-4.jpg"
                                        data-fancybox="gallery1" data-hash="four">
                                        <img src="./assets/img/single-product/thumbnail-4.jpg" alt="Product">
                                    </a>
                                </div>
                            </div>
                            <ul class="product-thumbnails">
                                <li class="active">
                                    <a href="#one">
                                        <img src="./assets/img/single-product/thumbnail-1.jpg" alt="Product">
                                    </a>
                                </li>
                                <li>
                                    <a href="#two">
                                        <img src="./assets/img/single-product/thumbnail-2.jpg" alt="Product">
                                    </a>
                                </li>
                                <li>
                                    <a href="#three">
                                        <img src="./assets/img/single-product/thumbnail-3.jpg" alt="Product">
                                    </a>
                                </li>
                                <li>
                                    <a href="#four">
                                        <img src="./assets/img/single-product/thumbnail-4.jpg" alt="Product">
                                    </a>
                                </li>
                                <li>
                                    <a class="navi-link text-sm" href="./assets/video/download.mp4" data-fancybox
                                        data-width="960" data-height="640">
                                        <i class="mdi mdi-video text-lg d-block mb-1"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
0
Mehrdad Hosseini 2 months 0 Answers 9 views 0

Leave an answer