In a recent Business Bloomer Club Slack thread, a member asked how to create a product image layout that uses four images in a grid, instead of the default single featured image.
The idea was to unhook the featured image and rely solely on the product gallery to show multiple thumbnails, mimicking a tiled layout. This turned into a technical discussion on WooCommerce’s image handling, where things got tricky due to the JavaScript-driven gallery system.
Here’s what we discovered—along with code snippets and tips that could help if you want to experiment with a similar layout change.
The Goal: A Clean 4-Image Grid
The question started with a simple goal: remove the default featured image on the single product page and instead display a grid of four product gallery images. The WooCommerce product gallery was already in place, and the idea was to allow those gallery images to fill the visual role of the main image, just more evenly distributed.
At first glance, this seemed straightforward. WooCommerce lets you unhook the featured image function, and you might expect that to leave the gallery images intact. But that’s not how it works in reality.
The Problem With Unhooking the Featured Image
Using the standard WooCommerce hook removal method, like this:
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );ends up removing both the featured image and the gallery. This is because WooCommerce outputs both together within the same function, so unhooking it disables the entire image block—not just the main image.
An attempt to filter out only the first gallery image using:
add_filter( 'woocommerce_single_product_image_thumbnail_html', '__return_null' );didn’t work either. The images disappeared entirely. It became clear that the entire image system in WooCommerce is no longer controlled purely by PHP.
The JavaScript Layer: Why PHP Isn’t Enough
Modern WooCommerce themes rely heavily on JavaScript to power image sliders, zoom effects, and lightboxes. That means removing or modifying one image can break the entire gallery. In this case, trying to skip the first image using PHP logic led to nothing being displayed at all—no images, no grid, nothing.
To take back some control, it was necessary to completely disable the JavaScript-powered gallery system. This meant removing both the zoom and the slider features that WooCommerce enables by default.
The Workaround: Disabling Gallery Features and Skipping the First Image
Here’s the final solution that got things working, at least on a basic level:
add_action( 'after_setup_theme', 'bbloomer_remove_zoom_lightbox_theme_support', 9999 );
function bbloomer_remove_zoom_lightbox_theme_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-slider' );
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', function( $html, $attachment_id ) {
if ( is_product() ) {
static $first = true;
if ( $first ) {
$first = false;
return '';
}
}
return $html;
}, 10, 2 );What this does is turn off the JavaScript slider and zoom, so the gallery becomes a series of static images. Then, it skips the first image—usually the featured image—allowing the next four to appear as plain HTML thumbnails.
Some CSS may still be required to make the grid look clean, especially for spacing and layout on different screen sizes.
When It Gets Too Complicated
Ultimately, the member who raised the question chose not to go forward with this solution. While it worked technically, it introduced challenges on mobile devices and complicated the layout beyond what was reasonable for their use case.
Instead, they went with a simpler approach: leaving the WooCommerce image system intact, but hiding the first image only on desktop using CSS. This allowed for flexibility without disrupting mobile behavior or messing with WooCommerce’s internal gallery logic too much.
Conclusion
Trying to turn WooCommerce’s product image layout into a static grid of gallery images sounds simple, but it quickly gets complex due to the underlying JavaScript. Removing the featured image without breaking the gallery takes a combination of hook removals, theme support changes, and conditional logic.
That said, sometimes a simpler, CSS-based solution can be more maintainable in the long run. As always, it depends on your exact layout goals—and how far you’re willing to dig into WooCommerce’s image system.
