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!
Continue reading WooCommerce Without 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!
Continue reading WooCommerce: How to Reuse Zoom/Lightbox Scripts On Non-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.
Continue reading WooCommerce: 5 Minor Adjustments for Enhancing Product Images
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!
Continue reading WooCommerce: Show Product Image @ Emails
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.
Continue reading WooCommerce: How to Enhance the Product Gallery
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.
Continue reading WooCommerce: How To Flip Product Images On Hover
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!
Continue reading WooCommerce: Show Product Images @ Checkout Page
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!
Continue reading WooCommerce Blocks: Hide Images Etc. From Product Grid Block
You could upload 10 images, one for each color of your variable product… or you could be slightly smarter and use 1 image only, 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!
Continue reading WooCommerce: Switch Image Background On Color Variation Selection
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!
Continue reading WooCommerce: Full Width Featured Image @ Single Product Page
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?
Continue reading WooCommerce: Edit External Product Image URL
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).
Continue reading WooCommerce: Add Content Below Single 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!
Continue reading WooCommerce: Show Video Instead of Product Images
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!
Continue reading WooCommerce: How To Change Product Image Sizes