WooCommerce and WordPress are pretty great, all things considered. This being said, you’ll probably need a lot of plugins if you want to customise the look and feel of your site. So what you save on free software, you lose in plugin costs.
Not me! I’m on a mission for cheap thrills. The only plugin cost I have is Elementor. The rest I can do with free plugins and basic functions.php edits.
One such hack is using the Elementor gallery/photo widget to display the product images on a WooCommerce post. The default Woo one is limited in customisation, and in my opinion, not that good. I tried a few free gallery image plugins, but they were all either buggy, slow, stuck on the crap options – or a combination of the three.
If only there was a way to use the gallery built in to Elementor! It’s fast, optimised, free and look nice. You can do this out of the box, but it doesn’t include the featured image/main image of the product by default, which is a bit of a pain.
The Solution
This bit of code goes in functions.php and prepends the the featured image to the woo product gallery, so that when Elementor pulls the images, it gets the whole lot.
// Add featured image to product gallery
add_filter('woocommerce_product_get_gallery_image_ids', function($gallery_image_ids, $product) {
// Ensure we're working with a valid WC_Product object
if ( ! is_a($product, 'WC_Product') ) {
return $gallery_image_ids;
}
// Skip in admin or non-product views
if ( is_admin() ) {
return $gallery_image_ids;
}
$featured_image_id = $product->get_image_id();
if ( $featured_image_id && ! in_array($featured_image_id, $gallery_image_ids) ) {
array_unshift($gallery_image_ids, $featured_image_id);
}
return $gallery_image_ids;
}, 10, 2);
Then simply set the woo product gallery as the dynamic source in the Elementor page builder.
