How to Add custom share icon without plugins on wordpress website

Share icon one right side of the website, Past this code on down of thame edit > function.php,

replace icon url also

 // Add custom share icon
function custom_share_icon() {
   ?>
   <div class="custom-share-icons">
       <a href="#" id="share-button"><img src="https://www.questions.gorkhatv.com/wp-content/uploads/2023/12/share.png" alt="Share"></a>
   </div>

   <script>
       document.addEventListener('DOMContentLoaded', function() {
           var shareButton = document.getElementById('share-button');

           shareButton.addEventListener('click', function(event) {
               // Get the current page URL
               var pageUrl = window.location.href;

               // Check if the Web Share API is supported
               if (navigator.share) {
                   event.preventDefault(); // Prevent default link behavior
                   navigator.share({
                       title: 'Check out this website',
                       url: pageUrl,
                   });
               } else {
                   // Fallback for browsers that do not support Web Share API
                   var dummyInput = document.createElement('input');
                   dummyInput.value = pageUrl;
                   document.body.appendChild(dummyInput);
                   dummyInput.select();
                   document.execCommand('copy');
                   document.body.removeChild(dummyInput);

                   // Optionally, provide visual feedback to the user
                   alert('Link copied, you can past and share your friends');
               }
           });
       });
   </script>
   <?php
}
add_action('wp_footer', 'custom_share_icon');

// Add custom styles for the share icon
function custom_share_icon_styles() {
   ?>
   <style>
       .custom-share-icons {
           position: fixed;
           top: 50%;
           right: 20px;
           transform: translateY(-50%);
       }

       .custom-share-icons a {
           display: block;
           margin-bottom: 10px;
       }

       .custom-share-icons img {
           width: 40px; /* Adjust the size of the icon */
           height: auto;
           border-radius: 50%;
           border: 2px solid #fff; /* Optional: Add a border around the icon */
           cursor: pointer; /* Change cursor to indicate clickability */
       }
   </style>
   <?php
}
add_action('wp_head', 'custom_share_icon_styles');

Share icon with copy url link on the down of single produt after the product price past this code on funtion.php

// Share option after the product price : Past this code with last of >>>>woocommerce/templates/single-product/meta.php or as your wish where you wanna display 
function add_custom_code_after_price() {
    ?>
    <div class="product-copy-link">
    <input type="text" value="<?php the_permalink(); ?>" id="product-link" readonly>
    <button onclick="copyProductLink()" style="background-color: green; border: none; color: white;">
        <i class="fa fa-share"></i> Copy Share Link
    </button>
</div>
    <script>
        function copyProductLink() {
            var copyText = document.getElementById("product-link");
            copyText.select();
            document.execCommand("copy");
            alert("Copied: Product link");
        }
    </script>
    <?php
}
add_action('woocommerce_single_product_summary', 'add_custom_code_after_price', 20);