Prevent blurry Woocommerce gallery images after 3.3 update

Woocommerce has updated a few times since, but I ran into a confusion when trying to understand how a clients product images were looking blurry as thumbnails on the product page. The Settings -> Media were set to 300×300 The Appearance -> Customize -> Woocommerce -> Product images were set to 300×300 The themes functions … Continued

Image Zoom on hover with pure CSS

Here’s a short snippet for getting a nice fancy zoom when hovering over an image using purely CSS3. Here’s an example:   and here’s the code: You simply need to add the class ‘img-zoom’ to any image’s container to get the effect.   Feel free to play about with the values in the zoom to … Continued

Make Div Full Height Of Device Display Size

Previously, I wrote a short post with a snippet to allow full-size CSS backgrounds. This is great and I use it all the time, but this method will stretch the image background to the max width, thus height is in proportion to the width. What this means, is that landscape images will perfectly fit the … Continued

5 Design Tips To Increase Sales

While there are so many factors to consider when finding a great balance between design and conversion, here are 5 instant tips to consider and tweak to increase web conversion straight away. 1. Website Colours Colours play a massive role in websites. Not only do they carry a psychological sway and role in influence, but … Continued

Full-Width Backgrounds Using CSS Cover

More and more, I see websites with large image backgrounds that completely fill the screen size. I really like these and here’s how to achieve it simply using CSS: That’s it! Obviously you need to change the Div name and background image/path to suit but you’re good to go.