Featured Image Archives - Business Bloomer

WooCommerce: Organize Your Media Library with Folders

Vibrant multicolored paper stacks arranged on shelves in a stationery store.

When working on a WooCommerce website with many products, there’s almost always a large amount of media attached to them.

This isn’t limited to just the main product images or gallery photos; many stores also include downloadable products, multiple product variations, and even add-ons that allow for galleries for each variation.

Managing all these files in WordPress’s default Media Library can quickly become overwhelming. Without a proper organization system, finding the right image or file can take longer than it should, slowing down updates, product launches, and site maintenance.

In this tutorial, we’ll explore how to handle large media libraries efficiently, including using folders, and best practices to keep your media easy to manage—even as your store continues to grow.

When Ad Blockers Hide WooCommerce Product Images

Beach volleyball action shot of two players competing at a tournament in Pasay, Philippines.

In a recent Business Bloomer Club Slack thread, we uncovered a fascinating quirk that could easily go unnoticed for months: product images in WooCommerce can be blocked by ad blockers if their filenames contain certain keywords.

I discovered this when a product image named “banner-ad.png” mysteriously failed to display on the shop page. After checking the browser console, I saw the dreaded net::ERR_BLOCKED_BY_CLIENT—a typical result of an ad blocker doing its job a little too well.

This strange behavior could affect your store’s conversions without you even realizing it. Let’s explore what causes this issue and how to avoid it.

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: Auto-Hide Products Without a Featured Image

In WooCommerce, having a well-organized product catalog is essential for user experience and conversions. However, some store owners may forget to add featured images to products, leading to empty placeholders that can make the shop look incomplete or unprofessional.

If you want to ensure that only products with a featured image are displayed, you need a way to automatically hide those without one.

Instead of manually checking and updating each product, you can use a simple PHP snippet to exclude products missing a featured image from your shop, category, and search pages. This approach keeps your store looking polished while preventing customers from encountering blank product thumbnails. The best part? It only takes a few lines of code to implement.

Below, I’ll show you how to add this snippet to your theme’s functions.php file or a custom plugin, ensuring that only properly set up products appear in your WooCommerce store.

Deleting WooCommerce Product Images by Attribute: A Safe Approach

In a recent Business Bloomer Club thread, a member encountered an issue while attempting to remove images from WooCommerce products with a specific attribute. The function they initially wrote ended up deleting images from all products, which wasn’t the intended outcome. This post explores how to safely delete product images based on specific attributes and ensure that only products matching the criteria are affected.

The user’s goal was to remove images only from products with a particular attribute, such as the brand. However, the initial code used wc_get_products with unsupported parameters (attribute and attribute_term), resulting in an error that applied the action to all products. Below is a revised version of the function, which ensures only products with a specific attribute are affected by first checking for the attribute term in each product.

WooCommerce: Removing Product Images Across Your Store

In a recent Business Bloomer Club Slack thread, a member inquired about removing product images across their WooCommerce store. For specific cases, like businesses selling digital or intangible products, visual product images may not be relevant or necessary.

In this instance, the user’s client sells DNA tests for animals, where images are not required. Instead of using CSS to hide the images, which may still load them in the background, it’s often more efficient to remove them directly through code. Here’s a quick guide to doing just that with a snippet.

How to Add Custom Classes to Product Thumbnails in the WooCommerce Loop

In a recent Business Bloomer Club Slack thread, a developer asked how to add custom classes to the <img> tags in the WooCommerce product loop. The default woocommerce_get_product_thumbnail() function doesn’t have an easy hook for adding classes directly to product images.

This functionality would typically involve editing the core WooCommerce template files, but there are ways to achieve the result using WordPress and WooCommerce filters.

Here’s how to add custom classes to product thumbnails without altering core files.

WooCommerce Without Product Images

This is an edge case, however it may happen that a B2B business requires no product images and doesn’t want to use the WooCommerce image placeholder either (this shows on shop/category pages and the single product page when no featured image is added).

