Skip to content

Instantly share code, notes, and snippets.

@faisalahammad
Last active February 27, 2025 15:07
Show Gist options
  • Save faisalahammad/4677977ddb31572f6a5834e1a45c11c4 to your computer and use it in GitHub Desktop.
Save faisalahammad/4677977ddb31572f6a5834e1a45c11c4 to your computer and use it in GitHub Desktop.
This code snippet uses jQuery to replace product thumbnail images with their full-size versions in the WordPress admin products list page. It ensures that whenever the page loads or the product list is refreshed, the thumbnails are updated to show larger images.
<?php
/**
* Use jQuery to replace product thumbnails with full-size images in admin
* @author: Faisal Ahammad
*/
function replace_admin_thumbnails_with_fullsize_js() {
$screen = get_current_screen();
if (!$screen || $screen->base !== 'edit' || $screen->post_type !== 'product') {
return;
}
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Function to replace thumbnail URLs with full-size URLs
function replaceWithFullSizeImages() {
$('.column-thumb img').each(function() {
var $img = $(this);
var src = $img.attr('src');
// Remove size suffix from URL (e.g., -150x150.jpg → .jpg)
var fullSizeSrc = src.replace(/-\d+x\d+(\.[^.]+)$/, '$1');
// Set the new source and remove srcset and sizes
$img.attr('src', fullSizeSrc)
.removeAttr('srcset')
.removeAttr('sizes');
});
}
// Run initially and also when list is refreshed
replaceWithFullSizeImages();
$(document).ajaxComplete(function() {
setTimeout(replaceWithFullSizeImages, 100);
});
});
</script>
<?php
}
add_action('admin_footer', 'replace_admin_thumbnails_with_fullsize_js');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment