I searched here, but could not find what I was looking for.
System – WooCommerce
Query – Single Product Page Template
Probem
I have 3 image aspect ratios that work well for my products.
One size does not fit all, due to the ridiculous difference in product size/scale/ratios.
Ratio 1 – 30:7
Ratio 2 – 17:7
Ratio 3 – 1:1
How is it possible to utilize these three Product image aspect ratios with WooCommerce Single Product Page templates. I know I can customize my single product page, and even have multiple single product page layouts for different product categories. But how do I assign different image aspect ratios? I am stuck with choosing 1 aspect ratio for all images.
The ideal solution here would be to inject CSS classes into the HTML code for the product images. So your 30:7 images might have the class ratio-1, and your 17:7 images might have the class ratio-2.. That way Microthemer could discover classes that apply to images of a certain ratio when targeting. You can then set the width and height via MT’s style options. However, I’m not sure how flexible WooCommerce is in terms of allowing custom HTML attributes on product images.
Another option might be to leverage Microthemer’s :nth-of-type(n) selectors to target the images separately. nth-of-type selectors target HTML elements based on the order they appear on the page. You can enable them in targeting mode by clicking the gear icon to the right of the selector label field in the top toolbar.
It might be possible to always arrange images of a given ratio in a particular order e.g. ratio-1, followed by ratio-2, followed by ratio-3. And then target the images using e.g. .product img:nth-of-type(1) and .product img:nth-of-type(2) etc. But I would only recommend this option as a last resort as it could be fiddly to maintain.
If you can post a link to the single product page you’re working on I may be able to advise you better.
