use my custom code in woocommerce product image

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>