Product Gallery Archives - Business Bloomer

WooCommerce Hide Featured Image, Keep Product Gallery

Close-up of hands typing on a laptop with an image gallery open on the screen.

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.

WooCommerce: Combining Swiper Slider with PhotoSwipe Lightbox on Product Pages

In a recent Business Bloomer Club discussion, a WooCommerce user was integrating a custom image slider using SwiperJS on single product pages.

While the custom slider looked great, the user wanted to retain WooCommerce’s default PhotoSwipe lightbox functionality to allow users to click on the slider images and open them in a lightbox. This would preserve a familiar and intuitive product-viewing experience.

Combining SwiperJS and PhotoSwipe requires some additional JavaScript to connect the two libraries, ensuring that clicking on a slider image opens it in the PhotoSwipe lightbox. Let’s explore how to achieve this.

How to Add a Video to Your WooCommerce Product Gallery with a Play Button Overlay

In a recent Business Bloomer Club Slack thread, a user wanted to enhance their WooCommerce product gallery by adding a video thumbnail that opens in a lightbox only when clicked, ensuring better performance.

The ideal setup would display a static image with a play button overlay, activating the video in a pop-up rather than embedded directly in the gallery. For those seeking this functionality, free and premium plugins exist, each with unique pros and cons.

A few options suggested included YITH WooCommerce Featured Video (free but with mixed reviews), Really Simple Featured Video, and premium alternatives like Puri.io’s Featured Videos. Another member mentioned IconicWP’s plugin, which enables video thumbnails but also includes gallery customization options. However, using this plugin means future gallery customizations would need to integrate specifically with it, as it alters WooCommerce’s default gallery structure.

How to hide the WooCommerce product gallery for variable products?

n a recent Business Bloomer Club Slack thread, a WooCommerce user recently brought up a common but tricky customization challenge: hiding product gallery thumbnails while ensuring only selected variation images appear.

This type of customization can improve UX, focusing customer attention on their selected product variation without visual clutter from thumbnails. Our community brainstormed some effective solutions to streamline this visual experience without compromising functionality.

Here’s a breakdown of the steps discussed to achieve a seamless view that only displays variation-specific images.

WooCommerce: 10 Most Popular Free Plugins

WooCommerce is one of the most popular eCommerce platforms that allows you to launch your online business, build high-functionality online stores for your clients, or take your brick-and-mortar store online.

Powering over 28.19% of all online stores, WooCommerce’s versatility and open-source nature allow businesses to build their dream store, add unlimited products and consumers, take orders, and increase sales.

The core WooCommerce plugin holds 68% of the usage distribution – the highest on the internet. However, despite its popularity, the official WooCommerce plugin lacks several features you might need for your eCommerce store. But to make up for that, it offers several plugins that allow you to enhance your store’s functionality and improve customer experience.

But choosing from over 4228 WooCommerce plugins from WordPress.org can get overwhelming. So, to make your job easier, we’ve hand-picked the best free WooCommerce plugins you can use on your store to take it to the next level. Let’s dive in!

WooCommerce: How to Enhance the Product Gallery

Product featured and gallery images are important components of your online WooCommerce store – because most online shoppers base their product purchase decisions on product images.

Don’t take our word for it. According to Etsy, 90% of online customers say the product image quality is a decisive factor in an online sale. Thus, it becomes imperative to improve your product images and the visual appearance of your online store to boost clicks, maximize conversions, and increase sales.

Unfortunately, the standard WooCommerce product gallery provides a basic interface – making it difficult to boost your product images. So, if you want to turn your simple WooCommerce product gallery into a responsive and stunning carousel slider – this article is for you.

We share the top plugins you can use to customize your WooCommerce product gallery and create appealing product images that drive sales. But first, let’s see how improving gallery images can help your online store.

WooCommerce: Add Content Below Single Product Gallery

If your products have multiple images and use the product gallery, you may have encountered issues when trying to add content below the gallery using the usual hook method.

If you’re familiar with WooCommerce customization and Single Product Page hooks, you’ve likely noticed that adding content under the images is no longer possible with the woocommerce_product_thumbnails hook.

This is because WooCommerce now includes a JavaScript-powered product gallery slider and lightbox on the single product page. Previously, the gallery was entirely managed by PHP.

As a result, the script fully replaces the default content, including that hook, making it more challenging to insert additional content.

Here’s a workaround. Be sure to test how it behaves on mobile, as this has only been tested on desktop—you may even want to hide it on smaller screens.

Tag: Product Gallery