document.addEventListener('DOMContentLoaded',function(){function diagnoseProductImages(){const productImages=document.querySelectorAll('.woocommerce-product-gallery__image img, .woocommerce-product-gallery__image--placeholder img');productImages.forEach(function(img,index){console.log(`Diagnosing image ${index+1}:`);console.log(`-src:${img.src}`);console.log(`-alt:${img.alt}`);console.log(`-naturalWidth:${img.naturalWidth}`);console.log(`-naturalHeight:${img.naturalHeight}`);console.log(`-complete:${img.complete}`);if (!img.complete || img.naturalWidth===0){console.error(`Image ${index+1}failed to load properly`);// Attempt to load the image directly fetch(img.src) .then(response=>{if (!response.ok){throw new Error(`HTTP error! status:${response.status}`)}return response.blob()}) .then(blob=>{console.log(`Image ${index+1}can be fetched successfully`)}) .catch(e=>{console.error(`Error fetching image ${index+1}:${e.message}`)})}});// Check for potential CORS issues const styles=window.getComputedStyle(document.body);const backgroundImage=styles.getPropertyValue('background-image');if (backgroundImage !=='none'){console.log('Checking background image:',backgroundImage)}// Check if jQuery and WooCommerce JavaScript are loaded console.log('jQuery loaded:',typeof jQuery !=='undefined');console.log('WooCommerce script loaded:',typeof wc_add_to_cart_params !=='undefined')}// Run the diagnostic function diagnoseProductImages();// If using AJAX,you might need to run this after dynamic content loads // jQuery(document).ajaxComplete(function(){// diagnoseProductImages();//})});