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
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