Is a messy WooCommerce shop catalogue costing you sales? Chances are it is. But the good news is that you can get those sales back with next to no effort at all thanks to Perfect Woo Shop Display.
When you look at the best and biggest online retailers around the world they all have one thing in common. Their shop catalogues are neat, uniform and aligned. Everything looks pixel perfect, and for a very good reason. A messy looking store can cost you money. Not only does it look unprofessional, it looks sloppy.
What causes the bad display?
There are a number of factors that can cause a shop to display the catalogue in a messy way. WooCommerce has some solutions built in that will often solve some of them, but not all.
Images: Images of different size can cause the shop to look like a real mess. But thankfully this is easy enough to solve most of the time. In appearance>>WooCommerce>>product images you can set how the images will look and if they should be cropped or not. For most stores this will do the job for the images, but sometimes, and for a very technical reason, an image here and there just won’t work and the image will be either larger or smaller in height than you desire.
Product title: Product titles come in different lengths. These different lengths will cause the title to flow from one line to two, three or four. With each line it will push more content down causing further messiness. Yuck!
Product reviews: If a product receives a review and one next to it doesn’t it can add an additional area where the review is in that product but not others. This pushed content below it down more
Variation Prices: Variable products that have prices with different values can sometimes overflow to a different line, pushing the content below it down. If the products beside it only have one line this causes even more mess
Sale price: Products showing the sale price with the old price can also go to a new line, causing more content to be pushed lower.
See where we’re going here? There are so many things that can cause a shop page to display in a messy way, If you are unfortunate enough to have a few products on the one page suffering from all of these then the page will be a true mess. But it doesn’t have to be. It can be cleaned up.
How to fix it?
There are two ways to fix it.
Method 1. Using the woocommerce product image settings and custom CSS, which will be time consuming and may need adjustments down the track. You can expect to spend up to an hour fiddling around with different CSS values and then have to begin work on different size screens, because images are fluid in nature and you can’t adjust CSS height based on the width of a product or parent container. A lot of work will go into getting everything right here
Method 2. Use Perfect Woo Shop Display. This is the quickets and easiest way to fix the shop display and solve all problems in next to no time.
The plugin has only three options, and they are so easy to configure
- Image width ratio
- Image height ratio
- How to display the image
Width and height ratio:
To keep your shop catalogue looking great you will want the images to be the same dimensions and the same width and height. This means making all images square or rectangle. To accomplish this you will need to crop the images so they fit and look good.
The width and height ratio will force the images to change shape. It’s recommended to use the same dimensions as are set in the WooCommerce catalogue customizer.
A width ratio of 1 and a height ratio of 1 will create a square image. So too will a width of 2 and a height of 2. When the numbers are the same for both width and height the image will always remain square
To create a rectangle image use a different width and height ratio. For example, a width of 2 and a height of 4 will create a tall rectangle that will be twice as tall as it is wide. Changing it to 3 wide and 4 high will make the image slightly shorter. For every 3 units across it will be 4 units high. To create a rectangle that is horizontal simply reverse the dimensions. For example 5 wide and 3 high. For every 3 units in height, it will move 5 units in width.
How to display the image:
Contain: Think of the ratio that you set as a frame for a picture and you decided to set a square, but you have some rectangle images. When you try to place a rectangle in a square it will only fit if it’s smaller than the frame. Setting it to contain will reduce the size of the image so it fits within the frame while keeping its proportions
Cover: Think of the image container as a frame for a canvas picture. If the frame is rectangular but the image is a square it obviously won’t fit. To make it fully fit the rectangular frame and entirely fill it you will have to stretch the image in all 4 directions to make it cover the full canvas. This will result in a full canvas, but with some edges removed. This results in a full image container but a cropped image.
We recommend experimenting with this setting to get the desired result, but it will display well regardless.
How does the plugin work and does it work on all themes?
The plugin will work on all themes as it targets the li.product img in the woocommerce div. Once it located the image it places a DIV wrapper around the image that is used to measure and constrain the proportions of the image dynamically. It does this using a few lines of jQuery. Depending on your choice of image display the image is then either constrained to the cell using contain or is cropped to completely fill the cell using cover.
The plugin then targets the h2 product title and price to set the same height for all fields on the page using jQuery.
The final step of the plugin is placing a DIV wrapper around the product meta details (everything under the image) and setting it to have the same height across all products. This will ensure that other special elements that are loaded automatically or by choice will keep the product data aligned perfectly.
BEFORE – Page 1
BEFORE – Page 2
AFTER – Page 1 – Image contain
AFTER – Page 2 – Image contain
AFTER – Page 1 – Image cover
AFTER – Page 2 – Image cover
Only logged in customers who have purchased this product may leave a review.