This interesting question was asked by a Club member in our private Slack channel, so I didn’t hesitate for a second and looked for a quick fix (2 lines of code). Enjoy!

WooCommerce: How to Reuse Zoom/Lightbox Scripts On Non-Product Images

WooCommerce product images on the Single Product page get the default Zoom + Lightbox + Photoswipe behavior. This is super helpful when the images are super important for sales conversion, and less helpful in other cases (in fact, here’s a snippet to disable Zoom etc. from the Woo product pages).

Now, the challenge that I had on this same website was that I wanted blog readers to also enjoy the same WooCommerce zoom / lightbox features on blog post images and screenshots. So, without reinventing the wheel, I’m now loading the WooCommerce scripts on pages like this one (single post), and on image click I trigger the lightbox!

You can test the feature by clicking on the image below. Enjoy!

WooCommerce: 5 Minor Adjustments for Enhancing Product Images

In the fickle ecommerce industry, captivating product images can be the difference between a sale or a lost customer.

High-quality images have now become an invaluable asset for your online shop, as they can reel in shoppers, showcase your products uniquely and keep visitors engaged longer. And this is right where WooCommerce enters the picture – pun intended!

Armed with stellar features for optimizing product photos, WooCommerce plays an indispensable role in powering up your ecommerce site’s visual appeal.

In our upcoming discussion, we’ll dive deeper into how you can make these minor adjustments work wonders for your online business. Buckle up as we embark on this insightful journey through WooCommerce image optimization mechanism.

WooCommerce: Show Product Image @ Emails

By default, WooCommerce does not display the product thumbnail inside the order emails.

With this little trick, however, you can revert this default behavior and indeed show images beside their product name inside the email order item table. Enjoy!

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: How To Flip Product Images On Hover

Product images on your WooCommerce website play a significant role in increasing clicks and conversions. In fact, research suggests that 87.6% of customers consider the product image as the key component of their shopping experience.

Naturally, any consumer who clicks on the product card first sees and goes through the product image. After that, they check for the size availability and read the product description, customer ratings, reviews, or technical specifications.

While installing WooCommerce will help you with the basic setup of your eCommerce store – with minimal image settings and a simple product gallery, you’ll need to look for better ways to boost your product images.

So, considering the effective role product images play in eCommerce sales, the question is – how can you maximize their potential and deliver an excellent customer experience?

One way to do this is through the WooCommerce image swap / flip plugins. These plugins let you add a hover effect on your product images to flip or change them. By doing this, you’ll be able to display additional variations of your products, allow customers to preview products right from the category page and keep customers in your store longer by offering them an enjoyable browsing experience.

The product image swap/flip plugins for WooCommerce help stores in several other ways. But first, let’s understand their importance and get a clear picture of their functionality.

WooCommerce: Show Product Images @ Checkout Page

Show WooCommerce Product Images @ Checkout

The Order Review section of the WooCommerce Checkout Page shows the product name, quantity and subtotal. No sign of the product image, which can be very useful to identify/differentiate between similar products or product variations.

This simple snippet will help you display just that: the featured image beside the product name inside the order review table. Easy peasy. Enjoy!

WooCommerce Blocks: Hide Images Etc. From Product Grid Block

Business Bloomer enters the world of Gutenberg today, and we do it with a simple customization tutorial related to the “Product Grid” WooCommerce Gutenberg Blocks: currently these are “Best Selling Products“, “Newest Products“, “On Sale Products“, “Top Rated Products“, “Products by Category” and use the same base code…

However, all of them use custom code and not the default WooCommerce templates (and therefore we can’t take advantage of the WooCommerce hooks for the shop / product archive / product loop unfortunately), so we need to find a workaround if we wish to remove some of the default elements that come up with the product grid items: product permalink, product image, product title*, sale badge, product price*, rating*, add to cart button* in this exact order.

* As you can see from the screenshot below, actually, you can already remove the information with an asterisk from the Block settings. So, in this article, we will see how to remove the rest in case you don’t want it: permalink, image, sale badge. Enjoy!

Tag: Featured Image