Archived topic
WooCommerce Product Layout
1 reply · Started by Matt on August 2, 2018
Hi,
I really like how Wordery (https://wordery.com/) styles their product layout to account for the different sized book covers. I'd really like to replicate this at https://heretotravel.com/shop/home/ but I can't quite get my head around how to style it.
Is there a combo of GP settings and CSS that would help to achieve this look?
Many thanks,
Matt
Hi Matt,
You can resize the Woocommerce image thumbnails, or use some CSS, however the issue you will have is some of the images contain the white space around the book, others dont, and they have various aspect ratios, so that wouldn't work.
The best thing (unfortunately) is to do what wordery have done and resize the original images so they are all the same width.
I personally always upload square 1:1 ratio images in Woo. Create a square image template, take the widest and tallest images and use them to create a guide for baseline, max width and height. Then use that to create my images. The image you will upload will include the white (transparent) space around the product. This way all your thumbnails will be the same size and alignment and so will your product page images.....
