Featured Image Archives - Business Bloomer

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!

WooCommerce: Switch Image Background On Color Variation Selection

You could upload 10 images, one for each color of your variable product… or you could be slightly smarter and simply upload 1 “blank” image, and then when the user selects a color trigger a background color change!

Easier to code than to explain, so let’s take a look at the screenshot below (image must be a PNG with transparent background) and the PHP snippet. This could be a time-saver, enjoy!

WooCommerce: Full Width Featured Image @ Single Product Page

The standard layout for the WooCommerce single product page features the main/featured product image on the left and the title/add to cart on the right. But what if you need to turn that image into a hero one i.e. a full width featured image, and push the title and add to cart button under it?

Well, for once, we’ll take a look at a CSS-only snippet. Sometimes the easiest things are also the ones that work brilliantly. Enjoy!

WooCommerce: Edit External Product Image URL

We’ve already seen how to open the External Product “Buy Product” button in a new browser tab – and now it’s time to complete the full picture for External/Affiliate WooCommerce Products: how do we also link the “featured” image to the same external URL?

WooCommerce: Add Content Below Single Product Images

One of the latest WooCommerce versions introduced an optimized product gallery on the single product page. If your products have multiple images and therefore use the product gallery, you might want to also add content below the gallery itself. But…

If you’re familiar with WooCommerce customization and WooCommerce hooks (and specifically the ones of the Single Product Page), you’ll know it’s now impossible to add content under the image as it used to be done with the “woocommerce_product_thumbnails” hook.

In fact, the new gallery completely replaces the default content via JQuery, including that hook. Adding content is not as easy as it used to be. So, here’s the workaround (you might want to check how it behaves on mobile or maybe completely hide this for small devices – this has been tested on desktop only).

WooCommerce: Show Video Instead of Product Images

This week’s snippet is a very easy – yet helpful – one. Many ecommerce entrepreneurs prefer to display a YouTube video instead of a static, boring, featured image and product gallery.

Of course, not all products are created equal. So, let’s see how to make this work for a specific product ID only. Enjoy!

WooCommerce: How To Change Product Image Sizes

WooCommerce lets you resize the product images on Single Product and Shop pages from Appearance > Customize > WooCommerce > Product Images.

Besides, you don’t have to manually regenerate the images after resizing them with an additional plugin, as WooCommerce can crop, resize and automatically regenerate image sizes out of the box.

Despite this seems easy enough, it often happens that themes or plugins may override the “Customizer” settings, and even hide them entirely, which causes a lot of confusion.

In this post, we’ll take a look at the default WooCommerce image settings, and finally with a list of FAQ we’ll try to cover all possible scenarios in case you can’t find a solution. Got a question? Feel free to use the comment area!

Join 75,000+ Monthly Readers & 17,000+ Subscribers.

Become a Business Bloomer Supporter.