I have a theme and it’s functionality does not support woocommerce functionalites however the theme work with woocommmerce. I am using a font preview for a shop but the preview only work with hardcoded product however I want it to be dynamic. I tried all the codes but none of them works. I am adding the code below which is giving me the desired output but only if it’s hardcoded. I tried another code but the output was not showing and also the code was picking up the listing page id and not woocommerce however i want to display the output from the woocommerce extension.

<script type="text/javascript" id="twfp-script-js-extra">
    var twfp = '';
    $(document).ready(function() {
    /* <![CDATA[ */
        const id = "<?= json_encode($id); ?>"
        var productId = $("#download_listing_id").val();
        console.log({productId, id});
        twfp = {"ajax_url":"https://website.com/wp-admin/admin-    
ajax.php","post_id":productId?.toString()??"3748","nonce":"50d4fd1a08"};
    /* ]]> */
    })
 </script>

I was trying the code below but it doesn’t work.

<?php
global $product;
$id = $product->id;
?>